SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spaces in between images in li tags

    I am using LI tags for my navigation bar, each which have an image in them. For some reason, extra white space shows up after the image if I put the li tags on seperate lines, but if I remove the extra lines and make the li tags but up against each other, the space disappears.

    Is there anyway to make it so I can make my code neat and have the li tags on seperate lines and keep the white space from showing up after each image? I've tried using white-space: nowrap; tags in the li tag but it didn't help.
    John Saunders

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it is a feature of how the browser parses the html. Basically the html spec says that any amount of white space should be reduced to a single space. Since white space is spaces, tabs and new lines, a new line will be reduce to a single space.

    In some ways it would be nice if the spec said any amount of white space should be rendered as a space except when the white space consists of a single new line but generally exceptions make things harder so it doesn't.

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I guess the only way to format my code for the list would be:

    Code:
    <ul>
    <li></li><li></li><li></li><li></li>
    </ul>
    instead of:
    Code:
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    Bummer.......I hate it when my code isn't formatted so it's easy to read.
    John Saunders

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JohnSaunders
    So I guess the only way to format my code for the list would be:

    Code:
    <ul>
    <li></li><li></li><li></li><li></li>
    </ul>
    instead of:
    Code:
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    Bummer.......I hate it when my code isn't formatted so it's easy to read.
    Yeah, unfortunately browsers don't interpret whitespace the way they should .

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Yeah, unfortunately browsers don't interpret whitespace the way they should .
    They do interpret it according to spec don't they? Don't you mean browsers don't interpret whitespace the way we'd like

  6. #6
    SitePoint Enthusiast mrvnsk9's Avatar
    Join Date
    Sep 2003
    Location
    Tulsa, OK USA
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try using list-style and use your own specified image for the bullet. That should get rid of the white space.

  7. #7
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •