SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Unordered list empty space problem

    I'm creating a simple navigation with unordered list. The HTML code is pretty much straightforward:

    Code HTML4Strict:
    <nav id="mainav">
    	<ul>
    		<li><a href="#">Main item 1</a></li>
    		<li><a href="#">Main item 2</a></li>
    		<li><a href="#">Main item 3</a></li>
    		<li><a href="#">Main item 4</a></li>
    		<li><a href="#">Main item 5</a></li>
    	</ul>
    </nav>

    And the CSS:

    Code CSS:
    #mainav ul {
    	display: inline-block;
    	border-left: 1px solid #000;
    	border-right: 1px solid #666;
    }
     
    #mainav ul li {
    	display: inline-block;
    	*display: inline; /* IE7 inline-block hack */
    	*zoom: 1;
    	padding: 15px 0px;
    }
     
    #mainav ul li a {
    	padding: 15px;
    	color: #ccc;
    	border-left: 1px solid #666;
    	border-right: 1px solid #000;
    }
     
    #mainav ul li a:hover {
    	background: #292929;
    	color: #fff;
    }

    But when I have the HTML stacked one list item below another I run into a problem where I have some 2-3 pixels empty space, so I solved it by having the HTML into one line, like this:

    Code HTML4Strict:
    <nav id="mainav">
    	<ul>
    		<li><a href="#">Main item 1</a></li><li><a href="#">Main item 2</a></li><li><a href="#">Main item 3</a></li><li><a href="#">Main item 4</a></li><li><a href="#">Main item 5</a></li>
    	</ul>
    </nav>

    I still wonder why does it happen. As far as I know there are no left/right margins nor padding applied to the list elements.

    You can see it both version visually here. The first one is the good one, while the second one is the one I don't like it.


    On the other hand, in the CSS I'm using "display: inline-block;" rather than floating the elements, and I apply the hacks for IE. I wonder is it needed to apply those * hacks to the <ul> elements, or just for the <li> elements? Or should I just use the good old floating?
    Author at GraphicRiver

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you use inline-block then the element behaves like text and and gaps between adjacent blocks are treated like the space between works in a sentence. You wouldn't want all your words buncheduplikethiswould you

    There is a solution in an old css quiz we did and you can find it here.

  3. #3
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It still does not work, but I'm sure I'm missing something. Maybe because I'm using the <nav> html5 elements and apply the #mainav to that? Here is my CSS code:

    Code CSS:
    #mainav ul {
    	display: table;
    	width:100%;
    	border-left: 1px solid #000;
    	border-right: 1px solid #666;
    }
     
    #mainav ul li {
    	display: inline-block;
    	*display: inline; /* IE7 inline-block hack */
    	*zoom: 1;
    	word-spacing: 0;
    	padding: 15px 0px;
    }
     
    #mainav ul li a {
    	padding: 15px;
    	color: #ccc;
    	border-left: 1px solid #666;
    	border-right: 1px solid #000;
    }
     
    #mainav ul li a:hover {
    	background: #292929;
    	color: #fff;
    }
    Author at GraphicRiver

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Here you go

    Code:
    [
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #mainav ul {
    	display: table;
    	width:100%;
    	border-left: 1px solid #000;
    	border-right: 1px solid #666;
     word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #mainav ul li {
    	display: inline-block;
    	*display: inline; /* IE7 inline-block hack */
    	*zoom: 1;
     word-spacing:0; /* reset from parent */
    	padding: 15px 0px;
    }
    #mainav ul li a {
    	padding: 15px;
    	color: #ccc;
    	border-left: 1px solid #666;
    	border-right: 1px solid #000;
    }
     
    #mainav ul li a:hover {
    	background: #292929;
    	color: #fff;
    }
    
    </style>
    </head>
    
    <body>
    <nav id="mainav">
    		<ul>
    				<li><a href="#">Main item 1</a></li>
    				<li><a href="#">Main item 2</a></li>
    				<li><a href="#">Main item 3</a></li>
    				<li><a href="#">Main item 4</a></li>
    				<li><a href="#">Main item 5</a></li>
    		</ul>
    </nav>
    </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

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