1. Home
  2. Forums Index
  3. Browser Side / Firefox Browser Usage and Support 12:43 pm May 18, 2026

Forum Moderators: open

Message Too Old, No Replies

Code Differences in Firefox and IE

Works fine in IE, Not Firefox. Why?

         

GarthRanzz

5:13 pm on May 6, 2005 (gmt 0)

10+ Year Member



For various reasons the following code is used for the intranet at my work place to format employee listings. We cannot edit anything outside the body nor call to a CSS due to the content management system we use. The editors are strictly limited to coding within the body only.

It works just fine in IE. But I'm trying to convince them to switch over to Firefox for the obvious reasons. So when I went to pull up the site within Firefox I was amazed to find the biggest mess I've ever seen. It looks to me as if FF is not recognizing the span or the div code or maybe both.

Can anyone help me figure out a change that could be done to keep the same look in both browsers while being limited to working with the body tags only?

Here is an example of the code: 


<html>
<head>
<title>Program Management</title>
</head>
<body>
  <DIV style="MARGIN: 10px 0px; FONT: bold 90% tahoma; TEXT-ALIGN: center">Directors:</DIV>
<DIV style="BORDER-RIGHT: #e98d54 1px solid; BORDER-TOP: #e98d54 1px solid; FONT: bold 75%/20px Tahoma; BORDER-LEFT: #e98d54 1px solid; WIDTH: 100%; COLOR: #e98d54; BORDER-BOTTOM: #e98d54 1px solid; HEIGHT: 2px; BACKGROUND-COLOR: #f0ebe1">
<DIV style="FLOAT: left; WIDTH: 30%; HEIGHT: 100%">&nbsp;Associate Name</DIV>
<DIV style="FLOAT: left; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">Phone</DIV>
<DIV style="FLOAT: left; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center">Pager #</DIV>
<DIV style="FLOAT: left; WIDTH: 39.5%; HEIGHT: 100%">Title</DIV></DIV>
<DIV style="PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; BORDER-BOTTOM: #e98d54 1px solid; HEIGHT: 2px">
<DIV style="PADDING-LEFT: 10px; FLOAT: left; FONT: bold 80% Tahoma; WIDTH: 30%; HEIGHT: 100%">John Doe</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">#*$!x</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center"></DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 39.5%; HEIGHT: 100%">Director of Operations, Guest Services</DIV></DIV>
<DIV style="PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; BORDER-BOTTOM: #e98d54 1px solid; HEIGHT: 2px">
<DIV style="PADDING-LEFT: 10px; FLOAT: left; FONT: bold 80% Tahoma; WIDTH: 30%; HEIGHT: 100%">John Doe</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">#*$!x</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center">xxx-xxxx</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 39.5%; HEIGHT: 100%">Director of Services</DIV></DIV>
<DIV style="MARGIN-TOP: 40px; FONT: 75% tahoma; TEXT-ALIGN: center">Guest Services Administrative Assistant</DIV>
<DIV style="MARGIN: 30px 0px 10px; FONT: bold 90% tahoma; TEXT-ALIGN: center">Program Managers:</DIV>
<DIV style="BORDER-RIGHT: #e98d54 1px solid; BORDER-TOP: #e98d54 1px solid; FONT: bold 75%/20px Tahoma; BORDER-LEFT: #e98d54 1px solid; WIDTH: 100%; COLOR: #e98d54; BORDER-BOTTOM: #e98d54 1px solid; HEIGHT: 2px; BACKGROUND-COLOR: #f0ebe1">
<DIV style="FLOAT: left; WIDTH: 30%; HEIGHT: 100%">&nbsp;Associate Name</DIV>
<DIV style="FLOAT: left; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">Phone</DIV>
<DIV style="FLOAT: left; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center">Pager #</DIV>
<DIV style="FLOAT: left; WIDTH: 39.5%; HEIGHT: 100%">Title</DIV></DIV>
<DIV style="PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; HEIGHT: 2px">
<DIV style="PADDING-LEFT: 10px; FLOAT: left; FONT: bold 80% Tahoma; WIDTH: 30%; HEIGHT: 100%">John Doe</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">xxxx</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center"></DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 39.5%; HEIGHT: 100%">Senior Manager</DIV></DIV>
<DIV style="BORDER-RIGHT: #e98d54 1px solid; BORDER-TOP: #e98d54 1px solid; FONT: bold 75%/20px Tahoma; BORDER-LEFT: #e98d54 1px solid; WIDTH: 100%; COLOR: #e98d54; BORDER-BOTTOM: #e98d54 1px solid; HEIGHT: 2px; BACKGROUND-COLOR: #f0ebe1">
<DIV style="FLOAT: left; WIDTH: 30%; HEIGHT: 100%">&nbsp;Associate Name</DIV>
<DIV style="FLOAT: left; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">Phone</DIV>
<DIV style="FLOAT: left; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center">Pager #</DIV>
<DIV style="FLOAT: left; WIDTH: 39.5%; HEIGHT: 100%">Support Dept. Responsibilities:</DIV></DIV>
<DIV style="PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; BORDER-BOTTOM: #e98d54 1px solid; HEIGHT: 2px">
<DIV style="PADDING-LEFT: 10px; FLOAT: left; FONT: bold 80% Tahoma; WIDTH: 30%; HEIGHT: 100%">John Doe<BR>John Doe<BR>John Doe<BR>John Doe<BR>John Doe<BR>John Doe</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 10%; HEIGHT: 100%; TEXT-ALIGN: center">xxxx<BR>xxxx<BR>xxxx<BR>xxxx<BR>xxxx<BR>xxxx</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 20%; HEIGHT: 100%; TEXT-ALIGN: center">xxx-xxxx<BR>&nbsp;<BR>&nbsp;<BR>&nbsp;<BR>&nbsp;<BR>&nbsp;</DIV>
<DIV style="FLOAT: left; FONT: 80% Tahoma; WIDTH: 39.5%; HEIGHT: 100%">Team Facilitators<BR>Internet/Correspondence Specialists<BR>Partner Relations Specialists<BR>Property Support Facilitators / Special Projects<BR>International Offices<BR>TBD</DIV></DIV>
</body>
</html>

Stormfx

6:47 pm on May 6, 2005 (gmt 0)

10+ Year Member



First things first, make every tag and attribute lowercase. Do this is both the html and styles. Then, validate your page and see what comes up. Validation will tell you why Firefox is displaying it how it is.

GarthRanzz

7:23 pm on May 6, 2005 (gmt 0)

10+ Year Member



I actually validated this last night when I wasn't able to log in here but didn't try making the code lower-case. I've redone the code and added the charset and doctype to it. It validates as valid html 4.01 transitional. No errors. The validator I used was the one at W3C. Is there a different one that tells the difference in the browser? BTW, I ran the validator in a Firefox browser.

Here is the cleaned-up code: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head> 
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<title>Program Management</title> 
</head> 
<body> 
<div style="margin: 10px 0px; font: bold 90% tahoma; text-align: center">Directors:</div> 
<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 2px; background-color: #f0ebe1"> 
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div> 
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div> 
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div> 
<div style="float: left; width: 39.5%; height: 100%">Title</div></div> 
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 2px"> 
<div style="padding-left: 10px; float: left; font: bold 80% tahoma; width: 30%; height: 100%">John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">xx</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center"></div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Director of Operations, Guest Services</div></div> 
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 2px"> 
<div style="padding-left: 10px; float: left; font: bold 80% tahoma; width: 30%; height: 100%">John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">#*$!x</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center">#*$!-xxxx</div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Director of Services</div></div> 
<div style="margin-top: 40px; font: 75% tahoma; text-align: center">Guest Services Administrative Assistant</div> 
<div style="margin: 30px 0px 10px; font: bold 90% tahoma; text-align: center">Program Managers:</div> 
<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 2px; background-color: #f0ebe1"> 
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div> 
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div> 
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div> 
<div style="float: left; width: 39.5%; height: 100%">Title</div></div> 
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; height: 2px"> 
<div style="padding-left: 10px; float: left; font: bold 80% tahoma; width: 30%; height: 100%">John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">xxxx</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center"></div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Senior Manager</div></div> 
<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 2px; background-color: #f0ebe1"> 
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div> 
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div> 
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div> 
<div style="float: left; width: 39.5%; height: 100%">Support Dept. Responsibilities:</div></div> 
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 2px"> 
<div style="padding-left: 10px; float: left; font: bold 80% tahoma; width: 30%; height: 100%">John Doe<br>John Doe<br>John Doe<br>John Doe<br>John Doe<br>John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">xxxx<br>xxxx<br>xxxx<br>xxxx<br>xxxx<br>xxxx</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center">xxx-xxxx<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Team Facilitators<br>Internet/Correspondence Specialists<br>Partner Relations Specialists<br>Property Support Facilitators / Special Projects<br>International Offices<br>TBD</div></div> 
</body> 
</html>

tedster

8:13 pm on May 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is tabular data and would most appropriately be marked up in tables, not groups of floated divs. That change, if practical, would resolve most problems.

But more than that, I think at least some of the problems you see are coming because the document is using a partial DTD and therefore being rendered in quirks mode. This means it was created to "look right" in IE's non standard rendering mode. A full DTD would put browsers into standards mode.

If you make just one change - a full DTD - you will see that even in IE the final div shoots to the left side of the page. Here's code for just the first two rows of data - but with a full DTD.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">

<title>Program Management</title>

</head>

<body>

<div style="margin: 10px 0px; font: bold 90% tahoma; text-align: center">Directors:</div>

<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 2px; background-color: #f0ebe1">
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div>
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div>
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div>
<div style="float: left; width: 39.5%; height: 100%">Title</div></div>

<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 2px">
<div style="padding-left: 10px; float: left; font: bold 80% tahoma; width: 30%; height: 100%">John Doe</div>
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">xx</div>
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center"></div>
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Director of Operations, Guest Services</div></div>

</body>
</html>

Stormfx

8:35 pm on May 6, 2005 (gmt 0)

10+ Year Member



Just a note that I apparently forgot to add earlier:

You containing <div> tags have a height of 2px. If you float div's inside this container, they ignore the container's settings. So the borders for the container are two px apart, while the nested divs are taller because they're "floating" above the container.

GarthRanzz

9:21 pm on May 6, 2005 (gmt 0)

10+ Year Member



Tedster and Stormfx, thank you both.

When my team started this intranet project two years ago we were 'gently' led away from the use of tables and needed to come up with another way to achieve the effect. DIVs and SPANs were the way to go, we were told. So now we have more than 20K pages done, the majority of them containing DIVs and SPANs to control table-type information.

Stormfx, thank you for the explanation of the DIV height. In manipulating the 2px into 20px I can see more the result we would want. It doesn't resolve the other issues but it does make things a lot more clear.

I can see that changing to Firefox, for now, would be unrealistic. Especially if actually letter case matters since our CMS tool automatically capitalizes all the code.

Wish I had found this resource two years ago. It would have saved us some headaches.

GarthRanzz

9:56 pm on May 6, 2005 (gmt 0)

10+ Year Member



Well I did figure something out to use even if the code is ugly (using &nbsp; instead of padding). The padding-left: 10px is what was causing the title to wrap as that padding, even only applied to the name div, was carried across all the divs in FF but not in IE. Since it was only being used to indent the name I achieved the same effect by using three non-breaking spaces. And the final wrapping div where all the supporting managers names would be just had to be increased from a 20px height to 95px. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head> 
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">
<title>Program Management</title> 
</head> 
<body> 
<div style="margin: 10px 0px; font: bold 90% tahoma; text-align: center">Directors:</div> 
<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 20px; background-color: #f0ebe1"> 
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div> 
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div> 
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div> 
<div style="float: left; width: 39.5%; height: 100%">Title</div></div> 
<div style="clear:both;"></div>
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 20px"> 
<div style="float: left; font: bold 80% tahoma; width: 30%; height: 100%">&nbsp;&nbsp;&nbsp;John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">#*$!x</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center"></div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Director of Operations, Guest Services</div></div> 
<div style="clear:both;"></div>
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 20px"> 
<div style="float: left; font: bold 80% tahoma; width: 30%; height: 100%">&nbsp;&nbsp;&nbsp;John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">#*$!x</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center">xxx-xxxx</div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Director of Services</div></div> 
<div style="clear:both;"></div>
<div style="margin-top: 40px; font: 75% tahoma; text-align: center">Guest Services Administrative Assistant</div> 
<div style="margin: 30px 0px 10px; font: bold 90% tahoma; text-align: center">Program Managers:</div> 
<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 20px; background-color: #f0ebe1"> 
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div> 
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div> 
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div> 
<div style="float: left; width: 39.5%; height: 100%">Title</div></div> 
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; height: 20px"> 
<div style="float: left; font: bold 80% tahoma; width: 30%; height: 100%">&nbsp;&nbsp;&nbsp;John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">xxxx</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center"></div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Senior Manager</div></div> 
<div style="clear:both;"></div>
<div style="border-right: #e98d54 1px solid; border-top: #e98d54 1px solid; font: bold 75%/20px tahoma; border-left: #e98d54 1px solid; width: 100%; color: #e98d54; border-bottom: #e98d54 1px solid; height: 20px; background-color: #f0ebe1"> 
<div style="float: left; width: 30%; height: 100%">&nbsp;Associate Name</div> 
<div style="float: left; width: 10%; height: 100%; text-align: center">Phone</div> 
<div style="float: left; width: 20%; height: 100%; text-align: center">Pager #</div> 
<div style="float: left; width: 39.5%; height: 100%">Support Dept. Responsibilities:</div></div> 
<div style="clear:both;"></div>
<div style="padding-bottom: 5px; width: 100%; padding-top: 5px; border-bottom: #e98d54 1px solid; height: 95px"> 
<div style="float: left; font: bold 80% tahoma; width: 30%; height: 100%">&nbsp;&nbsp;&nbsp;John Doe<br>&nbsp;&nbsp;&nbsp;John Doe<br>&nbsp;&nbsp;&nbsp;John Doe<br>&nbsp;&nbsp;&nbsp;John Doe<br>&nbsp;&nbsp;&nbsp;John Doe<br>&nbsp;&nbsp;&nbsp;John Doe</div> 
<div style="float: left; font: 80% tahoma; width: 10%; height: 100%; text-align: center">xxxx<br>xxxx<br>xxxx<br>xxxx<br>xxxx<br>xxxx</div> 
<div style="float: left; font: 80% tahoma; width: 20%; height: 100%; text-align: center">xxx-xxxx<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;</div> 
<div style="float: left; font: 80% tahoma; width: 39.5%; height: 100%">Team Facilitators<br>Internet/Correspondence Specialists<br>Partner Relations Specialists<br>Property Support Facilitators / Special Projects<br>International Offices<br>TBD</div></div> 
<div style="clear:both;"></div>
</body> 
</html>

tedster

1:29 am on May 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



...we were 'gently' led away from the use of tables and needed to come up with another way to achieve the effect. DIVs and SPANs were the way to go, we were told.

Ah, the dangers of partial knowledge. Of course, when you are developing for an Intranet and can control what browser is going to be used, then you can get away with many things that cause trouble otherwise.

I'm glad you found the negative margin problem - actually there's more that's wasteful in the markup, but it probably doesn't affect your particular question. The mark-up was created, shall I say "expediently"? -- that is, to make IE look a certain way rather than to markup the document in a fashion that makes efficient and semantic sense.

Stormfx

7:17 am on May 7, 2005 (gmt 0)

10+ Year Member



'gently' led away from the use of tables..

Lots of people were, including myself. But after spending hours upon hours trying to get something to look just right cross-browser, I finally gave up. The 'idea' of standards is very nice. Unfortunately, I doubt very seriously that the percentage of cross-browser consistency will ever raise to a single digit. :(

Oh well, the people who use the site are what matters. Nothing else. If I have 1% of visitors using a browser that renders my web site to the point of losing them, then I'll stick to something that works half-ass.

Besides, the way I see it is that more than one column and more than one row justifies a table. :p At least until some sort of viable solution is discovered :)

Sorry, that's neither here nor there :)

tedster

7:34 am on May 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The 'idea' of standards is very nice.

Also note, tables ARE part of the standard. While eventually tables may not be used for layout purposes, this particular page is a classic example of true tabular data, and that's what tables are inteded to handle.

Going to floated divs in this case actually DESTROYS the meaningful relationships between the columns that a table can convey quite clearly.

py9jmas

7:42 am on May 7, 2005 (gmt 0)

10+ Year Member



Especially if actually letter case matters since our CMS tool automatically capitalizes all the code.

HTML tags are case-insensitive. If changing the case did change the rendering in Firefox, Firefox would be very very broken.

The examples in the W3C's HTML standards are in uppper case.

Robin_reala

8:02 pm on May 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



However XHTML tags are case sensitive.

Regarding your code, it's a shame that you've been misled in this way. A case of jumping on the hype and ignoring common sense :( I work for a financial information company so consequently we present a lot of data in tabular form. We use properly marked up accessible tables for these (th, caption, @summary, @scope, etc). Divs are kept for layout...

zooloo

9:11 pm on May 7, 2005 (gmt 0)

10+ Year Member



It's HTML 4.01 Transitional.

Uppercase.

zoo

Hmmm... does CSS care?

g1smd

11:01 am on May 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



>> led away from the use of tables and needed to come up with another way to achieve the effect. DIVs and SPANs were the way to go, we were told <<

Some people use tables to lay out the whole page, and many people are trying to move away from that.

If you have tabular data within the page, then you do need a table for that.

There are two sides to CSS: styling and positioning.

Your HTML code is very bloated. Using CSS for styling, and a couple of classes and an external style sheet would shrink the page massively.

A page should be made up of headings, paragraphs, lists, tables, and forms. Those are the basic HTML building blocks. External CSS styling makes the HTML code less bloated and very much easier to follow (if you cannot have an external CSS file, at least have all the CSS defined in a <style> block in the <head> section, rather than in-line in the <body>.)

CSS Positioning uses DIVs and SPANs. That is advanced stuff, with many cross-browser hurdles. For your simple application it isn't necessary to do that.

You should use lower case for HTML tags to retain compatibility with XHTML should you ever migrate. The HTML tag case should also match the case defined in any external CSS file.

GarthRanzz

3:31 pm on May 9, 2005 (gmt 0)

10+ Year Member



I would prefer we used CSS or at the very least were able to apply the style within the head. But our CMS application doesn't allow for this. Or I should say those who run the CMS application don't allow us to have ready access to change the CSS (without enlisting them and being charged way too much) nor do we have the chance of getting access to the header information. If I ever get the chance to bring that functionality in-house I'll jump right on it.

I had another thought come up when looking at this piece of code, which is way simple compared to some others we have constructed to do similar layouts. When Microsoft introduces IE7 does anyone think they'll finally go compliant all the way? What I mean is will the so far as to make the code we use look the way it really should, the way Firefox shows it?

g1smd

3:48 pm on May 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The style block should go in the <head> section, but every browser that I know of will still find it even if you put it at the top of the body! That isn't valid code, but you might be able to get away with it for now.

Maybe you could redsign the page to use a style block and place it at the top of the <body>, inside it that is, test it, and when totally happy, tell the CMS people that you want to import that code into the head section.

Alternatively I can't see why they can't add a one line @import function in the head calling a known CSS filename in the root folder, and give you an interface to edit that CSS file. It isn't rocket science.

These are very simple things; without them it is killing your site.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / Firefox Browser Usage and Support 12:43 pm May 18, 2026