Legend and Chrome

Question

I looked everywhere, but to no avail.

I got a <legend> in a form that displays as I want in every browser except Chrome. He seems to be sitting outside the field, or he, like him, comes out on top of the next element. And it is very annoying. I can’t even put fields on it.

Why is it displayed the same?

And is there a workaround?

HTML:

  <fieldset class="col-12-box-bottom add-extras"> <legend class="plus">Add Promotion Code</legend> <ul id="promo-fields"> <li><input class="field-small" type="text" /></li> <li><button class="but-sec" type="submit">Apply</button></li> </ul> </fieldset> 

CSS

 .add-extras legend{ width: 260px; height: 0px; border: 1px solid red; display: block; margin-top: 10px; } .add-extras fieldset{ position: relative; } .add-extras ul{ padding: 0 0 20px 0 !important; overflow: hidden; } .add-extras li{ list-style-type: none; float: left; margin: 0 18px 0 0; } .add-extras li:last-child a{ color: #afafaf; display: block; margin: 27px 0px 0 0; } fieldset.add-extras{ margin: 0px 0 23px 0; } .add-extras label{ float: none; display: block; text-align: left; width: 110px; font-weight: bold; margin: 0 0 5px 0; } 

Answer 1

This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but instead you can add margin to the first element that follows the legend.

In addition, you will need to explicitly set -webkit-margin-collapse: separate on this element for it to work correctly. Try using this:

 legend + * { -webkit-margin-top-collapse: separate; margin-top: 10px; } 

http://jsfiddle.net/JLsPs/1/

(answer found here: Unable to add `margin` to` <legend> `element in Safari and Chrome (WebKit) )

Answer 2

I came across this problem many times, eventually, as a result of abandoning the legendary tag until recently, when I started using it again to add more semantic meaning to semantic markup.

Here is a fix I developed to control the appearance of the layout of a legend tag regarding its siblings:

Markup:

 <div class="fieldset"> <fieldset> <legend>Form Section</legend> <div class="field_row"> <label for="first_name">First Name</label> <input id="first_name" name="first_name" type="text"> </div> <div class="field_row"> <label for="last_name">Last Name</label> <input id="last_name" name="last_name" type="text"> </div> </fieldset> </div> 

Styles:

 .fieldset { padding-top:48px; /*legend height(18px) + top value(15px) + bottom spacing(15px) */ position:relative; } legend { height:18px; /* Default Height of non-styled legend element with default font-size of 16px as tested at time of this posting */ left:15px; /*margin:15px 0;*/ /* Margins initially trying to achieve */ position:absolute; top:15px; /* replaces top margin-top:15px; */ } 

In the above example, to reach the bottom “field” in the <legend tag you want, you simply apply the top padding to the set of fields equal to the sum of the top and bottom fields you want plus the explicit height of the legend tag. This appropriately discards "brothers" and "take."

If you did not specify the height of your legend, you can simply check it on the Metric tab of the Firebug or Chrome Developer tools, as the font size will affect its height.

But yes, a fairly simple solution, I just came across it a few days ago when I was working on a client project. Then I came across this question, since today I tried to do more research.

Edit: after posting this answer, I realized that in my original patch, I applied the add-on to the parent <div> in the <fieldset>, because for some reason Firefox runs the top: 15px; from the bottom of the top margins when the overlay is applied to the <fieldset>. Room top and position: relative; on the parent div allowed <legend> to position absolutely above the padding instead of being pushed back off. I edited the code above to reflect my findings. This solution, which started simply, is now less attractive to me, but it definitely works. Here is the page I created by testing two methods for positioning the legend tag>: Positioning Legend tags: http://dl.dropbox.com/u/37971131/css-testing/forms.html

Answer 3

The method proposed by Stefan Muller only works if the type of HTML element follows it. As in my case, this is not always possible without a potentially large restructuring of the HTML code. Thus, in addition to its CSS code

 legend + * { -webkit-margin-top-collapse: separate; margin-top: 10px; } 

just apply the following jQuery command, which basically just inserts an empty div (with a height of 0 px), but now matches the CSS selector, adding margin in each case:

 $('legend + *').not(':visible').each(function() { $('<div></div>').insertBefore($(this)); } 

Answer 4

If updating templates is not possible, you can use this script, just wrap the legend tag inside the div tag

 jQuery('legend').each(function() { jQuery(this).wrap( "<div></div>" ); }); 

Hope this helps! Enjoy the coding ..