SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member Wally Hartshorn's Avatar
    Join Date
    Feb 2001
    Location
    Springfield, IL
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question list-style-image is cut off in Firefox

    I'm having problems with list-style-image in Firefox. This works fine in IE6, but in Firefox the bottom of the image is cut off. I've found a few references to others having this problem, but haven't been able to find any solution to it.

    Here is the CSS:
    Code:
    ul.menu li, ul.menu li a {
    	list-style-image: url(/images/bullets/round.gif);
    	list-style-type: disc;
    }
    
    ul.menu li:hover, ul.menu li a:hover {
    	list-style-image: url(/images/bullets/arrow.gif);
    	list-style-type: disc;
    }
    And here is the HTML:
    Code:
    <ul class="menu">
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
    
        <li><a href="#">Third Item</a></li>
        <li>Submenu 
            <ul>
                <li><a href="#">Item the First</a></li>
                <li><a href="#">Item the Second</a></li>
                <li><a href="#">Item the Third</a></li>
            </ul>
    
        </li>
    </ul>
    I've attached an image that shows what it looks like.

    Is this a bug, or am I doing something wrong? If it's a bug, is there a workaround?
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Apr 2004
    Location
    Osnabrück, Germany
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but there are no images attached.

  3. #3
    SitePoint Member Wally Hartshorn's Avatar
    Join Date
    Feb 2001
    Location
    Springfield, IL
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Gumbo
    Sorry, but there are no images attached.
    Yeah, I was noticing that. When I edit the original message, it shows the attachment as being there. Odd.

  4. #4
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All attachments have to be approved by board moderators.

  5. #5
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I think this is a line-height problem, as the diff browsers have diff default line heights, I would play around with that. If using an image, I often put whitespace in the image (at the bottom of about 2 or 3 pixels) to lift it up a bit anyway.





    Trevor

  6. #6
    SitePoint Member Wally Hartshorn's Avatar
    Join Date
    Feb 2001
    Location
    Springfield, IL
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    I think this is a line-height problem, as the diff browsers have diff default line heights, I would play around with that. If using an image, I often put whitespace in the image (at the bottom of about 2 or 3 pixels) to lift it up a bit anyway.
    Good suggestion, but it doesn't seem to solve the problem. I tried line-height: 200% and it had no effect on how much of the image was shown.

    As for adding whitespace at the bottom of the image, I suppose I could do that, but then I suspect that would cause problems when displayed in IE (where it currently displays fine). In other words, making the image taller might cause the list within IE to look too spread out. I'll experiment with that approach if I can find no other solution, though.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've found the most consistent solution is to use a background image in the list instead of a list image.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul {list-style-type:none;margin:0;padding:0;}
    li {padding-left:18px;background: url(images/bullett.gif) no-repeat 0px 4px;color:red;}
    </style>
    </head>
    <body>
    <ul>
    <li>Hello Hello</li>
    <li>Hello Hello</li>
    <li>Hello Hello</li>
    </ul>
    </body>
    </html>
    You have more control over the image and the space around the image this way.

    Paul


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
  •