Works in Opera but not in IE

J

Jeff

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;
}
 
B

Beauregard T. Shagnasty

Jeff said:
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.
 
M

Mike Massonnet

Beauregard said:
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 ...
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top