Grow your CSS skills. Land your dream job.

list-style-image not working in IE

  • # August 16, 2008 at 11:25 pm

    Website:
    http://www.studentseatfree.com/coupon.php?1

    So on this coupon, the background is set using list-style-image in the css. I used list-style-image instead of background:url() because these coupons need to print, and the browser doesn’t include background images when printed.

    This method works fine in Firefox or Safari but in IE, the background does not show up at all.

    Is there a particular way I need to do my code so that IE acknowledges the list-style-image?

    Thanks.

    HTML:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    Boysenberry Hullabaloo

    $5 off any order $25 or more
    Valid only at:
    Boysenberry Hullabaloo – 123 Meow Yes Way, Charlotte, NC 28210




    CSS:

    Code:
    * { margin: 0; padding: 0; }

    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    color:#446a31;
    background:#ffffff;
    }

    .couponback
    {
    position: absolute;
    top:20px;
    left:20px;
    display: list-item;
    list-style-image: url(images/coupon.jpg);
    list-style-position: inside;
    width:400px;
    height:250px;
    min-height:250px;
    }

    .coupon
    {
    position: absolute;
    top:20px;
    left:20px;
    width:400px;
    height:250px;
    min-height:250px;
    padding:10px;
    border-width:2px;
    border-style:dashed;
    border-color:#000000;
    }

    img.logo
    {
    width:75px;
    height:100px;
    min-height:100px;
    float:left;
    display:inline;
    }

    .restname
    {
    position:relative;
    left:-180px;
    width:135px;
    float:right;
    display:inline;
    font-size:25px;
    font-weight:bold;
    }

    .discdescription
    {
    font-size:25px;
    font-weight:bold;
    }

    .restlocation
    {
    position:relative;
    top:20px;
    font-size:15px;
    font-weight:bold;
    }

    .couponsubmit
    {
    position: absolute;
    top:320px;
    left:160px;
    }

    # August 17, 2008 at 7:39 am

    couldnt you just make the whole thing an image? it would save all this effort, and would work in every browser

    # August 17, 2008 at 12:33 pm

    This is an interesting problem. You need to use a background image, and you need it to print. Going for list-style-image is kind of a neat choice. I think the problem you are having is that you aren’t really using a list, you are using a DIV and trying to set it’s display value to list-item. I was kind of surprised to see that work but it clearly does in Firefox at least. I don’t think IE supports display: list-item though. You may want to literally try using an unordered list and a list item instead, you should be able to force that to size and get it done.

    I think if I was in the situation though, I would go for using an inline image and absolute positioning. Set the image just where you want it with absolute positioning, then make another DIV with the text, a higher z-index value, and set it right on top with absolute positioning. Inline images obviously don’t have any trouble printing, so should be easily cross browser compatible.

    # August 17, 2008 at 4:05 pm
    "chriscoyier" wrote:
    I think if I was in the situation though, I would go for using an inline image and absolute positioning. Set the image just where you want it with absolute positioning, then make another DIV with the text, a higher z-index value, and set it right on top with absolute positioning. Inline images obviously don’t have any trouble printing, so should be easily cross browser compatible.

    Wow. That fixed it. I guess I was thinking way too hard. Thanks!

    Now if someone could help me out with this problem I’ll be done with the site!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".