...

View Full Version : IE6 Background Image Problem



magic_paul
01-14-2008, 06:19 PM
Hi guys,

I'm having a small issue in IE6 with a background image used on the left hand navigation bar of the following site: www.boxfituk.com

You will see in all other browsers, the black background goes right to the footer. However in IE6 it stops about half way down (as IE6 is not actually showing the background image.

My CSS is:

#innerwrapper {
background: url(../styleImages/side1bg.gif) top left repeat-y;
}

Any help would be much appreciated!

Excavator
01-14-2008, 06:38 PM
Hello magic_paul,
That's very odd. In IE6, the DOM shows #innerwrapper is not enclosing your content. It's as if you haven't cleared your floats...but that should affect FF and it doesn't.
Try this and see if it makes any difference:



#innerwrapper {
background: #000 url(../styleImages/side1bg.gif) top left repeat-y;
display: block;
overflow: auto;
}

If not, I'll download your page and work on it locally so I can have a closer look at it.


ps - here is that overflow:auto; method of clearing explained. (http://www.quirksmode.org/css/clearing.html)

.

VIPStephan
01-14-2008, 06:49 PM
The overflow auto method works only on elements with Layout (http://www.satzansatz.de/cssd/onhavinglayout.html), though. That’s why you need to apply a width or height, or other styles that trigger layout as described in the article I linked to.

Excavator
01-14-2008, 07:06 PM
The overflow auto method works only on elements with Layout, though. That’s why you need to apply a width or height,

Der! I know that too... just typed faster than my brain was going.

Apostropartheid
01-14-2008, 07:43 PM
Der! I know that too... just typed faster than my brain was going.
Seemingly a regular occurance ;)

#innerwrapper {
background: #000 url(../styleImages/side1bg.gif) top left repeat-y;
display: block;
overflow:auto;
zoom: 1;
}
would work, I think?

magic_paul
01-14-2008, 08:44 PM
Excellent, I changed to the following and it appears to have worked!



#innerwrapper {
background: url(../styleImages/side1bg.gif) top left repeat-y;
width: 861px;
display: block;
overflow: auto;
zoom: 1;
}


Thanks very much for your help! :thumbsup:

ahallicks
01-14-2008, 09:46 PM
But zoom is not a valid CSS property and should only be used for testing purposes to find the bug, then other fixes should be sought. I'm pretty sure overflow: auto; should work here because a width has been assigned to the div, so you shouldn't need zoom

fatherdom
06-30-2008, 05:17 AM
Zoom is the only thing that works if you have two background images overlaying each other. It might not be valid, but if the site requires it....

Candygirl
06-30-2008, 09:52 AM
Excellent, I changed to the following and it appears to have worked!



#innerwrapper {
background: url(../styleImages/side1bg.gif) top left repeat-y;
width: 861px;
display: block;
overflow: auto;
zoom: 1;
}



A good practice it to limit the css to the minimum useful. Here you have plenty of non useful declarations:

display:block
non useful this is already the default setting for a div

overflow: auto
outside its real purpose it can be useful to establish a new formatting context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting) in all browsers except IE6-. Here you don't need it anyway because you have a footer with a clear property inside #innerwrapper.

zoom: 1;
as specified this is not a valid css property. This could be useful to give #innerwrapper the layout but it already has it because of the width.

width: 861px;
A width is a good way to give the layout but here I would use width:100%. You don't have any margin padding or border. Giving a 100% width will make you free from any width change of your main container.



#innerwrapper {
background: url(../styleImages/side1bg.gif) top left repeat-y;
width:100%;
}

should be enough.

VIPStephan
06-30-2008, 10:19 AM
But zoom is not a valid CSS property and should only be used for testing purposes to find the bug, then other fixes should be sought. I'm pretty sure overflow: auto; should work here because a width has been assigned to the div, so you shouldn't need zoom

Zoom is an MS proprietary CSS property that invokes hasLayout (which, as I said, is required for the overflow clearing to work). It’s correct that this could also be achieved by other methods that are valid. I, for example, am usually using height: 1%;. You have to be aware, though, that the parent element shouldn’t have a height defined. But there’s always a valid way.

Candygirl
06-30-2008, 10:35 AM
I, for example, am usually using height: 1%;. You have to be aware, though, that the parent element shouldn’t have a height defined. But there’s always a valid way.
I do use it sometimes too but I'd add an other warning. If there is an overflow associated (auto or hidden) the content won't be readable in IE5.5 and under while in IE quirks mode the 1% height will be applied even the parent's height's not specified.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum