Vertical align table cells in Firefox (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


kt -> Vertical align table cells in Firefox (4/23/2006 10:44:54)

I'm having problems getting table cells in Firefox to vertically align middle.

If I just have a regular table, no problem, the cells default to vertical align middle.

But as soon as I apply a style to the cell, it ignores this default and vertically aligns the text in the cell to the top (but is still in the middle in IE)

Here's an example:

<table border="0" width="509px" cellspacing="0" cellpadding="0">
<tr><td class="form">First name</td>.....


The style "form" is as follows:

td.form {  
width: 40%;
min-height: 20px;
margin: 0 0 0 0;
padding: 1px 2px 1px 0;
font-size: 11px;
text-align: right;
background-color: #cccccc;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
float: left;
}


An example is here

Any ideas of how to solve this would be greatly appreciated.

Thanks, kt




Tailslide -> RE: Vertical align table cells in Firefox (4/23/2006 11:15:05)

Have you tried adding vertical-align: middle into the rule for the form?

If that doesn't work you could try adding a line-height equivalent to the required height of the cell. I wouldn't bother with the min-height on these cells either.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625