/    Sign up×
Community /Pin to ProfileBookmark

CSS replacement for td height attribute

Copy linkTweet thisAlerts:
Oct 18.2003

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!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWOct 18.2003 — If you show us the whole page it might give us a better idea of what you want/a better way to do it.
Copy linkTweet thisAlerts:
@James_L_authorOct 18.2003 — 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!
Copy linkTweet thisAlerts:
@DaveSWOct 20.2003 — 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.
Copy linkTweet thisAlerts:
@James_L_authorOct 23.2003 — 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?

?
Copy linkTweet thisAlerts:
@DaveSWOct 23.2003 — 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.
×

Success!

Help @James_L_ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...