grahamfoster Posted November 22, 2008 Share Posted November 22, 2008 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 More sharing options...
newseed Posted November 27, 2008 Share Posted November 27, 2008 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. Link to comment Share on other sites More sharing options...
rzea Posted December 1, 2008 Share Posted December 1, 2008 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, Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.