Trouble positioning report type of page

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,858 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,593 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1680 | Replies: 4

•

Join Date: May 2005

Posts: 3

Reputation: m6rk is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

m6rk

Offline

Newbie Poster

Trouble positioning report type of page

May 5th, 2005

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;
}