I'm trying use image replacement for a form legend and so far i've been
unsuccessful. Firefox insists on making it much to tall, for some
reason, so the text shows up below. Setting background-repeat to
no-repeat got rid of the tiling, but the text remains below the image.
Also, i've had to add 6px padding-right because the image was being cut
off (adding 6px to the width did nothing). I've confirmed that the image
is 54 x 8 pixels.
I've also tried setting line-height, but that just drew the text up snug
below the image.
I can't put a page up now, but here're the relevant bits:
-- snip --
<fieldset>
<legend id="register_optional">Optional</legend>
-- snip --
-- snip --
#register_optional
{
display: block;
width: 54px;
height: 0;
line-height: 8px;
margin: 0;
padding: 8px 6px 0 0;
overflow: hidden;
background-image: url(path/to/image);
background-repeat: no-repeat;
}
-- snip --
I have no other styles in place for legend. Can anyone think of some
other default rules for legend that might be causing this?
brian
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
