Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Tables issue using Firefox browser

    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

    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/daily...sfebdec11.html

    Site currently been updated.

    Thanks for any help In advance
    Ric

  • #2
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by Village Plank View Post
    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

    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/daily...sfebdec11.html

    Site currently been updated.

    Thanks for any help In advance
    Ric

    Some of the table rows end with
    Code:
    </font></p></font></td>
    and others with
    Code:
    </font></p></td>
    That extra </font> following </p> may be adding a paragraph space.

    If you'll use
    Code:
    <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

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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):

    Code:
    <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:

    Code:
    <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.
    Last edited by SB65; 06-11-2012 at 01:40 PM.

  • Users who have thanked SB65 for this post:

    Village Plank (06-12-2012)

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys, really appreciate the help

    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!

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,641
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Are you aware that some mobile devices use browsers that ALWAYS display borders around table cells?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New Coder
    Join Date
    Jun 2012
    Location
    MI
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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 >
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •