Firefox flakeyness

[Mastiff]

My site looks fine under IE, but with Firefox it renders wrong about 20% of the time.  Like I can just sit there and hit reload and about one time in 5 it comes up wrong.  If anyone is willing to take a look, the page is here:

http://www.libertarianunderground.com/

I have a table for the main column and then two other tables for columns of articles.  One column is aligned left and is supposed to take 80% of the width, the other is right and takes 18%.  there is a 2% gap between for looks. Kinda like this:

Code Select Expand

<table width=80%>
  <tr><td>
    <table align=left width=80%>
       stuff
     </table>
    <table align=right width=18%>
      stuff
     </table>
    </td></tr>
</table>

When it breaks, the first nested table consumes 100% of the main table and the other one is put underneath, also taking 100%. 

Any ideas would be great.  TIA

[kegobeer]

I recommend validating your site and fixing the errors.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.libertarianunderground.com%2F

Once you fix your site, I'm sure FF and Opera will display properly.

[Mastiff]

I don't have any significant errors on the validator I don't think.  The only problems left are related to putting quotes around millions of attribute values.  I don't think that could be my problem.  I do have quotes around the hex colors and percentages.

[kegobeer]

Remember, IE lets you get away with less than perfect (X)HTML, but other browsers expect standards compliant coding, and sometimes break when coding isn't up to snuff.

I'd fix those errors before troubleshooting any further, but that's just my opinion.  I'm a stickler for standards. 

[Mastiff]

Okay, all fixed. 

Well, the one thing left is this stuff about "non SGML character ...".  I don't know what that means.  All those errors are in content generated by SMF, so it's not my fault. And I REALLY doubt that's causing my tables to mis-align.

Anyone have any ideas?

[Mastiff]

Well, I changed the character set to windows-1252 and now it is fully validated.

The problem, unfortunately, persists. 

Any help from the gurus would be greatly appreciated!

[[Unknown]]

Code Select Expand

<table width=80%>
  <tr><td>
    <table align=left width=80%>
       stuff
     </table>
    <table align=right width=18%>
      stuff
     </table>
    </td></tr>
</table>

In certain cases, older versions of Gecko, like the one Firefox 1.0 uses, have problems with table layouts like that.  I'm using Firefox 1.1 (which uses a much newer Gecko engine) and see nothing wrong.

I'd suggest avoiding the use of tables in that specific format (a table with two tables in it, one aligned left and the other aligned right.)  By the look of it, you could probably do the same by replacing just one of the tables with a div.  You might also try using table-layout: fixed, since this is only a problem in the width approximation algorithm.

-[Unknown]

[Mastiff]

I'm actually using a Firefox download from two days ago.  Did you hit reload a few times when you were looking?  It renders properly about 80% of the time I'd guess.  I also asked on the mozilla development forum and they suggested that there might be a bug related to this.

I'll try to fix it though.  Are you suggesting table-layout: fixed be applied to all the tables, or just the main column one?

Thanks for the help?

[[Unknown]]

I'm actually using a Firefox download from two days ago.

Unless you're using an Alpha version codenamed Deer Park, you're still using 1.0.

Did you hit reload a few times when you were looking?

I did; and, if it happens about that percentage it sounds exactly like the Gecko engine bug.

I'll try to fix it though.  Are you suggesting table-layout: fixed be applied to all the tables, or just the main column one?

I would try all three, or see what it takes to stop the bug.  You could also try using all tds and no table nesting.

-[Unknown]