SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 issue with float inside of a table cell.

    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.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Happy ADD/ADHD with Asperger's

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your help as always is greatly appreciated

  10. #10
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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?

  11. #11
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i guess its something similiar to this http://www.positioniseverything.net/...pe-floats.html ?

    it used the zoom hack thingy..

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 321web View Post
    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 -
    Code:
    <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 -

    Code HTML4Strict:
    <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>

  13. #13
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    764
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •