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:
In Firefox, my table looks like this:
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!
Table formatting problem with firefox
Table formatting problem with firefox
You do not have the required permissions to view the files attached to this post.
Theresa Putkey
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Re: Table formatting problem with firefox
Which versions of IE and FF?
Are your headers inside paragraph tags and the paragraph tag has the background color?
Are your headers inside paragraph tags and the paragraph tag has the background color?
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Table formatting problem with firefox
FF: 2.0.0.16
IE: 7.0.5730.11
The code in IE:
IE: 7.0.5730.11
The code in IE:
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>
<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>
Theresa Putkey
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Re: Table formatting problem with firefox
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.
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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Table formatting problem with firefox
These are the styles in Style.css
TH
TH
TDth
{
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;
}
TRtd
{
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
{
border-bottom: solid 1px #303d47;
}
Theresa Putkey
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Re: Table formatting problem with firefox
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
For the TH, I changed "float: left" to float: (not set)" and this fixed the problem.
Do you know why this would happen?
Theresa
Theresa Putkey
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Re: Table formatting problem with firefox
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.
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.
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Table formatting problem with firefox
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
I'm not sure if I set that or if it was done automatically. In the future I will double check that setting!
Theresa
Theresa Putkey
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada
Key Pointe Usability Consulting, Inc
Information Architecture, Content Planning and Writing
"Organizing your information. Writing to your key pointes."
Vancouver, BC, Canada