I’ve run into a problem with IE7 ignoring min-widths on divs when those divs are inside table cells.
Earlier versions of IE ignored min-width (and min-height) altogether, but this was (supposedly) fixed in version 7. Certainly outside of tables I’ve got divs with min-widths that IE is honouring, but inside tables… not so much.
There’s a test case here to illustrate the problem. I know that min-widths cannot be applied to the cells directly, but what the test case is showing is that IE 7 ignores the min-width declaration on the div inside the cell (but oddly honours the min-height).
I’m hoping that someone can illuminate me, or point me to a guide or discussion about this problem as I need to either find a workaround or understand what I’m doing wrong (and my google-fu appears lacking).
Hi Apollyon. The trouble in your example is that IE6 and IE7 will not render empty table cells. (And even though you’ve got a DIV in there, it’s still considered empty by IE.) Note that if you place anything in there – text, a 1x1 pixel graphic, or a non-breaking space – the min-width will work fine.
As far as I know there’s no way around this problem short of making the empty cell non-empty.
Thank you for that choie. Adding a non-breaking space to the div causes IE7 to then display the test case the same way as FF, Opera and Safari.
That does solve part of my problem… but IE still doesn’t seem to want to honour the min-width if the table doesn’t have an explicit width set.
Here is a 2nd test case , using a table with no fixed with, and a min-width div in a cell (the div containing a non-breaking space). IE7 only sizes the 2nd cell to accommodate the space (if the space is substituted for 3 characters then the cell grows to only that size, etc). Even with some content in the div in the second cell IE7 appears intent on shrink-wrapping the content.
I cannot set a fixed width on the div, cell, or table because I don’t know the exact width of the contents, and while I’d happily forego the use of tables altogether if I could, they are being generated server side.
Thanks again for the help so-far… I’ll go back to sticking pins in my IE development team voodoo dolls.
Follow-up: further testing has demonstrated that IE7 is sizing the cell to the width of the text (in the div in the cell) and ignoring the min-width set on the div. It will honor a width on the div, but not a min-width.
I’ll post a link to a test case, and a workaround once I get home.
The third test case shows what happens when the min-width on the div is switched to a fixed width (and, a non-breaking space included).
It’s right on all the browsers tested… but what happens if the content is longer than the fixed width? The standards say the content should run outside the parent, and that’s what happens in FF, Safari, and Opera… but not in IE7.
IE7 doesn’t increase the size of the div (the light blue), but does increase the size of the table cell (the green). :smack:
It would appear that IE figures out the widths of its table cells from their content, rather than the styles of any children. On the bright side, this means there is a work around. If we create an inner div with a fixed with then IE7 won’t squash the divs to the content width (per test case 2), and we can style the min-width outer div (so we don’t end up seeing the cell background). We have to hide the fixed width style from the standards compliant browsers, but this is about par for the course.
The final test case shows the effect of the inner div (and what happens if we don’t make it IE specific).
I’m going to need longer pins for my voodoo dolls.
You may be better off designing your code to be standards-compliant, meaning it will work in Firefox, Opera and other quality browsers. Then go back and use the box model hack so it will play with that crappy IE browser.
Hi Duckster, I’m not sure this is a box model issue exactly – padding and margins aren’t involved, and also the test cases have a XHTML 1.0 Transitional doctype declaration and the box model bug should only be an issue in IE7 when in quirks mode (which, if I’m understanding correctly the xhtml doctype should not trigger). This seems more akin to the Expanding Box Problem , or has something to do with the way IE calculates its table column widths.
Absolutely. Firefox is my primary platform (I cannot recommend its Web Developer and Firebug addons highly enough)… and the development team are also using it as their testing browser (running on Linux boxes with Eclipse, etc).
It’s just that muggins here has to also make it work under IE, (fortunately only IE7 now and not 6 as well), and I while I control and create the CSS, I have only partial control of the html code as it is generated by the JSF framework, and Oracle’s ADF (now Apache’s Trinidad) just loves using tables in tables in tables as its markup (rather than the lightweight div based markup I’d prefer).
Wow, Firebug is great! I’ve been using Web Developer for a while now, and i love it, but i’d never come across Firebug before.
I don’t build many webpages, and the ones i do build are usually fairly basic setups for the classes i teach and stuff like that. But i’ve gotten so sick of hacking for IE that i’m almost at the stage where i say “Fuck it” and just build for standards-compliant browsers. And fuck anyone who doesn’t use them.
Whenever i put a page together using CSS for positioning, and for menus etc., it always works exactly as i expect it to in Opera and Firefox, but usually needs to be hacked in IE. At least IE7 now seems to implement the :hover command properly, so that pop-out CSS menus are possible without a javascript hack. Fixing for IE6 is a pain in the ass, though.
This seems close to the IE float problem. It’s encountered with a tableless CSS design approach and not using tables. An excellent site addressing the float problem is maintained by the PIE web site.
Ultimately though, what are you attempting to do? It seems to me you are trying to create something based on the technology, rather than define what you want first, and then select which technology will best do the job. In other words, are you experimenting with a table design where CSS is applied to the table to achieve an end? Is this a test of min-width with IE (black hole imho)? Could you achieve the same with a tableless, all CSS design?
