How to work around this IE table resizing issue?

B

Bruce C. Miller

Take a look at this html page:

<html>
<body>

<TABLE border=1 WIDTH="100%">

<TR>
<TD WIDTH="1">1</TD>
<TD WIDTH="1">2</TD>
<TD>333</TD>
<TD>444</TD>
</TR>

<TR>
<TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
TD>
</TR>

</TABLE>
</body>
</HTML>

If I pull that up in FF it looks like I want it to (the first and
second columns are small), but in IE it expands those columns (it
ignores the width=1). How do I tell IE to not automatically make those
columns whatever size it wants? It seems to have something to do with
the length of content in the COLSPAN-ed row below it, which is pretty
stupid.
 
D

dorayme

"Bruce C. Miller said:
Take a look at this html page:

<html>
<body>

<TABLE border=1 WIDTH="100%">

<TR>
<TD WIDTH="1">1</TD>
<TD WIDTH="1">2</TD>
<TD>333</TD>
<TD>444</TD>
</TR>

<TR>
<TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
TD>
</TR>

</TABLE>
</body>
</HTML>

If I pull that up in FF it looks like I want it to (the first and
second columns are small), but in IE it expands those columns (it
ignores the width=1). How do I tell IE to not automatically make those
columns whatever size it wants? It seems to have something to do with
the length of content in the COLSPAN-ed row below it, which is pretty
stupid.
Click to expand...

Have you tried with a doctype,

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

?

And remove width in the <td...>, it is an error. If necessary
specify it in css:

td.tiny {width:1em;}

and class the <td>s concerned. If there is a meaningful reason
apart from the sheer look to so do, then use a more appropriate
name than my "tiny".

And what is this business of "1"? This means 1px in your code.
But that is not very sensible, even one character will take up
more space generally. Poor IE, what is it to do? We all now it is
a bit challenged. Why strain its brain? Better to use ems as
above.

And really, is there a good reason so want to constrain things?
Why not let the widths adjust themselves to the content and the
browser window? Even remove the width="100%".

Play about with these ideas and let us know if IE then behaves
more according to your taste (I have not looked at any of the
Wins IE for a while)
 
R

Richard Formby

"Bruce C. Miller"
Take a look at this html page:
Click to expand...
<html>
Click to expand...
Where is the !DOCTYPE. You are putting IE into quirks mode where it
reproduces the bugs from prior versions.

<snip>

IE always breaks when you mix percentages and pixels in tables with colspan.
Known problem.
 
S

Steve Pugh

<TABLE border=1 WIDTH="100%">
<TR>
<TD WIDTH="1">1</TD>
<TD WIDTH="1">2</TD>
<TD>333</TD>
<TD>444</TD>
</TR>
<TR>
<TD COLSPAN="4">hhhhhhhhhhhhhhhffffffffffffffffffffffffffhhhhhhh</
TD>
</TR>
</TABLE>

If I pull that up in FF it looks like I want it to (the first and
second columns are small), but in IE it expands those columns (it
ignores the width=1).
Click to expand...

As the characters "1" and "2" are almost always wider than 1px (which
is what width="1" means in this context) then both IE and FF are
ignoring the width="1" anyway, and with good reason.
How do I tell IE to not automatically make those
columns whatever size it wants? It seems to have something to do with
the length of content in the COLSPAN-ed row below it, which is pretty
stupid.
Click to expand...

The specification tells browsers to treat cell widths as a suggestion
and to ignore them when the content doesn't fit. IE handles this by
treating cell widths as minimum widths.

It will be hard to come up with a solution without being able to see a
real page with real content. Possible solutions include,, but probably
aren't limited to,: not using tables, using table-layout: fixed;
splitting the table into two; but which one is most appropriate will
depend on the the actual content, design and structure of the page.

Steve
 
B

Bruce C. Miller

Have you tried with a doctype,

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

?

And remove width in the <td...>, it is an error. If necessary
specify it in css:

td.tiny {width:1em;}

and class the <td>s concerned. If there is a meaningful reason
apart from the sheer look to so do, then use a more appropriate
name than my "tiny".

And what is this business of "1"? This means 1px in your code.
But that is not very sensible, even one character will take up
more space generally. Poor IE, what is it to do? We all now it is
a bit challenged. Why strain its brain? Better to use ems as
above.

And really, is there a good reason so want to constrain things?
Why not let the widths adjust themselves to the content and the
browser window? Even remove the width="100%".

Play about with these ideas and let us know if IE then behaves
more according to your taste (I have not looked at any of the
Wins IE for a while)
Click to expand...

Unfortunately, I cannot use strict since this is part of generated
markup produced by a huge n-tier app, most of which ignores strict
syntax. Rewriting the display layer of this to produce proper markup
is something I'd like to see, but would require literally months of
work and testing, and wouldn't be an easy sell to more results-
oriented people :(

Either way, I dislike the idea that the length of the content in the
second row effects the way IE draws the first one. It really
shouldn't, quirks-mode or not. For example, if you change the 2nd
row's content to like 4 characters, IE does exactly what I want it to.
 
J

Jonathan N. Little

Bruce said:
Either way, I dislike the idea that the length of the content in the
second row effects the way IE draws the first one. It really
shouldn't, quirks-mode or not. For example, if you change the 2nd
row's content to like 4 characters, IE does exactly what I want it to.
Click to expand...

Makes you kind of understand why it strikes a nerve around here when
someone make a statement like: "who cares about standards, its the most
popular 'browser' so all should do it that browser's way!"

I and many here will recommend to design for standards-compliant
browsers first, then if IE has problems, tweak or hack if you must, else
live with the difference.

You're stuck with quirks mode so it is a crap-shoot at best. You'll just
have to live with IE doing it its *own* way. IE7 is now out and it is
clear how MS feels about this.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to wrap <td> content . 16
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Filter table rows based on multiple checkboxes value 2
Sort by number of characters 1
How to add dropdown selected data to table using jquery 2
SendGrid email issue in responsive Gmail 1
How to have two html audio players on one page? 0

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 494

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top