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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    display inline problem?

    Hey I consider myself a pretty decent CSS programmer. But what the hell is going on with this? Er i feel like I've done this before in the past but it's not working now.

    http://www.edleedesign.com/test/webFiles

    I have my nav inside a list that I have setup to display inline. However I 3px of space inbetween my images. I've heard of the 3px IE float bug but I've never heard of anything about a display inline bug.

    anyone have any ideas?

    thanks all
    eddie

    ps i could have coded this another way but it's bugging me why this isn't working.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    display: inline; does that. It's the equivalent of a text space. Instead of inline, use block and float left. So replace:
    Code:
    #nav li{
    	list-style:none;
    	display:inline;
    	margin: 0; 
    	padding: 0;
    }
    with:
    Code:
    #nav li{
    	list-style:none;
    	display:block;
    	float:left;
    	margin: 0; 
    	padding: 0;
    }
    Edit: Sorry VIPStephan
    Last edited by Majoracle; 01-04-2008 at 12:57 AM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    I have to add to Majoracle’s post that actually the vertical gaps are caused by the list items being written each on their own line in the source code (along with being set to display: inline;. If you write them all in one line without space in between then the gaps will disappear:

    Code:
    <ul id="nav">
    		<li><img src="images/btn_navBlank.gif"></li><li><img src="images/btn_solutions.gif"></li><li><img src="images/btn_products.gif"></li>…
    	</ul>
    You can also write it like this:
    Code:
    <ul id="nav">
    		<li><img src="images/btn_navBlank.gif"></li><li>
    <img src="images/btn_solutions.gif"></li><li>
    <img src="images/btn_products.gif"></li><li>
    <img src="images/btn_resources.gif"></li>
    	</ul>
    Id est the closing tag and opening tag of adjacent list items must be next to each other in order to remove the gap. However, this won’t remove the space below the image as described in the article to which I provided the link in my post above.

    Additionally a float makes an inline element display as block anyway so setting display: block; is redundant.

  • Users who have thanked VIPStephan for this post:

    edoky145 (01-05-2008)

  • #5
    Regular Coder
    Join Date
    Nov 2006
    Posts
    247
    Thanks
    13
    Thanked 26 Times in 24 Posts
    Oh right, that occurs with line breaks in general, not just in lists.

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks much guys. So part of the problem was the stupid white space in your html leaves a space onscreen html problem thing. I can't understand why they never fixed that bug. It's been around since the beginning of the internet.


  •  

    Posting Permissions

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