...

View Full Version : Tables issue using Firefox browser



Village Plank
06-11-2012, 01:19 PM
Hi all, new in these parts.
I'm having some issues getting tables to display properly in Firefox, all fine as far as I can see in other browsers. Firefox seems to want to add large spaces between seemingly random rows of cells in my data tables. Since my site is built off the back of tables also (HUGE SIN), the width of the left and right colums seems to differ page to page also. Yes, I win the doofus wooden spoon award for my coding skills :thumbsup:

My site is small so I avoided CSS (probily a big mistake)

Home page is: www.barnsleyweather.com

Example of poor table spaces between rows: http://www.barnsleyweather.com/dailymaxminarchivesfebdec11.html

Site currently been updated.

Thanks for any help In advance
Ric ;)

Will Bontrager
06-11-2012, 02:31 PM
Hi all, new in these parts.
I'm having some issues getting tables to display properly in Firefox, all fine as far as I can see in other browsers. Firefox seems to want to add large spaces between seemingly random rows of cells in my data tables. Since my site is built off the back of tables also (HUGE SIN), the width of the left and right colums seems to differ page to page also. Yes, I win the doofus wooden spoon award for my coding skills :thumbsup:

My site is small so I avoided CSS (probily a big mistake)

Home page is: www.barnsleyweather.com

Example of poor table spaces between rows: http://www.barnsleyweather.com/dailymaxminarchivesfebdec11.html

Site currently been updated.

Thanks for any help In advance
Ric ;)


Some of the table rows end with
</font></p></font></td> and others with
</font></p></td>

That extra </font> following </p> may be adding a paragraph space.

If you'll use
<td align="center">then the reason for the <p></p> tags would be eliminated, as far as I could tell from the section I viewed.

Suggest learning CSS :)

Will

SB65
06-11-2012, 02:36 PM
If you look at the offending cells the html is slightly different.

In the "OK" cells the html is (eg. second td 25/03/2011):


<p align="center"><font style="BACKGROUND-COLOR: rgb(64,255,192)">&nbsp;&nbsp;&nbsp;1.5&nbsp;C&nbsp;</font></p>

with the <font> tag within the <p> tag.

However, on the 26/03/2011 row the corresponding cell is:


<font style="BACKGROUND-COLOR: rgb(64,255,192)">
<p align="center"><font style="BACKGROUND-COLOR: rgb(64,255,64)">&nbsp;&nbsp; 5.8&nbsp;C&nbsp;</font></p></font>

with the <p> tag within the <font> tag, which is invalid.

That's causing the difference.

You'd be better dispensing with the deprecated font tag entirely, and applying the style either just to the <p> tag or even to the td itself, I think.
(A quick and dirty and not recommended fix is just to set the top and bottom margins on p elements within tds to zero.)

The use of tables for this data is perfectly correct and semantic, incidentally, this is tabular data, where the elements within a table row are related to each other. You don't need it for the layout though.

Village Plank
06-12-2012, 11:02 AM
Thanks guys, really appreciate the help :thumbsup:

I just need to fix the page to page difference with table left and right colum widths. I'm sure I've probily just missed some "fixed" text somewhere.

Thanks again!

felgall
06-12-2012, 09:23 PM
Are you aware that some mobile devices use browsers that ALWAYS display borders around table cells?

bundled
06-12-2012, 11:19 PM
A longer / reliable fix would be to make a full CSS of the site.

Well, at least some of the stuff that remains for all of the pages.
Over time - I found that CSS is vital for even small sites.

You may want to throw the following into CSS coding >

<P align=center><FONT style="BACKGROUND-COLOR: #8000a0">&nbsp;940</FONT><FONT style="BACKGROUND-COLOR: #8000a0">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #6000a0">&nbsp;945</FONT><FONT style="BACKGROUND-COLOR: #6000a0">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4000a0">&nbsp;950</FONT><FONT style="BACKGROUND-COLOR: #4000a0">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4000c0">&nbsp;955</FONT><FONT style="BACKGROUND-COLOR: #4000c0">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4060ff">&nbsp;960</FONT><FONT style="BACKGROUND-COLOR: #4060ff">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4080ff">&nbsp;965</FONT><FONT style="BACKGROUND-COLOR: #4080ff">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40a0ff">&nbsp;970</FONT><FONT style="BACKGROUND-COLOR: #40a0ff">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40c0ff">&nbsp;975</FONT><FONT style="BACKGROUND-COLOR: #40c0ff">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffff">&nbsp;980</FONT><FONT style="BACKGROUND-COLOR: #40ffff">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffc0">&nbsp;985</FONT><FONT style="BACKGROUND-COLOR: #40ffc0">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffa0">&nbsp;990</FONT><FONT style="BACKGROUND-COLOR: #40ffa0">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ff40">&nbsp;995</FONT><FONT style="BACKGROUND-COLOR: #40ff40">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40c020">&nbsp;1000&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40a020">&nbsp;1005</FONT><FONT style="BACKGROUND-COLOR: #40a020">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #408000">&nbsp;1010</FONT><FONT style="BACKGROUND-COLOR: #408000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffff00">&nbsp;1015</FONT><FONT style="BACKGROUND-COLOR: #ffff00">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffc000">&nbsp;1020</FONT><FONT style="BACKGROUND-COLOR: #ffc000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffa000">&nbsp;1025</FONT><FONT style="BACKGROUND-COLOR: #ffa000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff8000">&nbsp;1030</FONT><FONT style="BACKGROUND-COLOR: #ff8000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff4000">&nbsp;1035</FONT><FONT style="BACKGROUND-COLOR: #ff4000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff0000">&nbsp;1040</FONT><FONT style="BACKGROUND-COLOR: #ff0000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #c00000">&nbsp;1045</FONT><FONT style="BACKGROUND-COLOR: #c00000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800000">&nbsp;1050</FONT><FONT style="BACKGROUND-COLOR: #800000">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800060">&nbsp;1055</FONT><FONT style="BACKGROUND-COLOR: #800060">&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800080">&nbsp;1060</FONT><FONT style="BACKGROUND-COLOR: #800080"> </FONT></P>
<P align=center><U>Temp C</U></P>
<P align=center><FONT style="BACKGROUND-COLOR: #8000a0">&nbsp; -1</FONT><FONT style="BACKGROUND-COLOR: #8000a0">5&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #6000a0">&nbsp; -12</FONT><FONT style="BACKGROUND-COLOR: #6000a0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4000a0">&nbsp; -10</FONT><FONT style="BACKGROUND-COLOR: #4000a0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4000c0">&nbsp; -8</FONT><FONT style="BACKGROUND-COLOR: #4000c0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4060ff">&nbsp; -6</FONT><FONT style="BACKGROUND-COLOR: #4060ff">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #4080ff">&nbsp; -4</FONT><FONT style="BACKGROUND-COLOR: #4080ff">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40a0ff">&nbsp; -2</FONT><FONT style="BACKGROUND-COLOR: #40a0ff">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40c0ff">&nbsp; -1</FONT><FONT style="BACKGROUND-COLOR: #40c0ff">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffff">&nbsp; 0</FONT><FONT style="BACKGROUND-COLOR: #40ffff">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffc0">&nbsp; 1</FONT><FONT style="BACKGROUND-COLOR: #40ffc0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffa0">&nbsp; 2</FONT><FONT style="BACKGROUND-COLOR: #40ffa0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ff40">&nbsp; 4</FONT><FONT style="BACKGROUND-COLOR: #40ff40">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40c020">&nbsp; 6&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40a020">&nbsp; 8</FONT><FONT style="BACKGROUND-COLOR: #40a020">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #408000">&nbsp; 10</FONT><FONT style="BACKGROUND-COLOR: #408000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffff00">&nbsp; 12</FONT><FONT style="BACKGROUND-COLOR: #ffff00">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffc000">&nbsp; 15</FONT><FONT style="BACKGROUND-COLOR: #ffc000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffa000">&nbsp; 18</FONT><FONT style="BACKGROUND-COLOR: #ffa000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff8000">&nbsp; 21</FONT><FONT style="BACKGROUND-COLOR: #ff8000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff4000">&nbsp; 24</FONT><FONT style="BACKGROUND-COLOR: #ff4000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff0000">&nbsp; 26</FONT><FONT style="BACKGROUND-COLOR: #ff0000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #c00000">&nbsp; 28</FONT><FONT style="BACKGROUND-COLOR: #c00000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800000">&nbsp; 3</FONT><FONT style="BACKGROUND-COLOR: #800000">0&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800060">&nbsp; 33</FONT><FONT style="BACKGROUND-COLOR: #800060">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800080">&nbsp; 36&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800080"> </FONT></P>
<P align=center><U>Wind MPH</U></P>
<P align=center><FONT style="BACKGROUND-COLOR: #40ffff"><FONT style="BACKGROUND-COLOR: #40c0ff">&nbsp; 0</FONT><FONT style="BACKGROUND-COLOR: #40c0ff">&nbsp; </FONT>&nbsp; 5</FONT><FONT style="BACKGROUND-COLOR: #40ffff">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffc0">&nbsp; 10</FONT><FONT style="BACKGROUND-COLOR: #40ffc0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ffa0">&nbsp; 15</FONT><FONT style="BACKGROUND-COLOR: #40ffa0">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40ff40">&nbsp; 20</FONT><FONT style="BACKGROUND-COLOR: #40ff40">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40c020">&nbsp; 25</FONT><FONT style="BACKGROUND-COLOR: #40c020">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #40a020">&nbsp; 30</FONT><FONT style="BACKGROUND-COLOR: #40a020">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #408000">&nbsp; 35</FONT><FONT style="BACKGROUND-COLOR: #408000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffff00">&nbsp; 40</FONT><FONT style="BACKGROUND-COLOR: #ffff00">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffc000">&nbsp; 4</FONT><FONT style="BACKGROUND-COLOR: #ffc000">5&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ffa000">&nbsp; 50</FONT><FONT style="BACKGROUND-COLOR: #ffa000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff8000">&nbsp; 55</FONT><FONT style="BACKGROUND-COLOR: #ff8000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff4000">&nbsp; 60</FONT><FONT style="BACKGROUND-COLOR: #ff4000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #ff0000">&nbsp; 65</FONT><FONT style="BACKGROUND-COLOR: #ff0000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #c00000">&nbsp; 70</FONT><FONT style="BACKGROUND-COLOR: #c00000">&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800000">&nbsp; 75&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800060">&nbsp; 80&nbsp;&nbsp;</FONT><FONT style="BACKGROUND-COLOR: #800080">&nbsp; 85&nbsp; </FONT></P>


Though its a small site. This type of coding will slow it down. It will also cause much malfunction on multi-browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum