T
tshad
I have been trying to track this problem for awhile and have finally found
the cause.
I have a table in a table. I want to set all my text to
vertical-align:baseline. This would leave the text towards the top of the
cell and line adjacent cells according to the baseline of the text. Top
doesn't work as adjacent cells don't necessarilly align correctly.
The problem is that IE 6, want's to move the whole table up. What happens
is that the top of the table is hacked off and you get the last couple of
lines of text.
This doesn't happen with vertical-align:top or vertical-align:bottom. It
only moves the text.
If the problem were that it was trying to move the table inside of the <td>
tag, it should do the same for vertical-align:top. But it doesn't.
Mozilla has no problem at all with this.
However, Mozilla won't print the border-color, whereas IE will.
What is happening here?
I have 3 files:
http://www.payrollworkshop.com/development/defaulttest1.htm
vertical-align:top
http://www.payrollworkshop.com/development/defaulttest1.htm
vertical-align:bottom
http://www.payrollworkshop.com/development/defaulttest1.htm
vertical-align:baseline
The code:
*************************************************************************
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home Page</title>
<style type="text/css">
body {
margin:0;
}
td {
font-size: 10;
text-decoration: none;
vertical-align:bottom;
empty-cells: show;
}
</style>
</head>
<body>
<table width="100%" style="height:100%; border-color:#00FF99" border="1"
cellspacing="0" cellpadding="0">
<tr height="63">
<td>test 1</td>
</tr>
<tr style="height:20px; ">
<td >test 2</td>
</tr>
<tr>
<td>
<table width="100%" style="height:100%; border-color:#CC3333;"
border="5" cellspacing="0" cellpadding="0">
<tr>
<td>
<p align="center" class="thankYouMessage">Welcome to our Employment
Website</p>
<p align="center">Whats New</p>
<p align="center">Calendar of Events</p>
<p align="center">Summary</p>
<p align="center">Search</p>
<p align="center">Create/Modify Profile </p>
<p align="center"> </p>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height:20px">
<td>test 3</td>
</tr>
<tr style="height:20px">
<td >test 4</td>
</tr>
</table>
</body>
</html>
***************************************************************************
Thanks,
Tom
the cause.
I have a table in a table. I want to set all my text to
vertical-align:baseline. This would leave the text towards the top of the
cell and line adjacent cells according to the baseline of the text. Top
doesn't work as adjacent cells don't necessarilly align correctly.
The problem is that IE 6, want's to move the whole table up. What happens
is that the top of the table is hacked off and you get the last couple of
lines of text.
This doesn't happen with vertical-align:top or vertical-align:bottom. It
only moves the text.
If the problem were that it was trying to move the table inside of the <td>
tag, it should do the same for vertical-align:top. But it doesn't.
Mozilla has no problem at all with this.
However, Mozilla won't print the border-color, whereas IE will.
What is happening here?
I have 3 files:
http://www.payrollworkshop.com/development/defaulttest1.htm
vertical-align:top
http://www.payrollworkshop.com/development/defaulttest1.htm
vertical-align:bottom
http://www.payrollworkshop.com/development/defaulttest1.htm
vertical-align:baseline
The code:
*************************************************************************
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home Page</title>
<style type="text/css">
body {
margin:0;
}
td {
font-size: 10;
text-decoration: none;
vertical-align:bottom;
empty-cells: show;
}
</style>
</head>
<body>
<table width="100%" style="height:100%; border-color:#00FF99" border="1"
cellspacing="0" cellpadding="0">
<tr height="63">
<td>test 1</td>
</tr>
<tr style="height:20px; ">
<td >test 2</td>
</tr>
<tr>
<td>
<table width="100%" style="height:100%; border-color:#CC3333;"
border="5" cellspacing="0" cellpadding="0">
<tr>
<td>
<p align="center" class="thankYouMessage">Welcome to our Employment
Website</p>
<p align="center">Whats New</p>
<p align="center">Calendar of Events</p>
<p align="center">Summary</p>
<p align="center">Search</p>
<p align="center">Create/Modify Profile </p>
<p align="center"> </p>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height:20px">
<td>test 3</td>
</tr>
<tr style="height:20px">
<td >test 4</td>
</tr>
</table>
</body>
</html>
***************************************************************************
Thanks,
Tom