I would like to layout a page to present report type of data. The general form of the report is report title: title, subtitle, report date; report page header: student,DOB, ID, School; report data: test and score in a table. The presentation requirements could be met using a table to layout. But for accessability requirements I must do so using CSS. The problem is i really don't what i am doing (yet). My first attempt results in a reasonable page when viewed with IE6, but mess when viewed with Firefox1.3.
Any expert advice would be appreciated.
Here is html, followed by CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div id="title">Main Title</div>
<div id="subtitle">Sub Title</div>
<div id="testdate">Date:<p>4/15/2005</p></div>
</div>
<div id="reportheader">
<div id="student">Student:<p>Tom J Nutts</p></div>
<div id="dob">DOB:<p>Jan 2004</p></div>
<div id="school">School:<p>Kennedy</p></div>
<div id="sasid">SASID:<p>343433</p></div>
<div id="reportdata">
<table>
<caption>test results</caption>
<colgroup id="subtestitems">
<col>
<col>
</colgroup>
<colgroup id="subtestscore">
<col></colgroup>
<thead>
<tr><th>Subtest</th><th>Item</th><th>Score</th></tr>
</thead>
<tbody>
<tr>
<td>English</td><td>Tense</td><td>99</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
div
{
margin: 0;
padding:0;
}
#header
{
position: absolute;
left: 0px;
top: 0px;
height: 4em;
width: 100%;
overflow: visible;
border: solid 2px green;
padding-top: .5em;
}
#title
{
position: relative;
display:inline;
border: dashed 1px red;
width: 100%;
text-align: center;
}
#subtitle
{
position: relative;
display:inline;
border: dashed 1px red;
width: 100%;
text-align: center;
padding-top: .2em;
}
#testdate
{
width:100%;
position:relative;
top: -1.4em;
border: dashed 1px blue;
text-align:right;
padding-top: .2em;
}
p
{
display: inline;
}
#reportheader
{
position: absolute;
left: 0;
top: 5em;
width: 100%;
height: auto;
overflow: visible;
border: solid 1px red;
}
#student
{
width: 50%;
display: inline;
}
#dob
{
display: inline;
}
#school
{
width: 50%;
display: inline;
}
#sasid
{
display: inline;
}
#reportdata
{
width: 100%;
}
#reportdata th
{
font-style:normal;
}
#reportdata caption
{
padding-top: 1em;
}
#subtestscore
{
font-style:italic;
}
