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

Filed under:
|
|

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>&nbsp;</label>
                <input type="submit">
            </p>
        </fieldset>
    </div>

© Stack Overflow or respective owner

Related posts about fieldset

Related posts about legend