Sent by Michael Landis on 30 November 2003 22:10
Steve wrote:
> I just wondered if I need to apply a box hack to this class as in
> IE5.01 in windows the box created by the border is longer than the
> image but in mozilla and IE 6 everything is fine.
I assume that you meant that in IE 5 the box was smaller than it should be?
This is what typically happens when an element has width and padding/border
-- IE 5's width includes the padding and border, while compliant browsers
define the width then add padding then border outside of it. I'm framing
the rest of my answer on this assumption.
(I am editing the style to show only the relevant pieces.)
> .announce {
> background: url(../images/liveDates.jpg) no-repeat;
> padding: 5px;
> padding-bottom: 29em;
> border: solid 1px #D2D2FF;
> width: 180px;
> }
Margins don't impact the box size.
If you can afford a two-pixel discrepancy between IE 5.x and others, you
may not need any hacks. Since IE 5.x subsumes horizontal padding and border
widths into the box width, if you remove the horizontal padding and move
those pixels into the box width, then you only have the border width
difference:
..announce {
/* I've added the positioning for the image, so that it stays
centered and the outer pixel on each side get chopped instead
of chopping two from the right side. */
background: url(../images/liveDates.jpg) no-repeat center top;
/* The single zero duplicates to fill both left and right values.
I've also added the 29em bottom padding to the general
declaration, for the heck of it. ;) */
padding: 5px 0 29em;
border: solid 1px #D2D2FF;
width: 190px;
}
Keep in mind that most people outside of the web design community only have
a single preferred browser, so they won't be switching back and forth
between IE 5 and Mozilla, for example, to see the 2px difference from the
border.
If you needed the horizontal padding for content inside that container, you
can add margins or padding to that content, such as
..announce p {
margin-left: 5px;
margin-right: 5px;
}
If you *must* ensure identical widths (because you have other boxes in the
same column that are defined in such a way that they won't all compact for
IE 5 in the same way), then you'll need a hack. Take a look at
http://css-discuss.incutio.com/?page=BoxModelHack for a variety of possible
hacks. Some are simpler than others, take your pick!
Now, if you meant "longer" as in *taller*, there's a very good reason why
there could be problems. Since you use ems for the vertical padding, you
can pretty much be guaranteed of missing the proper box size, since you'll
end up with a box whose height is dependent upon the font size. For box
dimensions that are based upon image dimensions, pixels are the only way to
go unless you plan to do some fancy cropping exercises in the way that
http://devedge.netscape.com does.
HTH,
MikeL
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
