Works in Opera but not in IE

Discussion in 'HTML' started by Jeff, Jan 28, 2006.

  1. Jeff

    Jeff Guest

    Hey

    This code below works in Opera (version 8.51) but not in IE (version 6.0).
    The error in IE is that this image isn't displayed:

    #sidebar .sticker:after {
    content:url(images/spacer.png);
    display:block;
    }

    By the way this xhtml code is successfully validated by
    http://validator.w3.org/

    If you see what I'm doing wrong here, then I would be thankful if you could
    tell me what I'm doing wrong here

    ((see my code below))

    Best Regards

    Jeff


    **********************************
    Here is a copy of my index.php file
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>title</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="main">
    <div id="header">
    <h1>hkjhasdkf</h1>
    <h3>kjdfgkj</h3>
    </div>

    <div id="content">
    <p>content</p>
    <p>content2</p>
    </div>

    <div id="sidebar">
    <div class="sticker">
    <div class="title">about this site</div>
    <div class="ingress">jalla</div>
    </div>
    <div class="sticker">
    <div class="title">RSS</div>
    </div>

    <div class="sticker">
    <div class="title">Search</div>
    </div>

    </div>


    </div>



    </body>
    </html>
    *************************
    Here is a copy of styles.css file:
    /* CSS Document */
    #main {
    width:760px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    height:700px;
    }

    #header {
    color:#00FF99;
    background-color:#ded6c6;
    height:100px;
    }

    #sidebar{
    width:180px;
    right:0px;
    position:absolute;
    background-color:#CC3300;
    }

    #sidebar .sticker {
    background-color:#00CC99;
    }

    #sidebar .sticker:after {
    content:url(images/spacer.png);
    display:block;
    }

    #sidebar .sticker .title {
    background-color:#b5a58c;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-transform:capitalize;

    }

    #sidebar .sticker .ingress {
    background-color:#eeeeee;
    }

    #content{
    width:580px;
    top:auto;
    left:0px;
    position:absolute;
    background-color:#9999FF;
    }

    h1 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    text-align:right;
    }

    h3 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    text-align:right;
    padding-right:10px;
    }
    Jeff, Jan 28, 2006
    #1
    1. Advertising

  2. Jeff wrote:

    > Hey
    >
    > This code below works in Opera (version 8.51) but not in IE (version 6.0).
    > The error in IE is that this image isn't displayed:
    >
    > #sidebar .sticker:after {
    > content:url(images/spacer.png);
    > display:block;
    > }


    IE doesn't recognize :before and :after. It's not an error, it's just a
    badly designed operating system component.

    Oh, always better if you link to a page at your web server rather than
    posting code. You might want to look into fluid layout as well, and use
    percentages for font sizes so folks with visual disabilities can resize
    your text.

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Jan 28, 2006
    #2
    1. Advertising

  3. Beauregard T. Shagnasty wrote:

    > Jeff wrote:
    >
    >> Hey
    >>
    >> This code below works in Opera (version 8.51) but not in IE (version
    >> 6.0). The error in IE is that this image isn't displayed:
    >>
    >> #sidebar .sticker:after {
    >> content:url(images/spacer.png);
    >> display:block;
    >> }

    >
    > IE doesn't recognize :before and :after. It's not an error, it's just a
    > badly designed operating system component.
    >


    yes and also for min(|max)-width and min-(|max)height ...

    --
    Besides, including <std_ice_cubes.h> is a fatal error on machines that
    don't have it yet. Bad language design, there... :)
    -- Larry Wall in <>
    Mike Massonnet, Jan 30, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Dalberg
    Replies:
    29
    Views:
    4,115
    kchayka
    Nov 3, 2004
  2. Jeff
    Replies:
    3
    Views:
    1,128
  3. patrickkellogg
    Replies:
    3
    Views:
    158
  4. Bob
    Replies:
    3
    Views:
    108
  5. Fox
    Replies:
    5
    Views:
    107
Loading...

Share This Page