White Space Betwwen My List Items?

HTML & CSS
1

How do I get rid of this? I am looking for a cross borwser solution which does no make my unordered list items separated.

http://courses.stc.org/testing.htm

2

I don’t see the problem, the board looks OK to me and there is no space between the list items.

The major problem I can see is the white space that appears when the images are hovered over.

You need to preload the images with the red circle. Either that, or simply overlay the red circle over the writing, that way you only need 4 images instead of 6 and the CSS is simpler.

3

Same here I don’t see the problem!! (Google chrome / FF).

Yes I prefer the second option :slight_smile:

4

Hi,

To clear the whitespace in list items which I can see in ie6 and ie7 you need to float the list items as it is the only sure way to combat this.

In the IE conditional add this:


#board01 li{float:left;clear:left;}
5

Thanks Paul and the rest. I took your suggestion and floated the list item. I do not understand how that accomplished “preloading” or getting rid of the whitespace on hover. Each circle is a different size to give a bit of uniqueness to the hover. I understand if Iused the same image as a PNG I will lessen the images.

BTW: Does display: none; hide from screen readers too therefore it is better to push the text out of the screen?

6

Okay this would make you all happy. One single image, fast loading, no whitespace, cross browser, clean xhtml, strict validation !

http://courses.stc.org/testing.htm

7

It got rid of the whitespace because IE sometimes creates whitespace and floating kills the whitespace :).