ansaurus

Question

table layout wrong in IE(7)

Answer 1

A:

completely agree, you can have a look at blueprint CSS or other CSS frameworks for some help

Miau 2008-10-13 11:22:48

Answer 2

+3 A:

For a start, your CSS values should have units, e.g. width:190; should be width: 190px;

Greg 2008-10-13 11:23:23

Yup, this is almost certainly the cause of the problem, although a more specific description of the problem would help us to determine that.

Bobby Jack 2008-10-13 11:27:51

Answer 3

A:

At first sight it looks like IE7 has some broken support for this kind of formatting. At first I was going to propose to get rid of the divs and move the formatting (width and height) directly on the TD, but I tried that and doesn't seem to solve the problem.

I guess this is not a nice solution, but would it be possible to replace the rowspan cells with more cells with an invisible border between them? However this solution fails if the text is larger than the size of the upper cell.

rslite 2008-10-13 11:42:15

Answer 4

+3 A:

I assume you are complaining about the minimal height of the middle row (the one containing only rowspanned cells), and the enlarged height of the adjacent rows to compensate, leaving gaps between the divs.

IE cannot calculate optimal row heights when the row contains only rowspanned cells. The usual solution when you absolutely cannot rejig it to get rid of the rowspan is to add a 1px 'dummy' column to one side of the table, containing empty cells, each with the 'height' set to how high the row should be.

But yes, depending on what you're planning to do with this, a CSS layout may well be more appropriate. If it's really a fixed-pixels-for-everything layout like this example, absolute positioning for each div will be a lot, lot easier.

Other bits: CSS width/height values require units (presumably 'px'); valign/cellspacing/etc. can be more easily done in a stylesheet even if you are using table layouts; a standards-mode DOCTYPE may prevent some of the worse IE bugs (although, not this old, non-CSS-related one).

bobince 2008-10-13 11:42:16

Answer 5

A:

You should definitely go with CSS. Tables should NEVER be used for layout.

hmcclungiii 2008-10-13 12:00:19

Tables should be used to layout tabular data. Anything requiring two or more columns or rows is tabular data...

David Arno 2008-10-13 12:02:24

"Anything requiring two or more columns or rows is tabular data" that's a dangerous way of putting it, David!

Bobby Jack 2008-10-13 12:05:26

I'm a believer in using tables to get 2-3 column layouts. I am aware that most people don't like hearing this though and view my position on tables as wrong at best and dangerous at worst. A look at the negative feedback I get at times has taught me how bad the hatred of tables has become.

David Arno 2008-10-13 12:28:24

Answer 6

A:

The choice of Doctype (4.01 Transitional with no system identifier (url)) triggers Quirks mode in IE which makes it highly inconsistent with other browsers.

Switch to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Or at least:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(and, of course, validate but the HTML and CSS (which would pick the the missing units on your length values)).

David Dorward 2008-10-13 12:31:48

ansaurus

tags:

views:

answers:

table layout wrong in IE(7)

related questions