Table formatting problem with firefox

[tputkey]

Hello,

I'm having a formatting problem with firefox and haven't been able to find the resolution in the forum or KB.

In IE, my table looks like this:

tableIE.png

In Firefox, my table looks like this:

tableFirefox.png

I can't figure out why Firefox is doing this. I have tried formatting the tables using the td and th in the Styles.css as well as using a table CSS. I have the same problem with both. If I look at the code in the compiled help, it all looks the same. So it's got to be something with my style sheet and firefox, but I don't know what.

Help!

[LTinker68]

Which versions of IE and FF?

Are your headers inside paragraph tags and the paragraph tag has the background color?

[tputkey]

FF: 2.0.0.16
IE: 7.0.5730.11

The code in IE:

<table style="margin-left: 0;margin-right: auto;caption-side: top;">
<col style="width: 303px;" />
<col style="width: 403px;" />
<thead>
<tr>
<th>Standard Name</th>
<th>Website</th>
</tr>
</thead>
<tr>
<td>
<p>Simple Object Access Protocol (SOAP) 1.1</p>
</td>
<td>
<p><a href="http://www.w3.org/TR/2000/NOTE-SOAP-200 ... 000508/</a>
</p>
</td>
</tr>
<tr>
<td>
<p>Web Service Description Language (WSDL) 1.1</p>
</td>
<td>
<p><a href="http://www.w3.org/TR/2001/NOTE-wsdl-200 ... 0010315</a>
</p>
</td>
</tr>
<tr>
<td>
<p>WS-I Basic Profile 1.1</p>
</td>
<td>
<p><a href="http://www.ws-i.org/Profiles/BasicProfi ... 24.html</a>
</p>
</td>
</tr>
<tr>
<td>
<p>SOAP - Simple Object Access Protocol Specifications 1.2</p>
</td>
<td>
<p><a href="http://www.w3.org/TR/soap12-part1">http ... -part1/</a>
</p>
<p> </p>
</td>
</tr>
</table>

The code in Firefox:

<table style="margin-left: 0;margin-right: auto;caption-side: top;">
<col style="width: 303px;" />
<col style="width: 403px;" />
<thead>
<tr>

<th>Standard Name</th>
<th>Website</th>
</tr>
</thead>
<tr>
<td>
<p>Simple Object Access Protocol (SOAP) 1.1</p>

</td>
<td>
<p><a href="http://www.w3.org/TR/2000/NOTE-SOAP-200 ... 000508/</a>
</p>
</td>
</tr>
<tr>
<td>

<p>Web Service Description Language (WSDL) 1.1</p>
</td>
<td>
<p><a href="http://www.w3.org/TR/2001/NOTE-wsdl-200 ... 0010315</a>
</p>
</td>
</tr>
<tr>

<td>
<p>WS-I Basic Profile 1.1</p>
</td>
<td>
<p><a href="http://www.ws-i.org/Profiles/BasicProfi ... 24.html</a>
</p>
</td>
</tr>

<tr>
<td>
<p>SOAP - Simple Object Access Protocol Specifications 1.2</p>
</td>
<td>
<p><a href="http://www.w3.org/TR/soap12-part1">http ... -part1/</a>
</p>
<p> </p>

</td>
</tr>
</table>

[LTinker68]

Can you paste the styles for the table, thead, tr, and th tag as they are in the stylesheet? (Open the stylesheet file using the Internal Text Editor or Notepad.)

Make sure you look all the way through the stylesheet. Sometimes styles for a tag are broken up into more than one block and scattered throughout a stylesheet file.

[tputkey]

These are the styles in Style.css

TH

th
{
font-weight: bold;
margin-bottom: 2px;
margin-top: 2px;
font-family: Arial;
font-size: 10pt;
float: left;
text-align: left;
padding-bottom: 0px;
padding-top: 0px;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #303d47;
color: #000000;
background-color: #d2e1f7;
}

TD

td
{
padding: 2px;
font-size: 10pt;
font-family: 'Trebuchet MS';
vertical-align: top;
margin-bottom: 8px;
margin-top: 8px;
background-color: #f4f4f4;
border-bottom: solid 1px #303d47;
}

TR

tr
{
border-bottom: solid 1px #303d47;
}

[tputkey]

Hi Lisa,

For the TH, I changed "float: left" to float: (not set)" and this fixed the problem.

Do you know why this would happen?

Theresa

[LTinker68]

That was actually the first thing I noticed when I started reading the styles.

Float dynamically positions an element at the left or right end of its parent container tag, depending on which float option you select. It's most commonly used with <img> and <div> tags. So if you have your <img> tag set to float right and you insert an image inside a paragraph, then the image will float at the right side of the paragraph. If you change the width of the paragraph (narrow/widen the browser window), then the image will change position to keep in sync with the paragraph.

Since you had the TH style set to float, the background color only extended the distance between the opening <th> tag and the closing </th> tag, because in order to float, it has to be smaller than its parent container tag. When you removed the float property, you basically told the TH to go back to its normal behavior, which is to fill the available space in its cell.

[tputkey]

Thanks Lisa!
I'm not sure if I set that or if it was done automatically. In the future I will double check that setting!

Theresa