SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 7 positioning problems

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
        <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>
            <p><a href="#"><img alt="Logo Jordbærstova" src="http://jordbarstova.vevstova2.no/img/js-logo.png" /></a><p>
        </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. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

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


Bookmarks

Posting Permissions

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