Overlaping text

http://www.gaminghybrid.com/games/loztp/review

As you see there are screenshots in the boxes. While, when the boxes float to the right, some of the text floats inside the border... Why would this be so? Anyway to fix?

Thanks a bunch!

Hi,

Firstly your page doesn't validate, I'm assuming thats because your still in the testing phase and you'll fix up the errors asap.

Why all the tables inside divs? why not just use css to position inside those divs. Not only is it not semantically correct but it's just plain harder to debug (maybe it's just me).

Anyway at a quick glance I think your tables are overflowing your divs.
div width =margin 3 + width 150 + margin 3 =156px
table width = margin 6 + cellspacing + cell padding + 150 + ........... = something much larger than 156px

Margin and padding add to the overall width of an element.

Hmmm, it all seems to work ok in Safari and Firefox for Mac, if that's any consolation. But, why not put the styling into css rather than leave it in the html? That might help tidy things up a bit. At the moment you are not really using css, at least for this feature.

It seems you mean IE7. Next time please say so.

IE7's implementation of overflow:visible is better than IE6's, but is still broken, hence you get problems like that.

Listen to what essee said. Here are some links to things he mentioned:

The first step in debugging should always be making sure that your code is valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Why should you avoid using tables for layout?

Actually, it is FireFox 2.0 and yes I know it isn't tableless CSS. Still learning on this, so it is coming along but takes time.

I'm aware it isn't fully valid xhtml/css techniques, as it is more to get the look/functionality first, then polish. Many things aren't fluid yet, this is more to get a look first, then next would be to polish.

Thanks for the help, I'll try the suggestions Still learning this way of coding.