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.
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?
ps i could have coded this another way but it's bugging me why this isn't working.
display: inline; does that. It's the equivalent of a text space. Instead of inline, use block and float left. So replace:
Edit: Sorry VIPStephan
01-04-2008, 01: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:
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.
01-04-2008, 02:02 AM
Oh right, that occurs with line breaks in general, not just in lists.
01-04-2008, 06: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.