Jump to content

'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

Link to comment
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>


#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,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...