Navbar overlaps header in IE

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]-->

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

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

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.

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

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.

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

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

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.

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

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….

??