XHTML Linebreak space problem

Question

basically i have a ul list

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

now the styles for the list is:

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

Ok now, the gap between each list should be exactly 8px but when i view it in a browser... its mroe then 8px. Its because of the newline.

If i had all the li tags on one line, it would be fine but i dont really want to do that. Is there a way i can keep my html as it is and just edit the css so this space isnt there anymore?

hi Ozzy, i dont really understand the question. there are in fact 8px in between each li. — Sebastian Patane Masuelli, Nov 18 '10 at 20:37
its a browser quirk, basically the newline between the lis count as a space between the li. so its infact 8px + the width of the space that takes into account font and fontsize. but setting fontsize to 0 wont work because some browsers leave it as 1px instead of 0 — Ozzy, Nov 18 '10 at 20:52

Gregg B · Answer 1 · 2010-11-18T20:44:01.173

1

Got it

There is a space between each li tag - I removed it:

http://jsfiddle.net/j5yDd/1/

original answer::

You also have a top margin of 5px so the space will be 13, you need to remove the 5px top margin.

er. are you sure this is the exact css - as written you have a top margin of 5px and a left margin of 8. I don't see any bottom margin at all.

http://jsfiddle.net/j5yDd/

edited Nov 18 '10 at 20:44

answered Nov 18 '10 at 20:31

Gregg B

13,139
6
34
50

the only margin im worried about is the left margin lol :P because the li is inline block so its all on one line. just the spaces between the li's are more then 8px – Ozzy Nov 18 '10 at 20:36
Yes, I see now - I checked it in fiddle and there is a really weird random space there. – Gregg B Nov 18 '10 at 20:37
gracias :) I was trying to figure out how to format it properly – Gregg B Nov 18 '10 at 20:52

score 1 · Accepted Answer · answered Nov 18 '10 at 20:44

1

Well, since you set the list items to be inline-block the whitespace between these items in your markup (i.e. the indentation) is what is causing trouble here. Two list items are therefore seperated by a whitespace and the margin on the left of each list item.

Solution: Try to float the list items or get rid of the whitespace in between the list tags.

Good luck.

answered Nov 18 '10 at 20:44

aefxx

24,835
6
45
55

I added float:left to the LI styles... worked like a charm. thanks :) – Ozzy Nov 18 '10 at 20:47
1

Be aware of IE6's double float margin bug, though. See here: http://www.positioniseverything.net/explorer/doubled-margin.html. Short answer: use a padding rather than a margin when spacing in the same direction. – aefxx Nov 18 '10 at 20:51
yea the old double ur margins bug ¬_¬ display:inline to the rescue:D – Ozzy Nov 18 '10 at 20:56

XHTML Linebreak space problem

2 Answers2