Very Strange CSS problem on Internet Explorer. I have no idea what is wrong!

Question

I have just been testing a web site I have set up in Internet explorer. Works fine in Firefox of course. I have a set of style sheets most of which have a background picture I, the user can select the different style sheets as they please. The style sheets render exactly the same apart from colours and backgrounds, of course the text based version renders differently. Anyway I also have a font size changer so the users can choose the font size best for them. I have 4 settings that range from small, standard, large and Xlarge when i load the large and the xlarge font sizes the bg picture reaches the end of my div which is fine. However when I use the small and standard font sizes the bg picture only covers about 5% of what it should. Perhaps the pictures below will help you understand my issue.

Cheers CHL

Ps the fontsize css only contains font sizes for the classes and ids not background styling.

Problem:

Working on the larger font size:

What it looks like in firefox working:

Heres my css that sets the bg:

.content{
background-image: url(springBG.jpg);/**Change for season**/
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat; 
font-family: Calibri, Ariel, sans-serif;
}

Answer 1

"CSS problem on Internet Explorer. I have no idea what is wrong!"

This is heard pretty much every day at my office.

My only suggestion is to try to set the height of the background element.

Answer 2

Speaking of CSS problems, the content overflows under the tagged box in your post.

Answer 3

Try clearing your floats after the white div overlapping the background (that has all of the words in it). The easiest way is to add:

<div class="spacer"></div>

Right after the end tag of the white div. If this does not work, trying adding it to the line before the end tag of the white div. The CSS for spacer:

.spacer
{
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

Answer 4

Can you post the generated HTML?

I'm guessing that IE doesn't see any content in your container with the class "content". This might be because the inner content does not have "hasLayout" (a magical IE thing)

as TM suggested, try setting the height to "1%" which should trigger hasLayout, or set the "zoom: 1;" which also does the trick.

Answer 5

In your CSS declaration you use the "Ariel" font name. This one probably does not exist. Arial, that is. Ariel is some kind of detergent.

Actually, the right non-serif sequence declaration would be:

font-family: Calibri, Tahoma, Arial, Helvetica, Sans-Serif;

Answer 6

you can go ahead and use the shorthand css for background like so:

background: url(yourimage.jpg) no-repeat top center;

Also, ie6 does not support background-attachment:fixed other than on the body.

Answer 7

It's difficult to be sure without seeing the rest of your code or the live site, but this looks like a classic containing-float problem. The simplest way to deal with this is to add overflow: auto to the box which contains your floats (I'm guessing that's .content, here). That should stretch the wallpaper to its proper height.

Failing that, try adding the "clearfix" spacer that Logan suggested to the end of your .content div.

Answer 8

Hi I have found the problem I needed to set the height of the div. For those who mentioned this I have added a point to your rep and thanks for the advice :D

CHL

CSS:

  height:100%;