SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing issues in list

    I am putting together a list with a background image for the bullet and another image after the text denoting file type. The list looks fine in Firefox, Safari and IE7 but the spacing is out in IE6.

    A test page with the list and some of the surrounding divs has been uploaded here

    Anyone tell me what I need to do to fix it so it works in IE6?

    Cheers in advance.
    Barry

    Snap Designs
    Creating good impressions online and in print

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To center the bg-bullet and set space to the text, you can try something like this. E.g:
    Code CSS:
    }
    ul#public li {
    	background: url(../graphics/bullet_public.jpg) no-repeat 0 50%; /* vertical middle */
    	padding-left: 25px;  /* set the bullet-text spacing */
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric. The 50% sorted out the problem of the bullet image being hidden.

    The line spacing between the list elements is still very small in IE6. Is there a way around this?
    Barry

    Snap Designs
    Creating good impressions online and in print

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems that IE6 doesn't take the li line-height. As li is block, try padding and height instead.
    Code CSS:
    ul#hope li, ul#public li, ul#without li, ul#extras li {
    	color: #666666;
    /*	line-height: 22px;*/
    	padding: 4px 0 4px 22px;
    	margin: 0 0 10px 0;
    	height: 14px;
    }
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eric thanks for the help, that works great.
    Barry

    Snap Designs
    Creating good impressions online and in print


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
  •