Log in

View Full Version : Height of the header keep changing


fung
03-14-2007, 09:26 AM
Hi,

I am trying to fix the height and width of the header using css but to no avail.

Here is my code:


<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Availability Report</title>
<style type="text/css">
.HeaderTd {
height: 30px;
width: 200px;
background-color: yellow;
}
.BodyTd {
height: 30px;
width: 200px;
overflow: auto;
background-color: lightgreen;
}
</style>
</head>
<body>
<table style="text-align: left; width: 1024px; height: 768px;" border="0" cellpadding="2" cellspacing="2" bgcolor="silver">
<tbody>
<tr>
<td style="height: 55px;"></td>
</tr>
<div id="scrolltb" style="overflow: auto; width:1024px; height:620px">
<table style="text-align: left; width: 1019px; height: 569px;" border="1" cellpadding="10" cellspacing="2">
<thead>
<tr>
<td class="HeaderTd" style="width: 70px; text-align: center;">Range</td>
<td class="HeaderTd" style="height: 50px; text-align: center;">Tester ID</td>
<td class="HeaderTd" style="width: 10px; text-align: center;">Non-Schedule</td>
<td class="HeaderTd" style="text-align: center;">Unscheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Scheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Non-billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Retest</td>
<td class="HeaderTd" style="text-align: center;">QA</td>
<td class="HeaderTd" style="text-align: center;">No WIP</td>
<td class="HeaderTd" style="text-align: center;">Idle</td>
<td class="HeaderTd" style="text-align: center;">First Pass</td>
</tr>
</thead>
<tbody>
<tr><td class="BodyTd">AAAAAAAAAAAAAAAAA</td>
<td class="BodyTd">BBBBBBBBBBBBBBBBBBBBB</td>
<td class="BodyTd">CCCCCCCCCCCCCCCCCCCC</td>
<td class="BodyTd">DDDDDDDDDDDDDDDDDDDDDD</td>
<td class="BodyTd">EEEEEEEEEEEEEEEEEEEEEEEEE</td>
<td class="BodyTd">FFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>
<td class="BodyTd">GGGGGGGGGGGGGGGGGGGGG</td>
<td class="BodyTd">HHHHHHHHHHHHHHHHHHHHHHHHH</td>
<td class="BodyTd">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</td>
<td class="BodyTd">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</td>
<td class="BodyTd">KKKKKKKKKKKKKKKKKKKKKK</td>
<td class="BodyTd">LKKKKKKKKKKKKKKKKKKKK</td></tr>
<% end %>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Can anyone enlighten me ?

Thanks.
Twey
03-14-2007, 09:57 AM
Don't use tables for layout Validate (http://validator.w3.org/) your page (HTML 4.01 Strict) Don't use pixels for layout
codeexploiter
03-14-2007, 10:06 AM
You have closed some tags that you didn't open in your source code. I've corrected that and they are in red color



<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Availability Report</title>
<style type="text/css">
.HeaderTd {
height: 30px;
width: 200px;
background-color: yellow;
}
.BodyTd {
height: 30px;
width: 200px;
overflow: auto;
background-color: lightgreen;
}
</style>
</head>
<body>
<table style="text-align: left; width: 1024px; height: 768px;" border="0" cellpadding="2" cellspacing="2" bgcolor="silver">
<tbody>
<tr>
<td style="height: 55px;"></td>
</tr>
<tr>
<td>
<div id="scrolltb" style="overflow: auto; width:1024px; height:620px">
<table style="text-align: left; width: 1019px; height: 569px;" border="1" cellpadding="10" cellspacing="2">
<thead>
<tr>
<td class="HeaderTd" style="width: 70px; text-align: center;">Range</td>
<td class="HeaderTd" style="height: 50px; text-align: center;">Tester ID</td>
<td class="HeaderTd" style="width: 10px; text-align: center;">Non-Schedule</td>
<td class="HeaderTd" style="text-align: center;">Unscheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Scheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Non-billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Retest</td>
<td class="HeaderTd" style="text-align: center;">QA</td>
<td class="HeaderTd" style="text-align: center;">No WIP</td>
<td class="HeaderTd" style="text-align: center;">Idle</td>
<td class="HeaderTd" style="text-align: center;">First Pass</td>
</tr>
</thead>
<tbody>
<tr><td class="BodyTd">AAAAAAAAAAAAAAAAA</td>
<td class="BodyTd">BBBBBBBBBBBBBBBBBBBBB</td>
<td class="BodyTd">CCCCCCCCCCCCCCCCCCCC</td>
<td class="BodyTd">DDDDDDDDDDDDDDDDDDDDDD</td>
<td class="BodyTd">EEEEEEEEEEEEEEEEEEEEEEEEE</td>
<td class="BodyTd">FFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>
<td class="BodyTd">GGGGGGGGGGGGGGGGGGGGG</td>
<td class="BodyTd">HHHHHHHHHHHHHHHHHHHHHHHHH</td>
<td class="BodyTd">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</td>
<td class="BodyTd">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</td>
<td class="BodyTd">KKKKKKKKKKKKKKKKKKKKKK</td>
<td class="BodyTd">LKKKKKKKKKKKKKKKKKKKK</td></tr>
<&#37; end %>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>


You can apply the "topmargin" attribute if you want on the <body> tag.
fung
03-14-2007, 03:13 PM
Hi,

So how can I fix the width and height of the header in my table? Appreciate if you can provide me the code.

Thanks.