Jump to content
Stef's Coding Community
catfish

padding mistake IE 8??

Recommended Posts

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

Share this post


Link to post
Share on other sites

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 by virtual

Share this post


Link to post
Share on other sites

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 by Wickham

Share this post


Link to post
Share on other sites

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;*/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...