Forum Moderators: open

Message Too Old, No Replies

valign="top" not working in IE for one table cell

         

joet7287

5:39 pm on Nov 16, 2009 (gmt 0)

10+ Year Member



I have one table cell that seems to be aligning in the middle even though I've added valign="top" to that specific <td> tag. All other instances of this work fine and it works fine in Firefox. Any ideas why IE would reject the valign="top" for that one cell?

[edit] turned on table borders and found that my content is at the top of my cell, but that the cells weren't appropriately sized. I have a cell on the left with a rowspan of 2 and 2 columns on the right. the top row on the right is supposed to be only 25px in height, but IE produces it much larger.

lavazza

6:23 pm on Nov 16, 2009 (gmt 0)

10+ Year Member



valign is deprecated
Instead, try vertical-align = "top"

Note: I don't use in-line styles (applied to specific elements), so that syntax might be wrong

In an external file (which keeps the CSS separate from your HTML), the syntax is as follows

CSS file
.myClassName{
vertical-align: top;
}

HTML
<td class="myClassName">Lorem Ipsum</td>

Demaestro

6:27 pm on Nov 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



for inline it would be

<td style="vertical-align:top;">

joet7287

6:30 pm on Nov 16, 2009 (gmt 0)

10+ Year Member



While a appreciate the offering of advice, I subsequently found that valign and its CSS counterpart adequately perform their duties, and aren't actually the problem. As I said in my edit of the first post, I "turned on table borders and found that my content is at the top of my cell, but that the cells weren't appropriately sized. I have a cell on the left with a rowspan of 2 and 2 columns on the right. the top row on the right is supposed to be only 25px in height, but IE produces it much larger."

The problem is now established as IE incorrectly sizing my table cells.

Demaestro

6:34 pm on Nov 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



rowspan can cause these issues.

Is it possible to redesign without rowspan?

joet7287

6:37 pm on Nov 16, 2009 (gmt 0)

10+ Year Member



It may be possible. Is there a workaround for rowspan's error causing ways?

Demaestro

6:41 pm on Nov 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The only time I ever used row span I gave up in frustration, there may be workarounds but I don't know any.

Perhaps start a new thread indicating you are having issues with row span. There may be someone here with good info.

Sorry I can't be more help.

My advise would be to redesign if possible.

joet7287

6:49 pm on Nov 16, 2009 (gmt 0)

10+ Year Member



I'll try redesigning using a float rather than a table with a rowspan, I guess. Thanks.

rocknbil

6:55 pm on Nov 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard joet7287,

It may be possible. Is there a workaround for rowspan's error causing ways?

I see you've already done it, but first stop with misbehaving tables,

1. Put a border on that puppy, and make SURE none of the cells are empty. Instead of

<td></td>

do

<td>&nbsp;</td>

IE abbhors empty cells. If it's a narrow row, set the font size to 2px, IE won't react to 1px.

2. validate, validate, validate [validator.w3.org]. This will catch things you missed - including the fact that valign is deprecated. But if those are the only warnings you get, it will certainly rout out any cascading errors.

I use HomeSite, which has it's own internal validator, and it catches things the W3C validator doesn't (or, maybe, it does, I just catch them before validating against W3C.) Things like missing closing </td> and </tr> tags.

3. A little trick I never use because I'm so retentive about this stuff,

<td colspan="0">

At first my reaction was "what the heck?" I learned here that colspan="0" will span whatever columns you have. It may be the same with rowspan (worth a shot.)