padding mistake IE 8??

[catfish]

I thought I had my site almost done and then ran into an issue I believe when I checked it in newly installed IE 8. My navigation is supposed to be snug under the header div and now there is a space. I had played with the h1 tag the same day and now I don't know what to do. Please have a look and give some advice. It looks ok in IE 7, FF etc. Thanks

 

http://www.catfishwebcreations.com/DrSmith/staff-members.html

[virtual]

Read this articles

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

 

Not only do we have to contend with IE6 and it's particular can of worms, IE7 was an improvement, but didn't quite get there, and now we have IE8 that does something totally different. Great job Microsoft, were you leaders of the industry a while ago....??

Edited July 10, 2009 by virtual

[Wickham]

As a last resort, make all viewers view the page as IE7 by putting this code just after the

tag (not lower down the head tag where it may not work):-

 

 

Close with /> instead of > if using a XHTML doctype.

 

Edit: I didn't realise that the link Virtual gave is to the meta link I gave above.

 

I've managed to get rid of the gap in IE8 by editing only one style in the navigation_grey_burgundy.css menu file:-

 

#nav {position:relative; z-index:100; margin:0;/*0 0 10px 0;*/ border-top:0px

solid #000;}

 

where it had a margin-bottom of 10px before. I'm not entirely sure why deleting a bottom margin should affect the space at the top, but it does. I assume that the overall height became too much for the space, so IE8 made more height and placed it at the bottom of the space! #nav-strip in the other css file is only 26px high which isn't enough for the menu and a 10px bottom margin.

Edited July 11, 2009 by Wickham

[catfish]

Thankyou for your replies, I just checked, will make the adjustment and see if that's it. Can you tell me what the slashes and stars (?) are for like this margin:0;/*0 0 10px 0;*/

[PicnicTutorials]

They're css comments for clarity.

[Wickham]

As Eric says, the /* and */ are css comments; the code inside the /* and */ is ignored by browsers. I usually leave the original code when I edit code so that the person who asked the question can see what I've edited.

 

Use as comments in HTML markup but /* and */ in CSS styles.

 

I tested my edit in IE8.

[BeeDev]

Your div#nav-strip is overlapping div.column on that "Call (250) 748-0301" bit of text.

 

I'm guessing your menu is being pushed down by the Margin of

Call (250) 748-0301