Why Does Sidebar Wrap To Next Line?

HTML & CSS
1

Here is a link

and I am concerned with the way IE6 is handling the sidebar area. It is wrapping below the intended position. I thought this was due to the double float margin bug so I added display:inline; to the sidebar div but it is still wrapping below.

Can someone help me fix it and explain why this is happening?

Thanks in advance,

Todd

2

Hi,
You have some floated list items in your ul#sizes, IE6 needs haslayout in order to contain those floats.

#sizes {
    clear: both;
    overflow: hidden; [COLOR=Blue]/*takes care of IE7*/[/COLOR]
    [B]zoom:1;[/B] [COLOR=Blue]/*haslayout IE6 (contain flots)*/[/COLOR]
}
#sizes li {
    [COLOR=Blue]float: left;[/COLOR]
    margin: 0 11px 0 0;
    padding: 0 0 14px;
    height: 63px;
    text-indent: -9999px
}

Your <h2>Security Features Include</h2> was not clearing them completely and it was hanging out of the #sidebar thus stretching the sidebar width in IE6. I fixed it temporarily by setting clear:both; on that h2 but what I mentioned above was the root of the problem.

It looked like a double margin bug at first glance but you had the proper fix in place for that. :wink:

3

Thanks for checking the code! Your a great help! I learned something new today.

I was also noticing that the unordered list security has a top margin of 15px which displays accurately in IE8, Chrome, Firefox and Safari but does not seem to apply when viewed in IE7 or IE6. Any ideas why that is happening?

4

Try floating security for IE.

e.g.


* html #security{float:left}
*+html #security{float:left}
5

Works perfectly Paul! Thank you so much!

What are those extra symbols all about? What are they called when used with the “html” property and how can I find out all the different targets available?

6

They are IE hacks:

  • html .anything{styles for ie6 and under only}
    *+html .anything {styles for ie7 only}

Don’t mix the hacks or concatenate with each other they will break. The ie7 rules must always be separate.

You can do this:

  • html p, * html h1 {color:red}
    Or This:

*+html p, *+html h1 {color:red}

But not this:

*+html p, * html p {color:red}

The CSS faq has a few topics on hacks and you can find more in the Sitepoint Reference. However, the above 2 are the only hacks I ever use so there’s no need to remember anything else. If you need to target IE8 or have a lot of specific IE styles for a special occasion then use conditional comments (see CSS reference links in my sig).