IE6 Bug? Table wraps

[John Robin Devany]

Hello ciwas world. I've just found this newsgroup, and it looks really
useful.

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

This is a header/navbar/content layout that shows how a table in the
content area will be strangely wrapped by IE.

Starting from a regular sized window, reduce the width of the page. At
the point at which you would expect the browser to stop resizing the
table, the table will be wrapped to below the height of the navbar diff.

Also, if the page height is less than the height of the navbar div, the
content div will be rendered incorrectly.

This is so f'd up, I'm certain someone else must have seen it and can
make a workaround suggestion.

Any takers?

--

John Robin Devany
http://www.devany.com

[PeterMcC]

John Robin Devany wrote:

Hello ciwas world. I've just found this newsgroup, and it looks really
useful.

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

This is a header/navbar/content layout that shows how a table in the
content area will be strangely wrapped by IE.

Starting from a regular sized window, reduce the width of the page. At
the point at which you would expect the browser to stop resizing the
table, the table will be wrapped to below the height of the navbar
diff.

Also, if the page height is less than the height of the navbar div,
the content div will be rendered incorrectly.

This is so f'd up, I'm certain someone else must have seen it and can
make a workaround suggestion.

If it's inelegant and crude you're looking for, try adding the following as
an extra row in the table with a suitable width at *
<tr>
<td colspan="6"><img src="transparent.gif" width="*" height="1"></td>
</tr>

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[John Robin Devany]

PeterMcC wrote:

John Robin Devany wrote:

Hello ciwas world. I've just found this newsgroup, and it looks really
useful.

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

<Snip>

If it's inelegant and crude you're looking for, try adding the following as
an extra row in the table with a suitable width at *
<tr>
<td colspan="6"><img src="transparent.gif" width="*" height="1"></td>
</tr>

Thanks, but I need something which will work without hacking-up the HTML.

--

John Robin Devany
http://www.devany.com

[David Graham]

"PeterMcC" <pe***@mccourt.org.uk> wrote in message
news:%x*******************@wards.force9.net...

If it's inelegant and crude you're looking for, try adding the following as an extra row in the table with a suitable width at *
<tr>
<td colspan="6"><img src="transparent.gif" width="*" height="1"></td>
</tr>

I tried your idea of the transparent gif. It doesn't solve the problem. You
would think that a crude method such as this could not fail, but, as I say
it makes no difference.

http://p0c79.phpwebhosting.com/~p0c79/example.html

Any more ideas?
BTW - I'm working my way through the first chapter of 'Eric Meyer on CSS'
and I notice that his first project on converting a table layout to CSS only
goes as far as presentational changes, the major layout tables are left in
place. Perhaps, it will be another few years before CSS for layout will be a
viable option considering all the cross browser issues of today.
Disappointing to see IE6 (which is the most standards conforming browser
from MS) having a problem with such a simple layout.
bye
David
David Graham

[John Robin Devany]

John Robin Devany wrote:

Hello ciwas world. I've just found this newsgroup, and it looks really
useful.

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

This is a header/navbar/content layout that shows how a table in the
content area will be strangely wrapped by IE.

Starting from a regular sized window, reduce the width of the page. At
the point at which you would expect the browser to stop resizing the
table, the table will be wrapped to below the height of the navbar diff.

Also, if the page height is less than the height of the navbar div, the
content div will be rendered incorrectly.

This is so f'd up, I'm certain someone else must have seen it and can
make a workaround suggestion.

Any takers?

table {
table-layout: fixed;
}

fixes it!

Tx to all who looked at it.
--

John Robin Devany
http://www.devany.com

[David Graham]

table {
table-layout: fixed;
}

fixes it!

The only problem is that IE6 then makes the table stretch the full width of
the div that contains it. Mozilla and Opera allow the table to shrink wrap
around the tables content, which is the normal behaviour for a table

David

[John Robin Devany]

David Graham wrote:

table {
table-layout: fixed;
}

fixes it!

The only problem is that IE6 then makes the table stretch the full width of
the div that contains it. Mozilla and Opera allow the table to shrink wrap
around the tables content, which is the normal behaviour for a table

Quite right, I should really describe it as a work-around.
--

John Robin Devany
http://www.devany.com

[JP. Baker]

In article <bm**********@hercules.btinternet.com>,
John Robin Devany <fi*******@lastname.com> wrote:

Hello ciwas world. I've just found this newsgroup, and it looks really
useful.

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

This is a header/navbar/content layout that shows how a table in the
content area will be strangely wrapped by IE.

Starting from a regular sized window, reduce the width of the page. At
the point at which you would expect the browser to stop resizing the
table, the table will be wrapped to below the height of the navbar diff.

Also, if the page height is less than the height of the navbar div, the
content div will be rendered incorrectly.

This is so f'd up, I'm certain someone else must have seen it and can
make a workaround suggestion.

This is the 3px jog bug.

http://www.positioniseverything.net/...reepxtest.html

You could try 'position: absolute' with a suitable 'left' instead of
'float: left'.

nhoJ
--
John P Baker

[John Robin Devany]

JP. Baker wrote:

In article <bm**********@hercules.btinternet.com>,
John Robin Devany <fi*******@lastname.com> wrote:

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

This is the 3px jog bug.

http://www.positioniseverything.net/...reepxtest.html

You could try 'position: absolute' with a suitable 'left' instead of
'float: left'.

nhoJ

Indeed it is, thanks for the link.

--

John Robin Devany
http://www.devany.com

[Brian]

John Robin Devany wrote:

I've put an example of some really irritating IE6 behaviour at:

http://www.devany.com/example.html

You should validate the document. (You need to specify a type for the
style element.)

--
Brian
follow the directions in my address to email me

[Safalra]

"David Graham" <da************@ntlworld.com> wrote in message news:<Mv**************@newsfep1-gui.server.ntli.net>...

"PeterMcC" <pe***@mccourt.org.uk> wrote in message
news:%x*******************@wards.force9.net...

If it's inelegant and crude you're looking for, try adding the following

as

an extra row in the table with a suitable width at *
<tr>
<td colspan="6"><img src="transparent.gif" width="*" height="1"></td>
</tr>

I tried your idea of the transparent gif. It doesn't solve the problem. You
would think that a crude method such as this could not fail, but, as I say
it makes no difference.

That's because he misunderstood your ambiguous statement of the
problem. Looking at the page, it appears that what you actually mean
is that the table *moves* to a position such that its top is level
with the bottom of the navigation bar, which is a different thing
entirely from wrapping (which is where something appears partly on one
line and partly on the next).

I don't know of a solution, I'm afraid.

--- Stephen Morley ---
http://www.safalra.com

[JP. Baker]

In article <bm**********@sparta.btinternet.com>,
John Robin Devany <fi*******@lastname.com> wrote:

JP. Baker wrote:

This is the 3px jog bug.

http://www.positioniseverything.net/...reepxtest.html

Indeed it is, thanks for the link.

I have gained great familiarity with it over the last fortnight.

November 2002. Implemented 'transitional' design for university site.
(table top and bottom for backward compatibility, div navigation and
content). Noticed occasional misplaced bullets in lists put it down
to IE error with custom bullets. Most pages were placeholders at the
time so were shorter than navigation.
Christmas 2002-March 2003. Broke my ankle. My boss seemed more concerned
at the jog problem than my health. Of course there was real content now.
April 2003. went live with site, deciding that a few pixels were IE's
problem and we would have to lump it.
June 2003-October 2003. Released template to other departments. Some of
whom had pages that were just tables (AAAAARGH).
October 2003. Identified as 3px jog (float) bug. Tried to find any fix
that wouldn't cause a regression. (Unfortunately we have a footer so
can't just go to 'position: absolute'. Cosmetic patch, temporarily put
in on Monday, equivalent of:

<!--[if IE 6]>
<style type="text/css">
#navigation {display: expression('absolute')}
#footer {padding-top: expression(Math.max(navigation.offsetHeight-
content.offsetHeight, 0))}
@media print {#footer {padding-top: 0 !important}}
</style>
<![endif]-->

Which needs JScript and, due to another bug, doesn't get saved to disc.
(at least the other browsers only see a comment)
Now. No idea how to redeem the situation.

[ links off http://www.bris.ac.uk/ ]

nhoJ
--
John P Baker

[John Robin Devany]

JP. Baker wrote:

In article <bm**********@sparta.btinternet.com>,
John Robin Devany <fi*******@lastname.com> wrote:

JP. Baker wrote:

This is the 3px jog bug.

http://www.positioniseverything.net/...reepxtest.html

<some snipping>

October 2003. Identified as 3px jog (float) bug. Tried to find any fix
that wouldn't cause a regression. (Unfortunately we have a footer so
can't just go to 'position: absolute'. Cosmetic patch, temporarily put
in on Monday, equivalent of:

<!--[if IE 6]>
<style type="text/css">
#navigation {display: expression('absolute')}
#footer {padding-top: expression(Math.max(navigation.offsetHeight-
content.offsetHeight, 0))}
@media print {#footer {padding-top: 0 !important}}
</style>
<![endif]-->

Which needs JScript and, due to another bug, doesn't get saved to disc.
(at least the other browsers only see a comment)
Now. No idea how to redeem the situation.

[ links off http://www.bris.ac.uk/ ]

nhoJ

fwiw

I've been playing a bit more and have now set the navigation section to
absolute. Of course, then there is the problem of the footer being
positioned relative to the content but not the navigation (so the
navigation div may extend vertically below the footer) - which, if I
understand correctly, is your problem too.

As a workaround, I'm assuming the navigation to be a minimum height, say
40em and then setting the minimum height of the content div to be the
same. That way, the footer will appear to be relative to the navigation
div. This will break if too much appears in navigation.

To get a minimum height in IE, i've used:

* html #content {
height: 40em;
}

Regards
--

John Robin Devany
http://www.devany.com