I'm trying to use a <legend> as a title inside a <fieldset>.
In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.
I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.
Here's the CSS I have so far.
fieldset legend {
margin: 0;
padding: 0;
position: static;
border: 0;
top: auto; left: auto;
float: none;
display: block;
font-size: 14px;
line-height: 18px;
}
But the legend is still perfectly centered on the line.
Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)
Update
I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept #jnpcl's answer.
This is enough :
form legend{
float: left;
width: 100%;
}
https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp
Simply put, it is not possible across
browsers to position the LEGEND
element in a Fieldset.
Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.
I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;
This is a very old question, but still high in Google, so I'd like to share a solution that works for me (targeting only more modern browsers for the best experience).
fieldset: {all:unset};
legend:{all:unset};
this does the trick for me, unsetting all values to defaults. From there on I can happily style on a "clean-sheet".
According to the specification, here is the default styling of the fieldset and legend elements. By resetting those properties, you can have a clean legend element to work with.
As per HTML - Living Standard, the below styles are working like a default:
fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
border: groove 2px ThreeDFace;
padding-block-start: 0.35em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
padding-inline-start: 0.75em;
min-inline-size: min-content;
}
legend {
padding-inline-start: 2px; padding-inline-end: 2px;
}
According to the specification, the legend is only a "rendered legend" if it is float: none.
This means that by doing:
<fieldset>
<legend style='float: left'> Heading </legend>
<div class='clearfix'></div>
<!-- Your form elements here -->
</fieldset>
This makes the legend behave like a normal (if floated) element.
Note: clearfix is the Bootstrap clearfix class:
.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
display: table;
content: " ";
}
(A similar answer was posted already, but this does not include the clearfix trick, and the reference to the specification which shows that this is not a random but, but specified behaviour that is reliable.)
Related
Friends,
My question is why Firefox adds additional pixel (padding) below the box if I use display: inline-block?
Let's see what we have here: http://jsfiddle.net/xbU5s/9/
HTML - Two perfectly same elements.
<div class="wrap">
<section class="ib">Hello world</section>
<section class="il">Hello world</section>
</div>
CSS - Everything is the same, but our first section is inline-block and second one is inline.
.wrap { font-size: 0; }
.ib { display: inline-block; }
.il { display: inline; margin-left: 10px; }
section {
background: #000; border-radius: 3px; color: #fff; font-size: 11px; font-family: Sans-serif;
padding: 3px 5px;
}
And here's our 1px padding:
display: inline-block; vs display: inline;
Is is just rendering glitch (cause it's only happens in firefox) or I'm misinformed about inline-block's behavior?
Perhaps the answer is already explained here in old post
I will like to clear the difference..
If the element is with style display:inline the style restricts the object in line-height.
But, when block comes with inline the behavior of the same changes.
It is inline but with block it will expand to the possible height or width available.
For a change. select the text in both the box, you will see the second box is selecting out of the box. that is overflow of line-height which is restricted by inline but with inline-block it will grow with overflow caused by padding + line-height
I think this will clear most of the doubts, please refer the old post for more details.
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.
I'm trying to use a <legend> as a title inside a <fieldset>.
In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.
I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.
Here's the CSS I have so far.
fieldset legend {
margin: 0;
padding: 0;
position: static;
border: 0;
top: auto; left: auto;
float: none;
display: block;
font-size: 14px;
line-height: 18px;
}
But the legend is still perfectly centered on the line.
Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)
Update
I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept #jnpcl's answer.
This is enough :
form legend{
float: left;
width: 100%;
}
https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp
Simply put, it is not possible across
browsers to position the LEGEND
element in a Fieldset.
Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.
I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;
This is a very old question, but still high in Google, so I'd like to share a solution that works for me (targeting only more modern browsers for the best experience).
fieldset: {all:unset};
legend:{all:unset};
this does the trick for me, unsetting all values to defaults. From there on I can happily style on a "clean-sheet".
According to the specification, here is the default styling of the fieldset and legend elements. By resetting those properties, you can have a clean legend element to work with.
As per HTML - Living Standard, the below styles are working like a default:
fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
border: groove 2px ThreeDFace;
padding-block-start: 0.35em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
padding-inline-start: 0.75em;
min-inline-size: min-content;
}
legend {
padding-inline-start: 2px; padding-inline-end: 2px;
}
According to the specification, the legend is only a "rendered legend" if it is float: none.
This means that by doing:
<fieldset>
<legend style='float: left'> Heading </legend>
<div class='clearfix'></div>
<!-- Your form elements here -->
</fieldset>
This makes the legend behave like a normal (if floated) element.
Note: clearfix is the Bootstrap clearfix class:
.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
display: table;
content: " ";
}
(A similar answer was posted already, but this does not include the clearfix trick, and the reference to the specification which shows that this is not a random but, but specified behaviour that is reliable.)
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better
I've looked everywhere but to no avail.
I got a <legend> in a form, which displays as I want in every browsers, except in Chrome. It's like it sits outside of the fieldset, or it's like it goes on top of the next element. And it's very annoying. I can't even put margins on it.
Why does it display like in that way?
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;
}
This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.
Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
http://jsfiddle.net/JLsPs/1/
(answer found here: Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit))
I have struggled with this issue many times, eventually leading to my abandoning the legend tag until recent, where I have begun using it again to add more semantic meaning to my markup.
Here is a fix I have devised to control the appearance of the legend tag's layout in relation to it's 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; */
}
From the example I provided above, in order to achieve the bottom "margin" on the <legend> tag that you desire, you'll just apply a top padding to the fieldset equal to the amount of top and bottom margin you desire plus the explicit height of the legend tag. This pushes down the <legend>'s siblings down appropriately.
If you haven't explicitly set the height of your legend, you can just check it out in the metric tab of either Firebug or Chrome Developer tools, as the font-size will affect the height of it.
But yeah, pretty simple solution, I just ran into it again a few days ago when working on a client project. Then came across this question, as I was trying to do more research on it today.
Edit: I realized after posting this answer that in my original fix, I applied the padding to a parent <div> of the <fieldset> because for some reason Firefox starts the top:15px; from the bottom of the top padding, when the padding is applied to the <fieldset>. Putting the padding-top and position:relative; on the parent div allowed the <legend> to position absolutely over the padding instead of being pushed down by the padding. I have edited the code above to reflect my findings. This solution which started out simple, is less attractive to me now, but it definitely works. Here is a page that I created, testing two methods of positioning the <legend> tag: Legend tag positioning: http://dl.dropbox.com/u/37971131/css-testing/forms.html
The method proposed by Stephan Muller only works if the HTML element following the is visible. As in my case, this is not always possible without potentially large restructuring of the HTML code. Thus, in addition to his CSS code
legend + * {
-webkit-margin-top-collapse: separate;
margin-top: 10px;
}
just apply the following jQuery command, which basically just inserts an empty div (having a height of 0 px) but now matches the CSS selector adding the margin in every case:
$('legend + *').not(':visible').each(function() {
$('<div></div>').insertBefore($(this));
}
If updating the templates is not possible, you can use this script, just wrap the legend tag inside a div tag
jQuery('legend').each(function() {
jQuery(this).wrap( "<div></div>" );
});
Hope this helps! Enjoy coding..