Grow your CSS skills. Land your dream job.

IE6 Hatred and HELP PLEASE

  • # August 28, 2008 at 1:28 pm

    So I am working on a project for work. Take a look at Jpg attachment and explanation will make much more sense

    In IE 6 the height of my sidebar container is not holding the divs together.

    Explanation:
    I have 1 side bar container div height set to auto and have tried 100%
    3 divs to make up 1 box
    Top Div with top box image
    Middle Div set to stretch vertically
    Bottom Div with bottom box image

    4 boxes, 2 per side of page
    Got that pictured? Ok now for the jacked part.

    The thing is in IE6 (devil of browsers) but need it for 30% of our users, the bottom boxes the Bottom Div is separating from the Middle Div. Take a look. Even in the internal pages the right side bar has 3 Boxes but still the bottom Div separates from the Bottom box’s Middle Div

    I need suggestions. I have tried negative margins, works, BUT, messes up other boxes with same Div id’s. i have tried specifying different names for just the problem boxes, BUT they are used on the internal pages and the issue still happens. HELP PLEASE.

    Thanks in advance

    Site is not live yet so…

    Here is HTML
    <div id="SideBoxTop"></div>
    <div id="SideBoxMiddle">
    <div id="SideBoxContent">
    <h2>Dinosaur Game</h2>
    <center style="background-color:#e6efe6; width:100%;"><a href="/dinosaurs/dinosaur-game/"><img src="/dinosaurs/files/media/image/gamepromo2.gif" width="150" height="150" /></a></center> <br />
    <a href="/dinosaurs/dinosaur-game/">Play here >></a></div><!—End Side Box Content–>
    </div><!—End Side Box Middle–>
    <div id="SideBoxBottom"></div>

    CSS
    #SidebarLeft{ width:237px; height:auto; float:left; margin:0 4px 0 0; display:block; }

    #SidebarRight{ width:237px; height:auto; float:right; margin:0 0 0 0; padding: 0 7px 0 0; display:block; }

    #SideBoxTop{ background:url(images/BoxTop.gif); width:235px; height:22px; float:left; padding: 0 0 0 2px; }

    #SideBoxMiddle{ background:url(images/BoxSlice.gif) repeat-y; width:235px; height:100%; float:left; padding: 0 0 0 2px; }

    #SideBoxBottom{ background:url(images/BoxBottom.gif); width:235px; height:34px; float:left; margin-bottom:3px;
    padding: 0 0 0 2px; }

    #SideBoxContent{ width:200px; height:auto; color:#000000; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:0 0 0 20px; }

    #SideBoxContent p{ margin-top:10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; }

    #SideBoxContent a{ color:#902c1d; text-decoration:none; font-weight:bold; padding:0 0; }

    #SideBoxContent a:hover{
    background:#d99a28; color:#FFFFFF; text-decoration:none; font-weight:bold; }

    It is not the link causing the problem like I though stated in the picture.

    # August 28, 2008 at 3:12 pm

    what happens if you remove the height from the center div? get rid of the height:100%. I don’t think you need to specify a height here because you can use the content to push down on the bottom of the box and the div will expand to fit your content without the height value. then just add a bottom padding on the content to make sure it has enought room to display the bottom of the box

    # August 28, 2008 at 3:16 pm

    oh, one other tip. when I am faced with issues like this. I like to add a temporary background color to the elements in question. To give myself a visual of what could be causing the trouble. The temp background color might fill in the space telling you where the "leak" is coming from that is causing that extra space.

    You have also floated the side boxes but i don’t see anywhere in your code where you have cleared the floats. i don’t know if you need to everytime you float something. But you might try it and see what happens

    # August 28, 2008 at 3:31 pm

    I have realized it has to do with the Bottom Div. I position the Bottom Div absolute, it the butts up against the bottom of the middle Div, BUT, the it does not push the footer div down. It overlaps the top part of it. Is there a way to put the position absolute and then push the Div below that down?

    # August 28, 2008 at 4:08 pm

    I fixed it But I hate it, it is messy and I Vote to abolish it and anyone who has IE6 they should automatically be made to download Firefox or IE7 or 8. Or just do away with IE all together.

    All in Favor type, AYE!

    box
    # August 28, 2008 at 4:48 pm

    I feel your pain- and to some extent I have ceased support for IE6. I do ensure that any website that I build does work in IE6 and is functional – but if there are layout issues that take too much time to fix for just one old browser – then I remove those elements from the ie6 version (via conditional comments) and offer those IE6 users a less rich web experience, but still full access to the content. There are a growing number of high profile web sites and web agencies who are dropping support for IE6.

    # August 28, 2008 at 9:28 pm

    well it would help if you post a link to the site. Also, did you clear the floats?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".