Forums

Give help. Get help.

  • # 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">


    Students Eat Free Special Coupon

    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

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag