[css-d] overflow:hidden and display:table
Moving on from yesterday's vertical align div, I have set up code to vertically align images in a wrapping div. That's fine. However, images which are larger than the div and which normally would be controlled by overflow:hidden, now spill over. Any thoughts? http://www.iyesolutions.co.uk/templates/whitehousestudios/aerial.html Cheers Ian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden and display:table
Ian Young wrote: Moving on from yesterday's vertical align div, I have set up code to vertically align images in a wrapping div. That's fine. However, images which are larger than the div and which normally would be controlled by overflow:hidden, now spill over. They don't spill over - they expand the table-cell just as in an ordinary HTML table. That's how a CSS table cells is supposed to behave - it replicates its HTML counterpart, and you can't prevent it by declaring 'overflow: hidden' since the cell expands _before_ hiding any overflow. http://www.iyesolutions.co.uk/templates/whitehousestudios/aerial.html You have two options: 1: set a max-height and max-width on the image and let browsers scale over-sized ones down to a suitable size for your layout. 2: wrap a container of suitable size around the image and hide the overflow on that. You will of course lose vertical alignment of the image then. I often use option 1: - regardless of whether images are in a 'table-cell' or not, which works everywhere but in IE6. However IE6 doesn't understand CSS table so one can hide the overflow in that old bugger. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden and display:table
Moving on from yesterday's vertical align div, I have set up code to
vertically align images in a wrapping div.
That's fine. However, images which are larger than the div and which
normally would be controlled by overflow:hidden, now spill over.
Any thoughts?
http://www.iyesolutions.co.uk/templates/whitehousestudios/aerial.html
#picWrapper {table-layout:fixed;}
ought to work in decent browsers
Hi Philippe
That fixes the overflow, but the cell now shrinks to size of image, which is
not what we want.
The div is 700x500 with images in centre.
I have made changes so you can see what I mean.
Cheers
Ian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden and display:table
-Original Message- From: Gunlaug Sørtun [mailto:gunla...@c2i.net] Sent: 03 March 2009 11:41 To: Ian Young Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] overflow:hidden and display:table Ian Young wrote: Moving on from yesterday's vertical align div, I have set up code to vertically align images in a wrapping div. That's fine. However, images which are larger than the div and which normally would be controlled by overflow:hidden, now spill over. 1: set a max-height and max-width on the image and let browsers scale over-sized ones down to a suitable size for your layout. 2: wrap a container of suitable size around the image and hide the overflow on that. You will of course lose vertical alignment of the image then. I often use option 1: - regardless of whether images are in a 'table-cell' or not, which works everywhere but in IE6. However IE6 doesn't understand CSS table so one can hide the overflow in that old bugger. I have gone for option1 and it seems to work fine, so that will do nicely. Thanks Georg. Ian __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden and display:table
On Mar 3, 2009, at 8:09 PM, Ian Young wrote:
Moving on from yesterday's vertical align div, I have set up code to
vertically align images in a wrapping div.
That's fine. However, images which are larger than the div and which
normally would be controlled by overflow:hidden, now spill over.
Any thoughts?
http://www.iyesolutions.co.uk/templates/whitehousestudios/aerial.html
#picWrapper {table-layout:fixed;}
ought to work in decent browsers
remember that width on table [*] / table-cell is more akin to min-
width than width.
[*] table with table-layout:auto, the default. The width of the cell
and table ultimately depends on the width of the contents of the cell.
Note also that margins don't have any effect on elements with display:
table-cell. You can eventually use the border-spacing property.
http://www.w3.org/TR/CSS21/box.html#propdef-margin
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow:hidden and display:table
On Mar 3, 2009, at 8:49 PM, Ian Young wrote: That fixes the overflow, but the cell now shrinks to size of image, which is not what we want. No, the cell doesn't shrink. Except maybe sometimes in Firefox 3. I'm not sure why. I think it is a timing issue somehow. Those pages are terribly slow to load over here. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
