SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast revelstoke's Avatar
    Join Date
    Sep 2004
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone please explain this to me?

    The following code prints all 4 images used in a horizontal navigation, except it prints abouta 5px spacer between each image. The images then no longer fit in the alloted space.

    <UL style="list-style-type: none; margin: 0px; padding: 0px; white-space : nowrap;">
    <LI style="display: inline;"><IMG src="/images/navOff_security.gif"/></LI>
    <LI style="display: inline;"><IMG src="/images/navOff_safety.gif"/></LI>
    <LI style="display: inline;"><IMG src="/images/navOff_genEd.gif"/></LI>
    <LI style="display: inline;"><IMG src="/images/navOff_getStarted.gif"/></LI>
    </UL>

    The follow code prints all 4 images properly, without the 5px spacer in between them,

    <UL style="list-style-type: none; margin: 0px; padding: 0px; white-space : nowrap;"><LI style="display: inline;"><IMG src="/images/navOff_security.gif"/></LI><LI style="display: inline;"><IMG src="/images/navOff_safety.gif"/></LI><LI style="display: inline;"><IMG src="/images/navOff_genEd.gif"/></LI><LI style="display: inline;"><IMG src="/images/navOff_getStarted.gif"/></LI></UL>

    Im using Macromedia homesite, the same software ive used for ages. Why is a carriage break in the code view producing a 5px spacer. But when I remove the carriage break (done for display and readability purposes for the developers) does it work just fine. Is homesite adding some kind of invisible tag? I dont get this at all.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you use display:inline, the list items generate inline boxes. Therefore the spaces between the tags (between </LI> and the following <LI>) are not ignored; they are compressed into a single space.

    It's like if you write something like this:
    HTML Code:
    <p>This is a <em>few</em> <strong>emphasised</strong> words.</p>
    You would expect a space between few and strong, right? The same thing is happening to your list items, since you've changed the rendering to inline boxes.
    Birnam wood is come to Dunsinane


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
  •