ansaurus

Question

Why is IE ignoring cell's widths when a collspan is involved?

Answer 1

A:

what DOCTYPE if any are you specifying above your <html> tag

Does it work if you change it to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

OR

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Eoin Campbell 2009-04-20 10:14:46

In this abstracted example I have none. In my real code it is XHTML 1.0 strict. Changing it doesn't help. I'll update the OP to reflect my doctype.

borisCallens 2009-04-20 10:20:57

bizarre. just tried it there and the colspan in the second row seems to be breaking it... Seems to be a known issue. http://www.velocityreviews.com/forums/t158704-ie-screws-up-table-cell-widths-when-colspan-is-used.html

Eoin Campbell 2009-04-20 10:24:26

Answer 2

+2 A:

If you hardcode the width of the 4th column it works as expected...

...
<td style="background-color: Green; width:295px">buffer</td>
...

It ignores the colspan attribute, so if the image's width is more thant the first column it mixes all up. Search for "IE6 colspan bug"...

[EDIT:] If you have to do it with tables, that (not beautiful) might work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;&gt;
<body>
    <table style="background-color: Navy; width:400px">
        <tr>
          <td>
            <table width="100%">
              <tr>
                <td style="background-color: Green; width:35px">test</td>
                <td style="background-color: Green; width:35px">test</td>
                <td style="background-color: Green; width:35px">t</td>
                <td style="background-color: Green">buffer</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <img src="http://www.tiepvoud.nl/archief/boris_jeltsin.jpg" alt="Product Mixing Gauges" width="400" />
          </td>
        </tr>
    </table>
</body>
</html>

Reminds me a little of this

But I really think you should use CSS for layout!!!

Peter 2009-04-20 10:23:01

Indeed. Great, now I have to put width calculation in my page since the number columns is variable :S Therefore I can't put the styling in my CSS! God I hate IE!

borisCallens 2009-04-20 10:27:08

Voted for good comment because of the "God..." If IE wouldn't be there, design time of a web site would be about a 3rd I think...

Peter 2009-04-20 10:30:41

Answer 3

A:

Try this:

<style type="text/css">table {table-layout: fixed;}</style>

It should works, this occur only in IE6 i guess (not with IE7 & IE8)

or you can use width:auto in your 4th column

<td style="background-color: Green; width: auto;">buffer</td>

Btw i hope you didn't use the above code to create a table based layout (which was old fashion, hey you should learn CSS based layout this day)

Dels 2009-04-20 10:32:33

it's an abstracted example ;) I know what css is all about.

borisCallens 2009-04-20 10:39:51

Answer 4

A:

Try setting the overflow CSS property on a few things, like maybe the table

eg: <table style="background-color: Navy; width:400px;**overflow: hidden**">

Overflew 2009-04-20 10:37:43

Answer 5

A:

There is a CSS based grid system called 960 that is easy to learn, and will work for IE, FF and Sarari. It will help enforce the column spans you have defined and creates cleaner mark up. Here is a nice tutorial.

I was skeptical at first, as I am an old ASP.NET guy but it has saved me a ton of time with maintenance and cross browser issues. I also found that by using tables less, I could incorporate more client side functionality more rapidly. That's a definite plus.

David Robbins 2009-04-20 10:55:42

I don't like css grid layouts for several reasons. The most important one being the fact that defining your with in a classname is the same as putting a hardcoded width value.

borisCallens 2009-04-20 13:06:20

ansaurus

tags:

views:

answers:

Why is IE ignoring cell's widths when a collspan is involved?

related questions