WordPress.org

Forums

Navbar overlaps header in IE (12 posts)

  1. sensibilitypatterns
    Member
    Posted 6 years ago #

    I redesigned part of my website using WordPress and was very happy with the way my theme turned out -- until I checked it in IE! The theme looks fantastic in Firefox and Safari, but in IE, the navbar jumps up and overlaps the header image, even though the header and navbar are both padded.

    So I added the following bit of CSS to my stylesheet:

    #header-container {
    width: 100%;
    float: center;
    overflow: hidden;
    }

    That fixed the problem -- but only for the home/start page! If you click on any of the navbar links, the bar jumps back up over the top of the header image. On one page, it even bumps the entire theme to the left!

    My site is at http://www.sensibility.com/pattern/main

    Does anyone have any clue what I need to do to fix this for IE?

    Thanks!
    Jennie

  2. stvwlf
    Member
    Posted 6 years ago #

    Hi

    In IE7 this tweak fixes it. If you have an IE stylesheet, add it to that #nav {margin-top: -30px;}

    if not put this in header.php head after all existing CSS

    <!--[if IE]>
    <style type="text/css">
      #nav {margin-top: -30px;}
    </style>
    <![endif]-->
  3. sensibilitypatterns
    Member
    Posted 6 years ago #

    Ooh! That was fast. Thanks very much. I'm almost there now. I don't have an IE stylesheet, so I added that code to the header.php. Check out the site now, and you'll see that, on the home page, the navbar is now well below the header image (big gap), but if you click any of the links, it overlaps and leaves the right-hand edge of the header image showing. Maybe I need to define the width of the navbar?

    Any hints would be greatly appreciated!

    Warmly,
    Jennie

  4. sensibilitypatterns
    Member
    Posted 6 years ago #

    Oh, and here's the current CSS for my navbar:

    .navigation {
    margin:10px;
    margin-bottom:5px;
    text-align:center;
    float:center;
    padding:5px;
    }

    See any red flags?

    Thanks!
    Jennie

  5. stvwlf
    Member
    Posted 6 years ago #

    Hi

    I suggest you remove the bottom blue bar from your header image altogether. replace it with white space the same height. Its not necessary and is causing the protruding right end.

    try replacing the previous code with this

    <!--[if IE]>
    <style type="text/css">
      #nav {margin-top: -30px;}
      #home #nav {margin-top: -50px;}
    </style>
    <![endif]-->

    Also, there is no such thing as float:center - you can remove that from your stylesheet.

  6. sensibilitypatterns
    Member
    Posted 6 years ago #

    Ah ha! You are totally right about my header image. I had forgotten about the blue bar across the bottom and just realized the nav bar is overlapping that in Firefox and Safari as well, though it looks okay in those browsers....

    I replaced the IE header.php code as directed, and it works great. Now I'll fix the header image and upload it again.

    But (and you've been so kind I hate to monopolize your time!)... can you tell me why the navbar is "fatter" top to bottom on the Home page in IE but shrinks when I click on any of the other page links? I'm still learning CSS, and some things just really puzzle me!

    Thanks so much!
    Jennie

  7. stvwlf
    Member
    Posted 6 years ago #

    hi

    I can't see exactly why. I do see you have margin set on the LI tags with auto on top and left. I wouldn't use auto there. I notice the height of your nav box is varys on some pages (IE) (Regency, comments, epatterns), so you need to think what you have done that might cause that.

  8. sensibilitypatterns
    Member
    Posted 6 years ago #

    Okay, I uploaded the new header -- way better! Thanks for that tip.

    The "fatter" deal has disappeared (probably related to the header image itself), but I'm still puzzled by the fact that the entire page (including the navbar) is skinnier in IE than it is in all other browsers. In FF and Safari, I only have two lines of menu options, and the "Only $1" option stays on the top line. In IE, I have three lines of menu options, and the "Only $!" option gets split so that the "Only" is on the top line and "$1" is on the next. Maddening!

    Any clue what causes this width difference in IE?

    And, again, THANK YOU so much for your help. I've been hitting my head against the keyboard over the navbar bumping issue for weeks!

    Warmly,
    Jennie

  9. sensibilitypatterns
    Member
    Posted 6 years ago #

    I'll go check the auto margin tags. I modified the Ambiru theme to create my pages, so much of the CSS is original to that theme.

    Thanks!
    Jennie

  10. stvwlf
    Member
    Posted 6 years ago #

    IE uses a different method of computing element widths. Using that same block of IE code you added to the header, make your NAV div wider a bit.

    Also, the font size is larger, at least in IE7, which can cause the 3rd line. There is a font-size percentage in the body tag. Insert a smaller one for IE - it doesn't need to change a lot. Experiment.

  11. sensibilitypatterns
    Member
    Posted 6 years ago #

    Hmmm... the only "auto" I found was in the wrap container. When I changed it, the page bumped to the left instead of being centered, so I put it back.

    Where are you seeing the "auto" commands?

    Thanks!
    Jennie

  12. sensibilitypatterns
    Member
    Posted 6 years ago #

    I've got a lot to learn -- I am clueless about the font size percentage deal. I'll have to check into that! Seeing what I can do about the nav div now....

    :-)

Topic Closed

This topic has been closed to new replies.

About this Topic