Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE6 Background Image Problem

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:

    Code:
    #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.

    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    magic_paul (01-14-2008)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    The overflow auto method works only on elements with Layout, 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.

  • Users who have thanked VIPStephan for this post:

    magic_paul (01-14-2008)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Excavator View Post
    Der! I know that too... just typed faster than my brain was going.
    Seemingly a regular occurance
    Code:
    #innerwrapper {
    	background: #000 url(../styleImages/side1bg.gif) top left repeat-y;
    	display: block;
    overflow:auto;
    zoom: 1;
    }
    would work, I think?

  • Users who have thanked Apostropartheid for this post:

    magic_paul (01-14-2008)

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Excellent, I changed to the following and it appears to have worked!

    Code:
    #innerwrapper {
    	background: url(../styleImages/side1bg.gif) top left repeat-y;
    	width: 861px;
    	display: block;
    	overflow: auto;
    	zoom: 1;
    }
    Thanks very much for your help!

  • #7
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #8
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Actually

    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....

  • #9
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by magic_paul View Post
    Excellent, I changed to the following and it appears to have worked!

    Code:
    #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 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.

    Code:
    #innerwrapper {
    	background: url(../styleImages/side1bg.gif) top left repeat-y;
    	width:100%;
    }
    should be enough.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Quote Originally Posted by ahallicks View Post
    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.

  • #11
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by VIPStephan View Post
    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.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •