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