i want to have some cross browser consistency on my fieldsets, do you know how can i do it?
- by Omar
i have this problem with fieldsets... have a look at
http://i.imgur.com/IRrXB.png
is it possible to achieve what i want with css??? believe me, i tried!
as you can see on the img, i just want the look of the legend to be consistent across browsers, i want it to use the width of the fieldset no more (like chrome and ie) no less (like firefox), dont worry about the rounded corners and other issues, thats taken care of.
heres the the core i'm using.
CSS
<style type="text/css">
fieldset {margin: 0 0 10px 0;padding: 0; border:1px solid silver; background-color: #f9f9f9; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}
fieldset p{clear:both;margin:.3em 0;overflow:hidden;}
fieldset label{float:left;width:140px;display:block;text-align:right;padding-right:8px;margin-right: 2px;color: #4a4a4a;}
fieldset input, fieldset textarea {margin:0;border:1px solid #ddd;padding:3px 5px 3px 5px;}
fieldset legend {
background: #C6D1E8;
position:relative;
left: -1px;
margin: 0;
width: 100%;
padding: 0px 5px;
font-size: 1.11em;
font-weight: bold;
text-align:left;
border: 1px solid silver;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#md {width: 400px;}
</style>
HTML
<div id="md">
<fieldset>
<legend>some title</legend>
<p>
<label>Login</label>
<input type="text" />
</p>
<p>
<label>Password</label>
<input type="text" />
</p>
<p><label> </label>
<input type="submit">
</p>
</fieldset>
</div>
