Этот код создает похожую на календарь таблицу с чередующимися вертикальными фонами в Chrome, Safari и IE, но он просто создает маленький, грязный маленький шарик в верхнем левом углу под Firefox 8.0.1 (не пробовал другие версииFF).
Я пытался вместо "внутренних" div s использовать span s, но это не имеет значения.Валидатор CSS говорит, что все в порядке.Это просто не работает в FF, и я не знаю, почему это не так.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title> Test CSS page </title>
<style type="text/css">
#Row1 {
position:absolute;
vertical-align:top;
top: 2 px;
}
#Row2 {
position:absolute;
vertical-align:top;
top: 102 px;
}
#Row3 {
position:absolute;
vertical-align:top;
top: 202 px;
}
#Row4 {
position:absolute;
vertical-align:top;
top: 302 px;
}
#Row5 {
position:absolute;
vertical-align:top;
top: 402 px;
}
#col1 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:4 px;
}
#col2 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:83 px;
background-color:#bfffbf;
}
#col3 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:162 px;
}
#col4 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:241 px;
background-color:#bfffbf;
}
#col5 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:320 px;
}
#col6 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:399 px;
background-color:#bfffbf;
}
#col7 {
text-align:right;
position:absolute;
height:100 px;
width:79 px;
left:478 px;
}
</style>
</head>
<body>
<div id="Row1">
<Div id="col1">1 </Div>
<Div id="col2">2 </Div>
<Div id="col3">3 </Div>
<Div id="col4">4 </Div>
<Div id="col5">5 </Div>
<Div id="col6">6 </Div>
<Div id="col7">7 </Div>
</div>
<div id="Row2">
<Div id="col1">8 </Div>
<Div id="col2">9 </Div>
<Div id="col3">10 </Div>
<Div id="col4">11 </Div>
<Div id="col5">12 </Div>
<Div id="col6">13 </Div>
<Div id="col7">14 </Div>
</div>
<div id="Row3">
<Div id="col1">15 </Div>
<Div id="col2">16 </Div>
<Div id="col3">17 </Div>
<Div id="col4">18 </Div>
<Div id="col5">19 </Div>
<Div id="col6">20 </Div>
<Div id="col7">21 </Div>
</div>
<div id="Row4">
<Div id="col1">22 </Div>
<Div id="col2">23 </Div>
<Div id="col3">24 </Div>
<Div id="col4">25 </Div>
<Div id="col5">26 </Div>
<Div id="col6">27 </Div>
<Div id="col7">28 </Div>
</div>
<div id="Row5">
<Div id="col1">29 </Div>
<Div id="col2">30 </Div>
<Div id="col3">31 </Div>
<Div id="col4">32 </Div>
<Div id="col5">33 </Div>
<Div id="col6">34 </Div>
<Div id="col7">35 </Div>
</div>
<br></body>
</html>