SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question White Space Betwwen My List Items?

    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
    -=SunnaH=-

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Raffles View Post
    I don't see the problem, the board looks OK to me and there is no space between the list items.
    Same here I don't see the problem!! (Google chrome / FF).

    Quote Originally Posted by Raffles View Post
    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.
    Yes I prefer the second option

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    #board01 li{float:left;clear:left;}

  5. #5
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    -=SunnaH=-

  6. #6
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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
    -=SunnaH=-

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It got rid of the whitespace because IE sometimes creates whitespace and floating kills the whitespace .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

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