Forum Moderators: not2easy
The header to my page consists of three rows, all styled by CSS.
The top line "superheader" doesn't display at all in IE5; the white text in "midheader" is black in IE 5; the red background to "subheader" is white (not red) in IE 5.
[Relevant code below]
I must be missing something pretty basic here guys - help!
[Both CSS and XHTML validate OK]
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<% Option Explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
. . . . .
<div id="header">
<div class="superHeader">
<div class="left">
</div>
<div class="right">
Some text here . . .
</div>
</div>
<div class="midHeader">
<h1 class="headerTitle">Title of Site</h1>
</div>
<div class="subHeader">
<a href="index.asp">Home</a> more links here
</div>
</div>
. . . . . rest of page
CSS:
.superHeader {
color: white;
background-color: rgb(175,0,0);
height: 2em;
}
.superHeader a {
color: rgb(0,91,46);
background-color: transparent;
text-decoration: none;
font-size: 91%;
margin: 0;
padding: 0 0.5ex 0 0.25ex;
}
.superHeader a:hover {
text-decoration: underline;
}
.superHeader .left {
position: absolute;
left: 1.5mm;
top: 0.75ex;
}
.superHeader .right {
position: absolute;
right: 1.5mm;
top: 0.75ex;
}
.midHeader {
color: white;
background-color: rgb(0,91,46);
}
.headerTitle {
font-size: 337%;
font-weight: normal;
margin: 0 0 0 4mm;
padding: 0.25ex 0;
}
.subHeader {
color: white;
background-color: rgb(175,0,0);
margin: 0;
padding: 1ex 1ex 1ex 1.5mm;
}
.subHeader a {
color: white;
background-color: transparent;
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0 0.75ex 0 0.5ex;
}
.subHeader a:hover {
text-decoration: underline;
}
.superHeader .highlight, .subHeader .highlight {
color: rgb(253,160,91);
background-color: transparent;
}