logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-23-2012, 07:43 AM   #1
michelle_redman
 
Join Date: May 2012
Posts: 2
Default Table Trouble in Certain Browsers

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!!




<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;
}




michelle_redman is offline   Reply With Quote
Old 05-23-2012, 12:29 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-23-2012, 01:03 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

I usually don't define any width|height on any of my tables, initially at least.
domedia is offline   Reply With Quote
Old 05-23-2012, 01:38 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by domedia View Post
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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-23-2012, 08:54 PM   #5
d a v e
 
Join Date: Feb 2006
Location: finland
Posts: 1,684
Default

table height isn't valid anyway
d a v e is offline   Reply With Quote
Old 05-24-2012, 04:22 AM   #6
michelle_redman
 
Join Date: May 2012
Posts: 2
Default

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!
michelle_redman is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:34 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com