IE 7 positioning problems

HTML & CSS
1

Hi!
I am trying to make a language selector menu, and it looks ok in all new browsers except in IE 7, which places the menu completely wrong. Does someone have a helpful hint?

Jordbærstova

2

Hi,

IN IE7 and under floats must always be first in the mark up and static content must follow afterwards.

In all browsers floats must come first when block content follows them but when inline content on the same first line as the float follows then the inlne content is shifted out of the way to make room for the float. IE7 and under get this wrong and floats must come first no matter whether inline or block content follows.

Move you image after the flags.


    <div id="header">
        <ul class="selector">
            <li> <a href="#" class="no"></a> </li>
            <li> <a href="#" class="en"></a> </li>
            <li> <a href="#" class="de"></a> </li>
            <li> <a href="#" class="fr"></a> </li>
        </ul>
     [B]   <p><a href="#"><img alt="Logo Jordbærstova" src="http://jordbarstova.vevstova2.no/img/js-logo.png" /></a><p>[/B]
    </div>

The inline element should be in a block container anyway so I added a p element but a div would suffice also.

If you want this to also work on iE6 then remove the xml declaration that is above the doctype because that trips IE6 into quirks mode and everything will be broken.
3

Hi!

Thanks a lot! This was very helpful - and it also gave me some new knowledge.