table trouble

[Veta]

I built my page using Firefox to view it and it looks how I want it but in IE (and possibly all other browsers?) it doesn't look right. My html and css validates (with W3C), so I guess I'm relying on a Firefox bug or something.

Here's the page: individual.utoronto.ca/nicolemorgan

One of the problems seems to be that in Firefox, on my web page, a certain table cell is defined by the width of the top cell in the same column and wraps its contents (which is text), whereas in IE the width definition isn't recognized and the text isn't wrapped. My temporary solution is to manually break the lines of text so that they fit within the cell dimensions, but this feels messy. (The column in question is where the tan-coloured blocks are on the left side of the page.)

Other problems are that some of the cells don't line up, and there is a thin line between two certain cells in IE but not Firefox.

Is there some basic principle I'm missing, or is my code just messy, or what?

[dflynn]

Well, ideally you shouldn't use tables to make a website. Tables are designed to display data where as DIV layers and CSS should be used to display and style the site. It also give you better control over objects on the site so you may find you fix your problem.

For complete cross browser unity you'll have to think about using a CSS reset. Basically, each browser has a preset value for certain tag's properties, reseting them means you can redefine them and make each browser display exactly as you tell it to.

[simran]

I think you should try w3school.com for sort out your problem so go ahead man good luck