...

View Full Version : display inline problem?



edoky145
01-03-2008, 11:41 PM
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.

VIPStephan
01-03-2008, 11:50 PM
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps



#nav img {float: left;}

Majoracle
01-03-2008, 11:54 PM
display: inline; does that. It's the equivalent of a text space. Instead of inline, use block and float left. So replace:

#nav li{
list-style:none;
display:inline;
margin: 0;
padding: 0;
}
with:

#nav li{
list-style:none;
display:block;
float:left;
margin: 0;
padding: 0;
}

Edit: Sorry VIPStephan

VIPStephan
01-04-2008, 12:24 AM
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:



<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:


<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.

Majoracle
01-04-2008, 01:02 AM
Oh right, that occurs with line breaks in general, not just in lists.

edoky145
01-04-2008, 05:14 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum