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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Is this a "Clear:" issue?

    Below is a screenshot of a menu I'm working on... this only happens in recent IE versions with compatibility view OFF.



    Here's the code for the menu - it works in Safari, Opera, FF, and some versions of IE9. WTF am I missing?!

    Code:
    <div id="content">
        <div id="menu">
            <ul>
            <li><a class="current" href="index.html"><em><b>HOME</b></em></a></li>
            <li><a href="about.html"><em><b>ABOUT US</b></em></a></li>
            <li><a href="employers.html"><em><b>EMPLOYERS</b></em></a></li>
            <li><a href="contact.html"><em><b>CONTACT</b></em></a></li>
            </ul>
         </div>
    Code:
    #menu { padding:9px 0 28px 0; background:url(../images/line-hor.gif) left bottom repeat-x; width:100%; overflow:hidden; margin-bottom:25px;}
    #menu ul li { display:inline;}
    #menu ul li a { display:block; float:left; background:url(../images/menu-bg.gif) left top repeat-x; margin-right:8px; font-family:"trebuchet ms"; color:#343434; text-decoration:none; text-transform:uppercase;}
    #menu ul li a em { display:block; background:url(../images/menu-left.gif) no-repeat left top;}
    #menu ul li a b { display:block; background:url(../images/menu-right.gif) no-repeat right top; width:82px; text-align:center; font-style:normal; font-size:.91em; padding:1px 0 3px 0; cursor:pointer;}
    #menu ul li a.last { margin-right:0;}
    #menu ul li a:hover { color:#006699;}
    #menu ul li a.current { color:#006699;}

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any ideas?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Seriously IE9? No such thing yet. IE8 is the latest final version. Try setting a width on the ul in pixels rather than percent. Make sure you have set margin and padding to 0 on the ul.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Hi Drewdizzle

    I think the problem is caused by this css

    Code:
    #content ul li {margin-left: 15px; list-style-image: url(../images/marker.gif);}
    also being applied to your #menu li. Try adding:

    Code:
    #content #menu ul li{margin-left:0px}
    to your css. It needs to be this specific to take precedence over the other css entry I think. Why does this only cause a problem in IE8 when it works OK in IE6? I don't know.....


  •  

    Posting Permissions

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