Topic: CSS table problem in NS7 & Opera 6

Please take a look at a site I'm working on: http://www.smileycat.com/caledonia/tm_ko_tyson.html

It works fine in IE, but the Pedigree table towards the bottom gets screwed up in NS7 and Opera 6. I would be very grateful for any ideas as I'm still learning this stuff and can't see what I'm doing wrong with my positioning.

Thanks in advance!

a blind squirrel
www.smileycat.com

Ouch... no replies. Did I say something wrong?

a blind squirrel
www.smileycat.com

Nah, I just guess no one wanted to fire up Netscape 7. =)

It looks like you could do that with a table. (Arguably, it's tabular data, so there's not much wrong with doing it that way.) That would simplify things.

However, the reason it's not working is *probably* due to box model differences. I suspect that if you add a correct doctype to your page (see http://www.alistapart.com/stories/doctype/ - your current one is almost correct but not quite), IE 6 will switch into the correct box model, and it will also stop working in that.

Then, you can correct for it by remembering the fact that the width or height of a box is only the width or height for the *content* area of the box. The padding, margins, and borders are *added* on to that. So their sum should be what you want the "box-width" and "box-height" of the box to be.

To make it work in earlier versions of IE (IE 5.5 for instance), which don't implement the DOCTYPE switch, you might need the Tantek Box Model Hack ( http://www.tantek.com/CSS/Examples/boxmodelhack.html ).

In addition, it really doesn't make much sense to have your page layed out in a table(when it's not even remotely needed for such a loose/simple layout) and then when you get to the part that tables were designed to be used for, you instead use a bunch of <div>'s inside your table.

My advice (aside from following Slime's important advice) -

1) Don't use a table to layout your page, it's not needed and it's an extra burden of code that will only end up causing problems in the long run.

2) When you are presenting tabular data, such as your pedigree section, *use* a table. That's what they're made for

And of course, in that regard, your problem isn't really a table problem, as it is the <div>'s that are getting botched.





[This message has been edited by DL-44 (edited 03-05-2003).]

Thanks for the feedback guys--I appreciate it. I will heed your advice and use a table as it should be used; however, I will have a go at making it work using the box model, if only for my own understanding. Thanks again!

a blind squirrel
www.smileycat.com