Sent by Zoe M. Gillenwater on 23 September 2004 23:11
mark drayton wrote:
>Hi
>
>Apologies if the solution to this is well-known; I've spent a long time
>searching but can't find it.
>
>I'd like a page that is blank except for a horizontally-centered image
>with a 1px border and 4px of whitespace seperating the image and border.
>
>The following works a treat in Mozilla:
>
>body {
> text-align: center;
> margin: 0;
> padding: 25px;
>}
>
>#wrapper {
> margin: 0 auto 0 auto;
>}
>
>img {
> border: 1px solid #666;
> padding: 4px;
> background: white;
>}
>
><body>
><div id="wrapper"><img src="image.jpg" alt="blah" /></div>
></body>
>
>Of course, this won't work in IE because its broken box model includes
>the image padding as the width of the element, meaning the white
>background is no longer visible.
>
>This can be solved with:
>
>#wrapper {
> margin: 0 auto 0 auto;
> background: white;
> border: 1px solid #666;
>}
>
>img {
> margin: 4px;
>}
>
>However, this only works in IE if I specify the width and height of
>#wrapper as the image size + 8px (margin x 2).
>
>
IE will expand a container to hold it's content. What happens if you
just set the width to say, 1px? Does IE expand it anyway, and still
leave the gap between the border and the image? If so, you could use a
modified version of the Holly Hack to just feed IE this width:
/* hide from MacIE \*/
* html #wrapper {
width: 1px;
height: 1px;
}
/* end hide */
Zoe
--
Zoe M. Gillenwater
Design Specialist
Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
