Menu
My page works as expected and validates but ignores one section of CSS. This is the piece ignored:
[code=html]pagetop{
position:absolute;
left: 100px;
top:100px;
background-color:#fff;
color: #000;
font-size: 30pt;
font-family: verdana, sans-serif;
}
<div id=”pagetop”>This is the text at the top</div>
And this is the whole page:
[code=php]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<title>Merry Christmas and a Happy New Year</title>
<script type=”text/javascript”>
function progress(){
intWidth = parseInt(document.getElementById(“cardCover”).style.width);
if(intWidth == 0){
document.getElementById(“cardCover”).style.display = ‘none’;
page2();
return false;
}
document.getElementById(“cardCover”).style.width = (intWidth – 4) + “px”;
setTimeout(“progress()”,10);
}
function page2(){
intWidth = parseInt(document.getElementById(“page2img”).style.width);
if(intWidth < 350){
leftSpace = parseInt(document.getElementById(“page2img”).style.left);
document.getElementById(“page2img”).style.left = (leftSpace – 4) + “px”;
document.getElementById(“page2img”).style.width = (intWidth + 4) + “px”;
}else{
document.getElementById(“page2″).style.display = ”;
document.getElementById(“page2img”).style.display = ‘none’;
return false;
}
setTimeout(“page2()”,10);
return false;
}
</script>
<style type=”text/css”>
html, body{
background-color:#fff;
color: #000;
font-size: 9pt;
font-family: verdana, sans-serif;
margin: 0;
padding: 0;
}
#container{
position:relative;
width: 704px;
margin: 10px 160px;
padding: 0;
}
#cardCover{
position:absolute;
top:1px;
left:352px;
}
#page3{
position:absolute;
width:352px;
height:520px;
top:0px;
left:352px;
border-top:1px solid #ddd;
border-bottom:1px solid #999;
border-right:1px solid #999;
background:#fff;
}
#page2img{
position:absolute;
}
#page2{
position:absolute;
width:352px;
height:520px;
top:0;
left:-2px;
border-top:1px solid #ddd;
border-bottom:1px solid #999;
border-left:1px solid #ccc;
border-right:1px dashed #ccc;
background:#fff;
}
#contentbox{
position:relative;
margin:20px 0 0 15px;
padding:0;
border:0;
width:320px;
height:480px;
background-image: url(img3b.jpg);
background-position: 80px 60px;
background-repeat: no-repeat;
}
#contentbox img{
border:0;
}
* html #contentbox a:hover {
display:inline;
}
#contentbox a span {
display: none;
}
#contentbox a:hover span {
display: block;
position: absolute;
width: 320px;
height: 240px;
top:100px;
left:352px;
border: 0;
}
#img1{
position:absolute;
margin: 0 0 0 0;
}
#img2{
position:absolute;
margin: 0 0 0 160px;
}
#img3{
position:absolute;
margin: 120px 0 0 0px;
}
#img4{
position:absolute;
margin: 120px 0 0 160px;
}
#img5{
position:absolute;
margin: 240px 0 0 0;
}
#img6{
position:absolute;
margin: 240px 0 0 160px;
}
#img7{
position:absolute;
margin: 360px 0 0 0px;
}
#img8{
position:absolute;
margin: 360px 0 0 160px;
}
pagetop{
position:absolute;
left: 100px;
top:100px;
background-color:#fff;
color: #000;
font-size: 30pt;
font-family: verdana, sans-serif;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”page3″>
<div id=”pagetop”>This is the text at the top</div>
<img src=”page2.jpg” id=”page2img”
width=”0″
height=”520″
alt=””
style=”
width:0;
height:522px;
left:0;
top:-1px;”
></div>
<div id=”page2″ style=”display:none;”>
<div id=”contentbox”>
<a href=”#”><img src=”1a.jpg” alt=”” id=”img1″><span><img src=”1b.jpg” alt=””></span></a>
<a href=”#”><img src=”2a.jpg” alt=”” id=”img2″><span><img src=”2b.jpg” alt=””></span></a>
<a href=”#”><img src=”3a.jpg” alt=”” id=”img3″><span><img src=”3b.jpg” alt=””></span></a>
<a href=”#”><img src=”4a.jpg” alt=”” id=”img4″><span><img src=”4b.jpg” alt=””></span></a>
<a href=”#”><img src=”5a.jpg” alt=”” id=”img5″><span><img src=”5b.jpg” alt=””></span></a>
<a href=”#”><img src=”6a.jpg” alt=”” id=”img6″><span><img src=”6b.jpg” alt=””></span></a>
<a href=”#”><img src=”7a.jpg” alt=”” id=”img7″><span><img src=”7b.jpg” alt=””></span></a>
<a href=”#”><img src=”8a.jpg” alt=”” id=”img8″><span><img src=”8b.jpg” alt=””></span></a>
</div>
</div>
<img id=”cardCover” src=”card.jpg”
width=”352″
height=”520″
alt=”loading…”
style=”
width:352px;
height:520px
border-bottom:1px solid #444;
border-right:1px solid #777;”
onmouseover=”progress();”
>
</div>
</body>
</html>