Welcome to WebmasterWorld Guest from 54.146.49.147

Forum Moderators: not2easy

Message Too Old, No Replies

Table Cell Height is not proper Across Browser

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

New User

joined:Sept 21, 2011
posts: 10
votes: 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.
8:13 am on Sept 21, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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>

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

New User

joined:Sept 21, 2011
posts: 10
votes: 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">&nbsp;</td>
<td class="dataBold borderBlack borderNT borderNL">Investor Loan Numner:</td>
<td class="dataCell borderBlack borderNL borderNT BorderNL">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td class="dataBold borderBlack borderNT">Days Delinquent: </td>
<td class="dataCell borderBlack borderNL borderNT">&nbsp;</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.
9:10 am on Sept 21, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


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...]
9:25 am on Sept 21, 2011 (gmt 0)

New User

joined:Sept 21, 2011
posts: 10
votes: 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".
10:30 am on Sept 21, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 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.
10:52 am on Sept 21, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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.
11:47 am on Sept 21, 2011 (gmt 0)

New User

joined:Sept 21, 2011
posts: 10
votes: 0


Thanks Paul. It was working as expected.