Hey all,
I am converting a table based layout in HTML 4.01 loose to an html 4.01 strict page.
I have stripped all appearance related code from the page and replaced it with CSS. I am having problems with one thing, however.
For the sake of this particular project, I am leaving the main layout table in place. There are only 3 cells, one across the top which needs to be 750px x 100px in size, then two below it. One 150px wide, the other 650px.
I am basically done everything, except I can't seem to get the height of the top cell to remain 100px. It looks fine in Safari (Mac browser), but not in Opera, IE, NN, or Mozilla (on the mac). The width stays at 750px, but the height collapses down to whatever the height of the cell content is.
I have assigned an id to each of the cells, and then am using CSS to format each cell approriately.
Any help would be appreciated. I don't want to leave the html height attributes in for the cells, as this will prevent the page from validating. I know I should just strip the table and replace each cell with a div, but baby steps!
Thanks all,
Cheers!If you show us the whole page it might give us a better idea of what you want/a better way to do it.Sure Dave,
I am not on the machine with code right now, but I can explain the same thing well enough...I hope!
Here is an example of a pure html table:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" width="750" height="100" align="center" valign="middle">
<!-- CELL CONTENT HERE -->
</td>
</tr>
<tr>
<td width="150" align="left" valign="top">
<!-- CELL CONTENT HERE -->
</td>
<td width="600" align="left" valign="top">
<!-- CELL CONTENT HERE -->
</td>
</tr>
</table>
So, what I want to do is strip out the presentation attributes from the table code, to be complient with HTML Strict, and replace it with CSS. In an Eric Meyer book I read once I remember he did this by stripping out the attributes, then assigning an id to each cell.
So, the table would read:
<table id="mainTable">
<tr>
<td colspan="2" id="topRow">
<!-- CELL CONTENT HERE -->
</td>
</tr>
<tr>
<td id="leftCell">
<!-- CELL CONTENT HERE -->
</td>
<td id="rightCell">
<!-- CELL CONTENT HERE -->
</td>
</tr>
</table>
...then use CSS to style the table back to its initial appearance.
So, essentially, what I am looking for is to replace the <table> and the <td> styling attributes with the appropriate CSS ones.
I have acheived this, except for the height attribute in the top cell. In most browsers I view the page in the height of the top cell collapses down to the height of the cells content.
I hope that makes it more clear.
Thanks!Ok as I remember there is a problem with height of td elements.
If you want them all, say 100px tall, as a possible fix, how about putting an empty div in at the top of each cell, setting it's height:100px;
e.g.
<div style="height:100px; width:1px; float:left;"> </div>
that would then force them all (I think) to be 100px.Thanks for the reply Dave...
It is wierd..I haven't tried it, but I am sure what you suggested will work fine. Doesn't it remind you of the days when we used 1px spacer gifs to keep table cells from collapsing in NN4.x?
LOL - you could try that as well 
The only other thing I can think of is using display:block to make sure it's a block level element.
Taking the jump to divs would probably work too.
I am converting a table based layout in HTML 4.01 loose to an html 4.01 strict page.
I have stripped all appearance related code from the page and replaced it with CSS. I am having problems with one thing, however.
For the sake of this particular project, I am leaving the main layout table in place. There are only 3 cells, one across the top which needs to be 750px x 100px in size, then two below it. One 150px wide, the other 650px.
I am basically done everything, except I can't seem to get the height of the top cell to remain 100px. It looks fine in Safari (Mac browser), but not in Opera, IE, NN, or Mozilla (on the mac). The width stays at 750px, but the height collapses down to whatever the height of the cell content is.
I have assigned an id to each of the cells, and then am using CSS to format each cell approriately.
Any help would be appreciated. I don't want to leave the html height attributes in for the cells, as this will prevent the page from validating. I know I should just strip the table and replace each cell with a div, but baby steps!
Thanks all,
Cheers!If you show us the whole page it might give us a better idea of what you want/a better way to do it.Sure Dave,
I am not on the machine with code right now, but I can explain the same thing well enough...I hope!
Here is an example of a pure html table:
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" width="750" height="100" align="center" valign="middle">
<!-- CELL CONTENT HERE -->
</td>
</tr>
<tr>
<td width="150" align="left" valign="top">
<!-- CELL CONTENT HERE -->
</td>
<td width="600" align="left" valign="top">
<!-- CELL CONTENT HERE -->
</td>
</tr>
</table>
So, what I want to do is strip out the presentation attributes from the table code, to be complient with HTML Strict, and replace it with CSS. In an Eric Meyer book I read once I remember he did this by stripping out the attributes, then assigning an id to each cell.
So, the table would read:
<table id="mainTable">
<tr>
<td colspan="2" id="topRow">
<!-- CELL CONTENT HERE -->
</td>
</tr>
<tr>
<td id="leftCell">
<!-- CELL CONTENT HERE -->
</td>
<td id="rightCell">
<!-- CELL CONTENT HERE -->
</td>
</tr>
</table>
...then use CSS to style the table back to its initial appearance.
So, essentially, what I am looking for is to replace the <table> and the <td> styling attributes with the appropriate CSS ones.
I have acheived this, except for the height attribute in the top cell. In most browsers I view the page in the height of the top cell collapses down to the height of the cells content.
I hope that makes it more clear.
Thanks!Ok as I remember there is a problem with height of td elements.
If you want them all, say 100px tall, as a possible fix, how about putting an empty div in at the top of each cell, setting it's height:100px;
e.g.
<div style="height:100px; width:1px; float:left;"> </div>
that would then force them all (I think) to be 100px.Thanks for the reply Dave...
It is wierd..I haven't tried it, but I am sure what you suggested will work fine. Doesn't it remind you of the days when we used 1px spacer gifs to keep table cells from collapsing in NN4.x?
LOL - you could try that as well The only other thing I can think of is using display:block to make sure it's a block level element. Taking the jump to divs would probably work too.