Table Cell Height is not proper Across Browser

Forum Moderators: not2easy

Message Too Old, No Replies

Table Cell Height is not proper Across Browser

sivarm4u

7:25 am on Sep 21, 2011 (gmt 0)

Hi, I have written one CSS snipet. Which is performing properly in IE and Chrome, but in Mozilla the cell height is increased by two pixel.

The CSS is below mentioned:
TD.dataBold
{
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
PADDING-left: 5px;
COLOR: #000000;
HEIGHT: 25px;
BACKGROUND-COLOR: #FFFFFF;
}

The Class .dataBold is getting applied to a TD.
The appearance is proper in IE and Chrome, but in Firefox the height is 2px extra.

And I have ten rows so, the whole table height is increased by 20 pixel on the whole. Kindly help.

Paul_o_b

8:13 am on Sep 21, 2011 (gmt 0)

You'll need to show more of the code because I get a table at exactly 250px high in all browsers with the following code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table {
width:500px;
border-collapse:collapse;
}
td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
padding:0 0 0 5px;
color: #000;
height: 25px;
background-color: #fcf;
}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
</tr>
<tr>
<td>Row 10</td>
</tr>
</table>
</body>
</html>

sivarm4u

8:54 am on Sep 21, 2011 (gmt 0)

Thanks for Responding. I am giving the clear picture over here.
The below mentioned is the application:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
TD.dataBold
{
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: bold;
PADDING-left: 5px;
COLOR: #000000;
HEIGHT: 25px;
BACKGROUND-COLOR: #FFFFFF;
}

TD.dataCell
{
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
PADDING: 3px 3px 3px 5px;
COLOR: #000000;
HEIGHT: 20px;
BACKGROUND-COLOR: #FFFFFF;
}
.borderBlack
{
BORDER: solid 1px #d7d7d7;
}
.borderNL
{
BORDER-LEFT: solid 0px #d7d7d7;
}

.borderNT
{
BORDER-TOP: solid 0px #d7d7d7;
}

.borderNB
{
BORDER-BOTTOM: solid 0px #d7d7d7;
}

.borderNR
{
BORDER-RIGHT: solid 0px #d7d7d7;
}

</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" class="dataBold borderBlack ">Property Address:</td>
<td width="30%" class="dataCell borderBlack borderNL ">8408 JONFRED CT CINCINNATI, OH 45231</td>
<td width="20%" class="dataBold borderBlack borderNL">Investor Name: </td>
<td width="30%" class="dataCell borderBlack borderNL ">GNMA II 845483AR</td>
</tr>
<tr>
<td class="dataBold borderBlack borderNT">Borrower:</td>
<td class="dataCell borderBlack borderNL borderNT">TINA M GREEN </td>
<td class="dataBold borderBlack borderNT borderNL">Reference Number: </td>
<td class="dataCell borderBlack borderNL borderNT BorderNL">NOR010979A</td>
</tr>
<tr>
<td class="dataBold borderBlack borderNT">Co-Borrower</td>
<td class="dataCell borderBlack borderNL borderNT"> </td>
<td class="dataBold borderBlack borderNT borderNL">Investor Loan Numner:</td>
<td class="dataCell borderBlack borderNL borderNT BorderNL"> </td>
</tr>
<tr>
<td class="dataBold borderBlack borderNT">Due Date: </td>
<td class="dataCell borderBlack borderNL borderNT">01/08/2011</td>
<td class="dataBold borderBlack borderNT borderNL">Servicer Close Date: </td>
<td class="dataCell borderBlack borderNL borderNT BorderNL"> </td>
</tr>
<tr>
<td class="dataBold borderBlack borderNT">Days Delinquent: </td>
<td class="dataCell borderBlack borderNL borderNT"> </td>
<td class="dataBold borderBlack borderNT borderNL">Lein Position(Original):</td>
<td class="dataCell borderBlack borderNL borderNT BorderNL">First Mortgage</td>
</tr>
</table>
</body>
</html>

In this approach, Fireforx whole table height is not similar with Chrome and IE.

I am not sure the implementation is working perfectly in Firefox and problem with Chrome and IE or vice versa.

Please Help.

lucy24

9:10 am on Sep 21, 2011 (gmt 0)

Slightly OT but:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" class="dataBold borderBlack ">Property Address:</td>
<td width="30%" class="dataCell borderBlack borderNL ">8408 JONFRED CT CINCINNATI, OH 45231</td>

Based on the table you show here, you can add the cell width (20% or 30%) to the CSS for the respective classes. And if you give the table a class name you can then say

table.borderBlack td {border: solid 1px #d7d7d7;}

and cut out a lot of clutter.

When you say {border-width: 0px;} do you mean "none" or "hidden"? They mean different things, and may be affecting your cell size:

[w3.org...]

sivarm4u

9:25 am on Sep 21, 2011 (gmt 0)

Hi Lucy, Thanks for your Response.
As per my last code snippet, I can not give like this..
table.borderBlack td {}

Because in a grid like structure, the internal cell borders (which I need) becoming thick.

For that reason, in every cell we mentioned borderNT, borderNL, borderNR and borderNB.

{border-width: 0px;} means "none".

penders

10:30 am on Sep 21, 2011 (gmt 0)

Also slightly OT, but anyway...

TD.dataBold

Since you have an XHTML DOCTYPE (although serving as text/html) and you are consequently using lowercase tags in your markup, you should also be using lowercase element selectors in your CSS.

Paul_o_b

10:52 am on Sep 21, 2011 (gmt 0)

Hi,

If you use the border-collapse model you can avoid setting the various borders on each cell and remove all those classes.

You are also setting heights on the cells which should be avoided as some browsers will use the broken box model for tables and some won't.

Just let the content and padding dictate the height and you can't set different height and padding in cells in the same row anyway.

I would code your table like this which is pixel perfect in IE9, FF6, Chrome and safari.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.main {
border-collapse:collapse;
font-size:10px;
line-height:1.3;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000;
background-color: #fFF;
width:100%;
}
table.main td, table.main th {
border:1px solid #d7d7d7;
padding: 5px 3px 5px 5px;
}
table.main th { font-weight: bold; }
.t1 { width:20% }
.t2 { width:30% }
.t3 { width:20% }
.t4 { width:30% }
</style>
</head>

<body>
<table class="main" cellpadding="0" cellspacing="0">
<tr>
<th scope="row" class="t1">Property Address:</th>
<td class="t2">8408 JONFRED CT CINCINNATI, OH 45231</td>
<th scope="row" class="t3">Investor Name: </th>
<td class="t4">GNMA II 845483AR</td>
</tr>
<tr>
<th scope="row">Borrower:</th>
<td>TINA M GREEN </td>
<th scope="row">Reference Number: </th>
<td>NOR010979A</td>
</tr>
<tr>
<th scope="row">Co-Borrower</th>
<td>&nbsp;</td>
<th scope="row">Investor Loan Numner:</th>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">Due Date: </th>
<td>01/08/2011</td>
<th scope="row">Servicer Close Date: </th>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">Days Delinquent: </th>
<td>&nbsp;</td>
<th scope="row">Lein Position(Original):</th>
<td>First Mortgage</td>
</tr>
</table>
</body>
</html>

You may need the Axis attribute [w3.org ] to specify the relationship between header and data but that won't effect the size of the table shown above.

sivarm4u

11:47 am on Sep 21, 2011 (gmt 0)

Thanks Paul. It was working as expected.