Results 1 to 2 of 2

Thread: IE6 ruins navbar. Works in other browsers. Need help!

  1. #1
    Join Date
    Oct 2007
    Posts
    46
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default IE6 ruins navbar. Works in other browsers. Need help!

    I'm working on a site which is almost complete and looks fine in all browsers except IE6. For some reason, IE6 adds spaces between each nav item and pushes the last nav item below the others. I have no idea how to fix this. The link can be viewed at http://www.kintera.org/site/c.mtJVJb....BE93/Home.htm and the problem can be viewed in the attached screenshot.

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    This is due to FF and IE having different ideas of how to define defaults in padding/margin. The easiest way to overcome this is to use "conditional statements"...

    By using a conditional statement, you're telling the browser to apply certain styles ONLY if it is a certain browser. All other browsers will read out of the normal stylesheet.

    Here is an example, you can edit and make adjustments as necessary to suit your needs.

    Code:
    <!--[if IE]>
    .navbar{
    background:#ff0000;
    }
    .navbar li{
    padding:4px;
    }
    .navbar a{
    color:pink;
    }
    .navbar a:hover{
    color:blue;
    }
    <![endif]-->
    Also, I failed to mention that since the Conditional Statement is in the form of a HTML comment, you cannot place it in the CSS. It must be placed in the HTML of the page (between <head> and </head>).
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

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
  •