Forum Moderators: not2easy
ok ive got a annoying little problem that im stuck on. Ive got a simple fieldset and legend that im trying to apply some css styles to.
basically for the end effect,what im trying to acheive is a sort of Beveled Form.
for the "outer" bevel im using css to style a background image and borders to the fieldset...and another background image and borders to the Legend. (a table with a white background and inverted border colors inside the fieldset creates the "inner bevel")
Anyways, It works just fine in firebird/netscape.
but explorer is mucking it up. no matter what i do
the top of the fieldset's background "begins" a few pixels on top of the legend instead of within the fieldsets borders.
here is a simplified version of what im talkin about...no images here, just solid colors. A red background for the legend and grey background for the fieldset. You can still see the same error in explorer.
<html>
<head>
<style type="text/css">
<!--
fieldset {
background-color: #CCCCCC;
border: 1px solid #003366;
padding: 2px;
}
legend {
background-color: #FF0000;
border: 1px solid #000000;
}
-->
</style>
<title></title>
</head>
<body>
<fieldset>
<legend>Doesnt work in explorer</legend>
<table width="100%" border="0" cellpadding="5" cellspacing=
"0">
<tr>
<td colspan="4">
<p>this greybackground stays within the borders of
the fieldset in firebird and netscape, but rises
above the legend in explorer.?</p>
</td>
</tr>
</table>
</fieldset>
</body>
</html>
ive tried many different combo's trying to position the fieldset's background image so that it stays flush... But i always end up with something that works in firebird/netscape but not explorer..or vice verca
Am i missing something?
I'm afraid you're stuck between a rock and a hard place. As far as I know, there's no reliable solution that works in all browsers. I know we've had discussions about it previously here at Webmaster World... but we came to the same conclusion then.
I know SuzyUK had a nifty solution... but I can't find the thread where she posted it.
I did something here... [webmasterworld.com]
it's not "pixel perfect" across all browsers.. but it does the job!
here's a quick example with main "fix"
(note: this would need to tinkered with ~ IE hacked ~ if padding is involved!)
1. relative positioning of both elements is required.
2. offset the legend by half the line height
fieldset {
background-color: #CCCCCC;
border: 1px solid #003366;
position: relative;
}legend {
background-color: #FF0000;
border: 1px solid #000000;
line-height: 1.5em;
position: relative;
top: -0.75em;
}
It seems that this doesn't bother other browsers I test in so it needn't be put in a "hack" but if anyone else tests it with problems please say so..
Suzy
