Jump to content
Sign in to follow this  
grahamfoster

'margin-right' issues in IE

Recommended Posts

Hi, I'm new to all this but I have a problem with my inline nav:It appears correctly in FF, Opera & Safari but not in IE.In IE the 'margin-right: 20px;' seems like it is being ignored.The URL is:www.greyham.co.ukthe CSS for the inline nav div is: #navlist { float: left; height: 19px; padding: 0; margin-left: 0; margin-top: 2px; border-bottom: 1px solid gray; width: 100%; } #navlist ul { margin: 0; padding: 0; border-bottom: 0; line-height: 20px; white-space: nowrap; } #navlist li { list-style: none; padding: 0; margin-left: 10px; margin-right: 10px; margin-bottom: 0; margin-top: 0; display: inline; }Any help would be much appreciated, cheers,Graham

Share this post


Link to post
Share on other sites

I don't see a 'margin-right: 20px;' in your css you provided but if you mean this:#navlist li{list-style: none;padding: 0;margin-left: 10px;margin-right: 10px;margin-bottom: 0;margin-top: 0;display: inline;}...then just use padding left and right for this instant instead.

Share this post


Link to post
Share on other sites

To fix your current "margin-right:20px" issue, I will go a off-topic... keep reading.The best way to achieve the separator line in these cases is to use a border instead of the "|" character, this method will make your current "margin-right:20px" issue go away.Try this example:HTML:

<div id="navlist"><ul>  <li><a href="#">link</a></li>  <li><a href="#">link</a></li>  <li class="no-border"><a href="#">link</a></li></ul></div>

CSS:

#navlist ul { list-style-type:none; margin:0; padding:0;}#navlist ul li { float:left;  border-right:#000 1px solid; background:#ccc} /*The background color is for you to see the area of the links*/#navlist ul li a { padding:0 10px;}#navlist ul li.no-border { border-right:none;}

With this structure your links are separated evenly, you'd only have to position the <ul> element in the navigation area of your site. Easy, simple and with efficient code :)Hope this helps.Bytes,

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.

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...
Sign in to follow this  

×
×
  • Create New...