Table sizing & overlapping oddity

[Kris_A]

Hiya. First post, hooray!

I'm working on this site for a friend of mine. This is how it looks at the moment (still working on it):

http://kris.acsv.net/looks_fine.png

Normally, there's nothing wrong with it, but occasionally (usually if I change something), the outer table goes too small, leaving the inner table leaning off the edge:

http://kris.acsv.net/goes_wrong.png

This only seems to happen in Firefox so I'm wondering: is it a bug in Firefox or something in my HTML that needs changing?
I'm sure someone has experienced this problem before. Any help would be great!

Thanks,
Kris

PS: Source if it helps at all: http://kris.acsv.net/breachhtml.zip

[johneva]

Firstly you should not use tables for layout anyways.

Also use an external style sheet so there is less coding to look at when you get problems like this.

Also run it though a validator and if your really lucky you might fix the problem buy doing this.

If not at least people will be more willing to go though your coding.

[welsh]

its not a firefox bug, its an ie bug. firefox shows it the right away, follow the comments above.

[pcthug]

Drop the tables, and bring in the cross-browser css layout

[Kris_A]

I'll give that a go, thanks

Edit: Any decent tutorials around? I found a few (yes, with google :P) but I want to get a nice big collection of good ones

[johneva]

Link 1

Link 2

Links 3

[pcthug]

http://www.w3schools.com/css/default.asp
http://www.htmldog.com/