Forum Moderators: open
HTML <body>
<table class="table" cellspacing="0" cellpadding="0">
<tr>
<td class="leftmenu">
<table class="table2" cellspacing="0" cellpadding="0">
<tr>
<td class="headerbox1"><h4>box 1 header goes here</h4></td>
</tr>
</tr>
</table>
</table>
</body>
CSS
body {
font-family:Verdana,Arial,Helvetica, sans-serif;
color:#000000;
background-color:#DAE7FE;
margin:0;
padding:0;
}
table {
width: 100%;
vertical-align: top;
}
.table2 {
width: 95%;
background-color:#FFFFFF;
vertical-align: top;
}
td {
font-family: Verdana,Arial,Helvetica, sans-serif;
width:100%
font-size:11px;
font-weight:normal;
color:#000080;
vertical-align:top;
text-align:left;
}
.headerbox1 {
background-color:#0099FF;
color:#FFFFFF;
padding:5px;
}
.leftmenu {
text-align: left;
vertical-align: top;
padding:5px;
line-height: 110%;
width:20%;
}
h1, h2, h3, h4 {
font-family: Verdana,Arial,Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000080;
vertical-align: middle;
text-align: left;
}
h4 {
color: #ffffff
}
The td cell in .headerbox1 looks fine in IE, but in FF it seems to have so much padding but I don't understand why?
Here's my cleaned up version of the table tags..
<!--- START:outside table --->
<table class="table" cellspacing="0" cellpadding="0"><tr><td class="leftmenu"><!--- START:inside table --->
<table class="table2" cellspacing="0" cellpadding="0"><tr>
<td class="headerbox1"><h4>box 1 header goes here</h4></td>
</tr></table>
<!--- END:inside table ---></td></tr></table>
<!--- END:outside table --->
I think it's useful to place comment tags where your tables are starting/ending.
And then I changed your final CSS element to..
h4 {
color: #ffffff;
margin: 0;
}
And now it looks identical in Firefox, IE and Opera.
[edited by: tedster at 10:47 pm (utc) on Feb. 8, 2006]
[edit reason] disable graphic smile faces [/edit]
Your table/tr/td tags are all messed up, and out of order.
And then I changed your final CSS element to..h4 {
color: #ffffff;
margin: 0;
}
Thanks very much.
tried to recheck this and they seemed to be int he same order as your corrected code?
Your last four tags were..
</tr>
</tr>
</table>
</table>
It's impossible for that to be correct.
Additionally, you're missing a closing </td> tag.
So my last five tags were..
</tr></table>
</td></tr></table>
