IE6 issue with float inside of a table cell.

[321web]

I figured this one would be easier to explain if I just post an example http://www.321webmaster.com/div-test.html

As you can see in FF the width of the first table cell is stretched perfectly to match the conent but, if you view this same page in IE6, the float on the div wrapped text some how confuses IE6 and the table call does no stretch. Instead the content just pushes the table cell out across the other cells.

For some reason, I cant find any reference of this bug online. Any help is greatly appreciated.

[Rayzur]

Hi,
Is this happening on a native copy of IE6?

IETester (IE6) is not showing the behavior your describing, it renders the same as FF.

[Paul O'B]

Hi,

I'm not seeing that behaviour here either. Neither is browsercam!

Does the above code render differently for you or was that just part of the code?

If it was the above code giving you a different display then you might try clearing your cache and deleting temporary internet files etc.

[321web]

You need to refresh to see it. For some reason I dont see it when I hit that page for the first time in IE6 either but, when I refresh the page I see the error state.

I can see the error in the native version of IE6 but here is a quick screenshot with IE6 tester to show the error can be seen there as well.

Thanks for the help guys.

[Erik J]

Did a quick test in my IE6.

First load is rendered ok, but a refresh or text-size change will make IE6 loose the table expanding and applies the restricting width set on the table (500px).

It seems IE6 doesn't like the cell's div floating left, changed to float right the rendering is ok.

EDIT)
Checked a few ideas before posting.

[Paul O'B]

Ok, I can see it now when refreshed and Erik's fix above seems to be working.

It also worlks if you remove the float and I'm not sure why you would need a float there unless there is more to the design that we can see of course

[321web]

unless there is more to the design that we can see of course

Exactly. I isolated the bug.

What I really need to do is maintain the left float (I know this is what is causing the bug as I noted in my first post) and stop the table from the improper rendering. Any idea what the root of this bug is? Why does the internet seem to have no record of it? Surely someone else must have run into this.

[Paul O'B]

Unfortunately IE has a number of bugs with floats and absolute positioning in tables and the 2 don't mix very well. There seems to be a long standing bug with overlap in cells when using align="left" and align="right" which is basically the same as floating and seems to cause cell overlaps.

I tried a number of things but the only fix seems to be the float right that Erik Suggested.

One thing that did work was using the IE display:inline-block hack (display:inline-block followed by display:inline in a subsequent rule) and that seemed to work but it would mean that the next element would also need to be an inline block element or it would start on another line anyway. It may be a solution if your code can be managed like that.

If you are using white-space:nowrap to stretch the cell then even if the element was floated left a following element would break to the next line anyway because the whitespace would be broken. Of course as you say you have something else going on which would probably make it make sense

Sorry I couldn't see a real cure.

[321web]

Your help as always is greatly appreciated

[321web]

One thing that did work was using the IE display:inline-block hack (display:inline-block followed by display:inline in a subsequent rule) and that seemed to work but it would mean that the next element would also need to be an inline block element or it would start on another line anyway. It may be a solution if your code can be managed like that.

I am using the inline block hack in this example http://www.321webmaster.com/div-test-2.html but, I dont see any difference. Did I miss something?

Are you saying to use that instead of float?

[resting]

i guess its something similiar to this http://www.positioniseverything.net/...pe-floats.html ?

it used the zoom hack thingy..

[Rayzur]

Did I miss something?

Are you saying to use that instead of float?

Hi,
Yes, Paul was saying use inline-block instead of a float. An inline-block without a width will shrinkwrap just like a widthless float.

Yes you missed something, IE6/7 need the "inline reset" in another selector lower down in the cascade.

Like so -

<style>
div.select {
    display:inline-block;
    white-space:nowrap;
    color:red;
}
* html div.select {display:inline;}/*IE6 inline-block trigger*/
*+html div.select {display:inline;}/*IE7 inline-block trigger*/

td,th {
    border:1px solid #000; 
    padding:4px;
}
</style>

Or you could use an IE CC if you don't like the hacks -

<head>
<title>Test</title>
<style>
div.select {
    display:inline-block;
    white-space:nowrap;
    color:red;
}
td,th {
    border:1px solid #000; 
    padding:4px;
}
</style>
 
<!--[if lt IE 8]>
<style type="text/css">
div.select{
    display:inline;
}
</style>
<![endif]-->
 
</head>
<body>

[321web]

Hi,
Yes, Paul was saying use inline-block instead of a float. An inline-block without a width will shrinkwrap just like a widthless float.

Thanks for clarifying. I actually did that right after I replied and I think I am going to have success with it. Thanks for the help guys.