WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Nav Bar problem in IE (5 posts)

  1. thebeautyedge
    Member
    Posted 2 years ago #

    My blog's navigation bar is not formatting correctly on Microsoft internet explorer 9. It looks fine on firefox, chrome, and safari. How do I fix this problem?

    http://www.thebeautyedge.com

    This is how it looks on firefox:
    http://i103.photobucket.com/albums/m121/daniara85/Fullscreencapture8122012120604PMbmp.jpg

    This is how it looks on IE9:
    http://i103.photobucket.com/albums/m121/daniara85/Fullscreencapture8122012120749PMbmp.jpg

    Thanks!

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

    You're using padding to space-out your menu elements.
    Internet Explorer handles padding differently.

    If I were you, I would create a separate stylesheet for Internet Explorer 9, then add custom padding to that stylesheet.
    In the header.php file, I would then use HTML's conditional statements to call it in
    http://www.quirksmode.org/css/condcom.html

  3. thebeautyedge
    Member
    Posted 2 years ago #

    Hi Andrew

    I removed the padding and that solved it. Thanks!
    Do you know how I can get the categories to spread out evenly on the navigation bar so that I don't have an empty gap at the end?

  4. Andrew
    Forum Moderator
    Posted 2 years ago #

    Apply a width to each <li> element using the selector, #topMenu ul.sf-menu li.

    You can only get so-far, if you use a width greater than 82 pixels, your menu expands onto two lines.
    To circumvent this, I would then remove the appearance of the last list element to have no right border.

    Can you add a class to the last element?
    All you need to do then is add background-image: none on that last element.

  5. thebeautyedge
    Member
    Posted 2 years ago #

    Thanks for the help, a bit advanced for me, but I'm sure I'll figure it out.

Topic Closed

This topic has been closed to new replies.

About this Topic