All browsers on WinXP
IE6 - Opera8.5 - Firefox1.0.7
All maximized
Great consistency between browsers !
Though Opera is giving either a padding or a margin on top & bottom.
Failed validation (Markup) (3 simple missing img alt attributes)
http://validator.w3.org/check?uri=http% ... edog.tv%2F
You're not giving me many chances to use my red pen here.
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #333333;
}
- body {
- margin-left: 0px;
- margin-top: 0px;
- margin-right: 0px;
- margin-bottom: 0px;
- background-color: #333333;
- }
Is there a reason you're not using ?,
body {
margin: 0px;
background-color: #333;
}
- body {
- margin: 0px;
- background-color: #333;
- }
I think the Javascript based rollovers could be emulated with somthing like this so they work with no JS.
(this is also about 3/4 of the filesize of the JS)
/* Set common structure */
a#m1, a#m2, a#m3, a#m4 {
display: block;
height: 22px;
width: 111px;
}
/* Set initial states */
a#m1{background-image: url(header_rollover_r1_c1.jpg);}
a#m2{background-image: url(header_rollover_r2_c1.jpg);}
a#m3{background-image: url(header_rollover_r3_c1.jpg);}
a#m4{background-image: url(header_rollover_r4_c1.jpg);}
/* Rollover states */
a#m1:hover{background-image: url(header_rollover_r4_c2.jpg);}
a#m2:hover{background-image: url(header_rollover_r4_c2.jpg);}
a#m3:hover{background-image: url(header_rollover_r4_c2.jpg);}
a#m4:hover{background-image: url(header_rollover_r4_c2.jpg);}
/* Spans stop Opera from blanking out on initial rollover */
#a1{background-image: url(header_rollover_r4_c2.jpg);}
#a2{background-image: url(header_rollover_r4_c2.jpg);}
#a3{background-image: url(header_rollover_r4_c2.jpg);}
#a4{background-image: url(header_rollover_r4_c2.jpg);}
<p>
<a href="one.html" id="m1"><span id="a1"></span></a>
<a href="two.html" id="m2"><span id="a2"></span></a>
<a href="three.html" id="m3"><span id="a3"></span></a>
<a href="four.html" id="m4"><span id="a4"></span></a>
</p>
- /* Set common structure */
- a#m1, a#m2, a#m3, a#m4 {
- display: block;
- height: 22px;
- width: 111px;
- }
- /* Set initial states */
- a#m1{background-image: url(header_rollover_r1_c1.jpg);}
- a#m2{background-image: url(header_rollover_r2_c1.jpg);}
- a#m3{background-image: url(header_rollover_r3_c1.jpg);}
- a#m4{background-image: url(header_rollover_r4_c1.jpg);}
- /* Rollover states */
- a#m1:hover{background-image: url(header_rollover_r4_c2.jpg);}
- a#m2:hover{background-image: url(header_rollover_r4_c2.jpg);}
- a#m3:hover{background-image: url(header_rollover_r4_c2.jpg);}
- a#m4:hover{background-image: url(header_rollover_r4_c2.jpg);}
- /* Spans stop Opera from blanking out on initial rollover */
- #a1{background-image: url(header_rollover_r4_c2.jpg);}
- #a2{background-image: url(header_rollover_r4_c2.jpg);}
- #a3{background-image: url(header_rollover_r4_c2.jpg);}
- #a4{background-image: url(header_rollover_r4_c2.jpg);}
- <p>
- <a href="one.html" id="m1"><span id="a1"></span></a>
- <a href="two.html" id="m2"><span id="a2"></span></a>
- <a href="three.html" id="m3"><span id="a3"></span></a>
- <a href="four.html" id="m4"><span id="a4"></span></a>
- </p>
Overall great work.

Strong with this one, the sudo is.