Forum Moderators: open
I've tried this and still no luck. I tried it in linked style sheets and even an inline style like this:
<td style="vertical-align: top">content</td>
It is showing up in Firefox and tons of people use Firefox, a standards compliant browser.
I also tried putting a <div> around the content with alternately an inline style and a class via linked style sheet (both using the "vertical-align: top" definition). Neither worked. In the linked sheet case, I defined it: ".valign-top { vertical-align: top }" and used <div class="valign-top">content</div>.
I don't know what else to try. Any ideas?
Thanks.
<td style="vertical-align: top">content</td>
That *should* work fine. If you use standard HTML:
<td valign="top">content</td>
What happens? Should be the same result for both. You aren`t setting a global td rule in your stylesheet are you? Is that affecting it?
dc
Since my global rule does not include a vertical-align, there shouldn't be a conflict, right?
Thanks.
a standards compliant browser.
Although this may be academic, I don't see the doctype or validation mentioned anywhere, is it actually rendering in Standards mode? (Right-click BG of page, select View Page Info.)
If it's in quirks mode it may fail, or if there are validation errors.
".valign-top { vertical-align: top }" and used <div class="valign-top">content</div>
Then above will not work, vertical align only applies to inline elements or to a table-cell, therefore you would need to apply the class .valign-top to the table cell itself and not an inner div (which is a block level element)
another thing, the default for a table cell is to align in the vertical middle so the fact that your is not suggests an override somewhere, is there a reset anywhere in you styles? or a vertical-align rule anywhere else in yours stylesheet?
1) It is in Quirks mode. I use Firefox on a Mac, and only occasionally for checking compatibility. I'm not seeing yet how to change it to Standards render mode. Also, would many people have Firefox in Quirks mode and not know it?
2) The doctype is: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3) I'll do a validation and get back to you.
SuzyUK -
1) This is the only vertical-align rule in my stylesheet.
2) Yes, it seems to be aligning at the bottom of the cell instead of the middle. although it's hard to tell for sure due to the other cells around it, as they all have white backgrounds. What do you mean by a "reset" in my styles? I am using the non-compliant valign="top" in this and other cells in the table.
3) I removed the div around the content, and the valign="top" and all other attributes from the problem cell. Then I added this class in my stylesheet to the <td>: .valign-topleft { text-align: left; vertical-align: top }. So, it's <td class="valign-topleft">. Still no luck.
Thanks to both of you for the help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
All on one line. Choosing a doctype for your site [webmasterworld.com].
Validate documents here. [validator.w3.org]
I have some margin errors, some list errors and some shorttag errors. Are there certain errors to keep an eye out for with this vertical align problem? Or must I fix every validation error to get to the bottom of this?
Wrap the content of each <td> tag in another tag - say, a <p> tag:
<table id="someName">
<tr>
<td><p>Content</p></td>
<td><p>More Content</p></td>
</tr>
</table>
Then define both the <td> and the <p> elements of that <table> to have relative positioning.
table#someName td { position:relative;vertical-align:top; }
table#someName td p { position:relative;top:0px; }
While IE ignores the vertical-align attribute, it respects the position attribute and moves the <p> block to the top of the table cell.
It seems Firefox renders rowspans differently than Safari. If anyone knows why or how Firefox does it, I'd be interested to know.
After implementing figaronymous' IE trick in my site page, I still had what looked like a vertical align problem.
So I started with a clean basic table in a naked html file and got some content to align to the top of cells. I slowly added parts of my broken page. The vertical align on the new test page still worked with the doctype, stylesheet, and some list elements that didn't validate, all from my original page.
I wondered where the table cells were ending and beginning on my original page, where they all had white backgrounds. I colored the background of the problem cell, and discovered that in Safari, the edge of the cell above my problem cell ended right below the content. In Firefox, it ended far below, leaving a bunch of white space before my problem cell started. In other words, the content was aligning at the top, but the top wasn't where I had thought it was.
After changing how the rowspans worked in this multi-cell table, I finally got everything fixed. I had a couple cells with nothing in them, so I could move things and change some spanning.
So if anything, my contribution to this problem is, after changing your CSS for better vertical align, check and/or change the rowspans in your table if they allow some flexibility.
Thanks again for everyone's help!
Also, regarding the figaronymous' IE trick: I wrapped the content in a <div> tag instead of <p>. It works in Firefox. I haven't checked it yet in IE, since I don't have a copy (I'm on a Mac). If anyone sees a problem with that, please let me know.
After the rowspan fixes, I noticed that Firefox DOES HONOR the valign attribute in this:
<td rowspan="2" align="left" valign="top">
Rereading this thread, I see dreamcatcher mentioned that in a table cell, both CSS and standard HTML should align the content to the top.
And <td align="left" valign="top"> is working in ALL my table cells in Firefox.
So:
1) Why is valign="top" in a <td> working in Firefox (on version 2.0.0.14 for Mac)?
2) Should I still change all my table cells to CSS vertical alignment?
3) Is IE still an issue?
4) Is it more that valign="top" in a <td> is deprecated, but still widely honored (and for how much longer)?
Thanks.
[w3.org...]
Of course, it's anyone's guess regarding when HTML 5 will actually find its way into the major browsers.
