Databases
StackOverflow2013
Postsdbo
POi want to have some cross browser consistency on my fieldsets, do you know how can i do it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POi want to have some cross browser consistency on my fieldsets, do you know how can i do it?
    text
    copied!<p>i have this problem with fieldsets... have a look at</p> <p><a href="https://i.imgur.com/IRrXB.png" rel="nofollow noreferrer">http://i.imgur.com/IRrXB.png</a></p> <p>is it possible to achieve what i want with css??? believe me, i tried!</p> <p>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.</p> <p>heres the the core i'm using.</p> <p>CSS</p> <pre><code> &lt;style type="text/css"&gt; 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;} &lt;/style&gt; </code></pre> <p>HTML</p> <pre><code> &lt;div id="md"&gt; &lt;fieldset&gt; &lt;legend&gt;some title&lt;/legend&gt; &lt;p&gt; &lt;label&gt;Login&lt;/label&gt; &lt;input type="text" /&gt; &lt;/p&gt; &lt;p&gt; &lt;label&gt;Password&lt;/label&gt; &lt;input type="text" /&gt; &lt;/p&gt; &lt;p&gt;&lt;label&gt;&amp;nbsp;&lt;/label&gt; &lt;input type="submit"&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload