MozillaZine


Table Broken Only In FireFox

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
SoCalBoy
 
Posts: 8
Joined: November 24th, 2014, 12:29 pm

Post Posted November 24th, 2014, 12:56 pm

I'm doing some work for someone else's site and I can't seem to find out why the table is broken on a particular page when viewed in Firefox. IE, Safari, Chrome, Opera all work perfectly on both Windows and Mac platforms. The URL is:

http://www.healthyfutures.net/New-trien ... prices.php

As you can see, it uses php and as such, I think the code is different then what you see by viewing the "source code" in a browser. Would it help if I provided the code that's on the server? Is it appropriate to do so here in the forum?

Thank you in advance for all of your help...

DanRaisch
Moderator

User avatar
 
Posts: 124075
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted November 24th, 2014, 1:07 pm

Moving to Web Development....

Although it actually looks the same here in Firefox 33.1.1 as it does in Chrome Version 39.0.2171.65 m.

SoCalBoy
 
Posts: 8
Joined: November 24th, 2014, 12:29 pm

Post Posted November 24th, 2014, 1:22 pm

Thank you, I must have missed a particular version. I have FireFox Version 33.1.1 and Chrome Version 38.0.2125.122 on my Mac and they're displaying <b>very</b> differently. While I have checked on two other Windows machines with the other browsers I mentioned earlier, I did not check each version number.

So, is the table broken for you in either of these browsers?

Again, thank you.

RobertJ
Moderator

User avatar
 
Posts: 10873
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted November 24th, 2014, 2:58 pm

SoCalBoy wrote:I have FireFox Version 33.1.1 and Chrome Version 38.0.2125.122 on my Mac and they're displaying.......

Again, thank you.


Just checked that site in FireFox Version 33.1.1 and Chrome Version 38.0.2125.122 on my Mac and they display that table differently. The column headings do not line up with the column data using FF.


I also checked the code for that page using an HTML validator with the following result [21 Errors, 4 warning(s)], see this link

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.healthyfutures.net%2FNew-trients%2Fproducts%2Fproducts-prices.php&charset=%28detect+automatically%29&doctype=Inline&group=0

May have something to do with it since FF adheres strictly to the HTML standards.

EDIT: I noticed that the <DOCTYPE> tag is missing for the page. This can cause big issues since that tag informs the browser how to parse the code.


.
FF 84.0.1 - TB 78.6 - Mac OSX 10.13.6

DanRaisch
Moderator

User avatar
 
Posts: 124075
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted November 24th, 2014, 3:01 pm

I can only tell you how it looks in the versions I have installed here (which I referred to above) and in IE 9.0.8112.164. And in each of browsers it looks the same with no breakage.

If you start Firefox in Mozilla Safe Mode do you still see problems with that page?

RobertJ
Moderator

User avatar
 
Posts: 10873
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted November 24th, 2014, 3:05 pm

.
Dan, see my post above yours.

EDIT: Also screwed up in safe mode and with a raw test profile.

.
FF 84.0.1 - TB 78.6 - Mac OSX 10.13.6

DanRaisch
Moderator

User avatar
 
Posts: 124075
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted November 24th, 2014, 3:18 pm

Well, I didn't consider what I saw "broken" as the difference is only in column widths and a difference in the text below the first set of entries: "Would You Like To Place An Order?
CLICK HERE and follow the online instructions." That does appear as five lines in Firefox and two in Chrome. The headings seemed to be lined up above their respective columns.

RobertJ
Moderator

User avatar
 
Posts: 10873
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted November 24th, 2014, 3:32 pm

.

FireFox Version 33.1.1 and Chrome Version 38.0.2125.122 on Mac 10.10.1

Image


.
FF 84.0.1 - TB 78.6 - Mac OSX 10.13.6

DanRaisch
Moderator

User avatar
 
Posts: 124075
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted November 24th, 2014, 3:59 pm

Well, shoot! Looked at the silly thing at least three times but never matched them up side by side and totally missed that difference. My apologies.

BruceAWittmeier

User avatar
 
Posts: 2660
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted November 24th, 2014, 4:27 pm

It didn't appear to me the table heading had the same number of columns and positioning of center. I only changed the first row of headings - not the subsequent blocks. I also gave the table border cells a width to make them visible.

Image

HTML Source:

http://gotnarcosis.com/brucewittmeier/t ... dited.html

===

Edit:
I looked again and made a minor change to the title row. The title/heading row can conveniently be the same as the table and makes alignment easier. Adding 1 row above the first product entry and moving the titles into those cells made it fixable as the rest of the table. I did not force any column widths.

Table only:
http://gotnarcosis.com/brucewittmeier/t ... tract.html
Last edited by BruceAWittmeier on November 25th, 2014, 8:04 am, edited 1 time in total.
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted November 24th, 2014, 4:46 pm

I'm not sure how it's even possible for this table to work correctly in other browsers unless there's some weird CSS hacks being done to try to make it work. The table structure is very strange:

Code: Select all
              <tr bgcolor="#C6E7FF">
                <td width="495" height="30" colspan=8>
                  <p><b class="title2">Essentials Products</b><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wholesale&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;Preferred&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Retail</b></p>                </td>
              </tr>

              <tr>
                <td width="120">
                  <p><a href="products/alphasun.php" class="link"><b>Wild Bluegreen&trade; Body, 120 Caps</b></a></p></td>
                <td align=center>
                  <p>27.00</p>                </td>
                <td align=center>
                  <p>30.00</p>                </td>
                <td align=right>
                  <p>34.00</p>               </td>
              </tr>

              <tr>
                <td width="120">
                  <p><a href="products/alphasun.php" class="link"><b>Wild Bluegreen&trade; Body, 240 Caps</b></a></p></td>
                <td align=center>
                  <p>49.00</p>                </td>
                <td align=center>
                  <p>54.00</p>                </td>
                <td align=RIGHT>
                  <p>61.00</p>               </td>
              </tr>


In a table layout, each TR should have the same number of TD cells, or the cells can use colspan to make up the difference. The table will follow the layout of the very first TR for the rest of the TR's. Your "header" TR only has 1 cell (one with a colspan of 8?!!!), while your content TR's have four cells. I'm also not sure why your cells all have paragraphs, but I'm guessing that's a result of the php templating. Also, some of the old table stuff is deprecated, so you might want to change some of it to CSS. If I was doing this, I would probably try to adjust the template make it output look like this, with 4 cells:

Code: Select all
              <tr style="background-color:#C6E7FF;">
                <td style="width:300px;height:30px;">
                  <p><b class="title2">Essentials Products</b></p></td>
                <td align="center">
                  <b>Wholesale</b>        </td>
                <td align="center">
                  <b>Preferred</b>         </td>
                <td align="right">
                  <b>Retail</b>               </td>
             </tr>

             <tr>
                <td>
                  <a href="products/alphasun.php" class="link"><b>Wild Bluegreen&trade; Body, 120 Caps</b></a></td>
                <td align="center">
                  27.00                </td>
                <td align="center">
                  30.00               </td>
                <td align="right">
                  34.00            </td>
             </tr>

             <tr>
                <td>
                  <p><a href="products/alphasun.php" class="link"><b>Wild Bluegreen&trade; Body, 240 Caps</b></a></p></td>
                <td align="center">
                  49.00                </td>
                <td align="center">
                  54.00                </td>
                <td align="right">
                  61.00                </td>
             </tr>
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Dom1953
 
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Post Posted November 24th, 2014, 6:28 pm

An explanation for the difference in browser layouts may be that Firefox is using fixed table layout, whereas the other browsers appear to be using auto table layout. The difference is huge: fixed layout is a single pass process and a width supplied on a cell element is taken as actual width. So
Code: Select all
<td width="120">
is taken to mean what it says, and causes the wrapping you see.

Auto layout is a two pass process that treats width on a TD element as a minimum width only, and wiil expand column width to fit a wider cell. In this case the cell containing order text:
Code: Select all
<td>
             <p><span class="title2">Would You Like To Place An Order?</span><br>
           <a href="http://www.healthyfutures.net/New-trients/products/ordering.php">CLICK HERE</a> and follow the online instructions.</p>
          </td>

is expanding the width of the first column, resulting in product descriptions appearing on a single line in the cells above. (Note replacing this order text with a "Place Order" image, as sometimes occurs when viewing the page, results in the Firefox layout being produced in IE as well).

Bruce's example above goes a long way to fixing the problem: he did, however, remove the "width=120" table cell attribute in the process of fixing the colgroup error.

Actually no "CSS hacks" are required for browsers to render your table: missing table cells are replaced by anonymous empty table cells as per the CSS2 standard and example.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted November 24th, 2014, 6:37 pm

The other browsers must also be ignoring clunky formatting. In my experience with tables, all of the browsers render them slightly differently. Tables are one of those weird areas where the W3C has (hastily) deprecated HTML properties that cannot actually be replaced gracefully with CSS, so the browsers all (sort of) support the deprecated properties. Because tables are largely discouraged (stupidly IMO) in most "modern" web design guidelines, there isn't a lot of push for the various browsers to come to agreement on how to render them.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

RobertJ
Moderator

User avatar
 
Posts: 10873
Joined: October 15th, 2003, 7:40 pm
Location: Chicago IL/Oconomowoc WI

Post Posted November 25th, 2014, 9:32 am

.

I design web sites pro bono for a number of small charities and religious organizations. In doing this I often am asked to "fix" existing sites that display differently in different browsers/OS's. In the process I have come to the conclusion based on doing this that sites built by people that don't know what they are doing generally, not always, have one thing in common. They are missing the DOCTYPE tag. This site is missing the DOCTYPE tag, no offence intended SoCalBoy.

I have run that site's HTML code through my own HTML checking software adding various DOCTYPE tags. The checker identifies errors ranging from 21 to 117 depending on the tag used. I don't know how the various browsers default when the tag is missing; however, I suspect a fair amount of guessing goes on.

With regard to patrickjdempsey's comment on tables I "tend" to agree. The problem is that many years ago tables were used to perform page layout, I did it myself. As the standards evolved where it made more sense to use CSS to do layout which is where it should occur, many small websites never evolved nor did their developers.

In looking at the HTML for this site tables are used for both a table (appropriate) and layout (not appropriate). If one is not very careful in doing this "mixed" use of tables you get the kind of results we are seeing here. The old technique of checking it in multiple browsers is becoming an unmanageable approach do to the various browsers out there of various ages and the addition of smart phones and tablets.

.
FF 84.0.1 - TB 78.6 - Mac OSX 10.13.6

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted November 25th, 2014, 10:01 am

IMO HTML is horribly broken in regards to columnar layout and tables still work better for than than anything else I've seen. Nesting tables is no worse in that regard than nesting 300 DIVS and using CSS to force them to act like tables.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest