PDA

View Full Version : Table Trouble in Certain Browsers


michelle_redman
05-23-2012, 07:43 AM
I am having trouble with the following table. It is working fine in my browsers firefox and safari, but when my client opens the table in IE, the alignment of the th and td is off. Do you have any suggestions on how to fix this? The picture below is an example of what is occurring in IE.

Thanks!!

http://i41.photobucket.com/albums/e270/redrocket2005/Screenshot2012-05-23at163312.png


<table width="697" align="left" id="hor-minimalist-b" summary="Employee Pay Sheet">
<thead>
<tr>
<th width="172" scope="col">Group</th>
<th width="91" scope="col">Number</th>
<th width="150" scope="col">Title (Japanese)</th>
<th width="152" scope="col">Title (English)</th>
<th width="99" scope="col">Artist</th>
<th width="118" scope="col">Dimensions</th>
<th width="86" scope="col">Price</th>

</tr>
</thead>
<tbody>
<tr>
<td>Flowers &amp; Landscapes</td>
<td>557</td>
<td>七草</td>
<td>The Seven Flowers</td>
<td>Essen</td>
<td>3' x 6'</td>
<td><strong>US$2,030</strong></td>

</tr>


}
#hor-minimalist-b
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
background: #fff;
margin: 0px;
border-collapse: collapse;
text-align: left;
width: 900px;
}
#hor-minimalist-b th
{
font-size: 14px;
font-weight: normal;
color: #333;
padding: 10px 8px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #7E6400;
}
#hor-minimalist-b td
{
border-bottom: 1px solid #ccc;
color: #7E6400;
padding: 6px 8px;
}

gentleone
05-23-2012, 12:29 PM
You have a total table width set of 697px. If I calculate the total widths of the th's I come at 868px. And you have also a left and right padding of 8px on the th which is in total 112px. 868 + 112 = 980px. So change 697px to 980px and lets see what IE does with that.

It's also recommended to set widths and heights of the table elements in the CSS, but that's maybe for another time.

domedia
05-23-2012, 01:03 PM
I usually don't define any width|height on any of my tables, initially at least.

gentleone
05-23-2012, 01:38 PM
I usually don't define any width|height on any of my tables, initially at least.
That's indeed better cause if you throw in some padding then you don't have to adjust the widths accordingly, but in those cases that I use widths then it's in percentages.

d a v e
05-23-2012, 08:54 PM
table height isn't valid anyway ;)

michelle_redman
05-24-2012, 04:22 AM
I was playing around with this before anyone had replied, and I added text align left to the css and it fixed the problem. Thanks for all your help though, and I'm definitely going to use all your advice when I'm making the next table!