Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE6 horizontal list problem

    Hi, my navigation bar is a horizontal unordered list and works just fine in Firefox and Safari it fits flush against the left inside of its div. However, in IE6 there is an extra white space before the list.
    Code:
    ul.nav, li.nav {
    	display: inline;
    	list-style: none;
    	padding: 0px;
    }
    I can't figure out what bug this might be, any ideas?

    Thanks

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    That little snippet doesn't tell people much. I'm assuming you have anchor tags in the list and these or the list items are floated to the left. I'm also assuming you have some sort of padding on these floated items.

    This is giving you the doubled-margin bug. You can solve it by adding display:inline to the anchors (or whatever is floated to the left).

    Read about it here: double-margin bug

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the reply, here is the full stylesheet:
    Code:
    #innerframe	{
    	width: 800px;
    	height: 700px;
    	margin: 0 auto;
    	text-align: left;
    }
    
    #header {
    	height: 110px;
    }
    
    #navbar {
    	color: white;
    	background-color: black;
    	font-family: "Helvetica", "Arial", sans-serif;
    	text-decoration: none;
    	font-style: italic;
    	text-transform: uppercase;
    	font-size: 12px;
    	height: 12px;
    	padding-bottom: 0px;
    }
    
    #main {
    	margin-top: 12px;
    	background-color: white;
    	height: 500px;
    	width: 800px;
    }
    
    a.nav, a.nav:visited {
    	color: white;
    	font-family: "Helvetica", "Arial", sans-serif;
    	text-decoration: none;
    	font-style: italic;
    	text-transform: uppercase;
    	font-size: 12px;
    }
    
    a.nav:hover {
    	color: black;
    	font-family: "Helvetica", "Arial", sans-serif;
    	text-decoration: none;
    	font-style: italic;
    	text-transform: uppercase;
    	font-size: 12px;
    }
    
    ul.nav, li.nav {
    	display: inline;
    	list-style: none;
    	padding: 0px;
    } 
    
    li.nav:after, li.first:before {
    	content: " / ";
    }
    I don't think it is te double margin bug, because I can see any margins or left floating elements that would affect it. Where would I need to put {diplay: inline}?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks for the reply, here is the full stylesheet:
    Still insufficient to reproduce the issue at our end :-(

    Please post your entire code(HTML+CSS) of that document, or a link to your page would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for trying to help me out, the site is http://tom-marshall.com/kill/

    This is a comparison pic:
    Last edited by tomrshl; 08-26-2009 at 01:22 PM.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by adding
    Code:
    *{
    margin:0;
    padding:0;
    }
    into your CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tomrshl (08-26-2009)

  • #7
    New Coder
    Join Date
    Aug 2009
    Posts
    31
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That little snippet worked great, thanks a lot.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •