i want to have some cross browser consistency on my fieldsets, do you know how can i do it?
Posted
by Omar
on Stack Overflow
See other posts from Stack Overflow
or by Omar
Published on 2010-04-23T22:56:00Z
Indexed on
2010/04/23
23:03 UTC
Read the original article
Hit count: 377
i have this problem with fieldsets... have a look at
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>
© Stack Overflow or respective owner