I've setup a demo of my problem at the following url: http://jsfiddle.net/YHHg7/4/
I'm trying to do the following:
legend {
display: block;
border-bottom: 1px solid red;
margin-bottom: 50px;
}
However it seems all browsers ignore the display: block on a legend tag. Is this the correct behaviour for this tag or am I doing something wrong?
<legend> is a block-level element by default, so whether you include display: block there's no difference. However, it's treated specially together with <fieldset> by browsers as a label for a fieldset.
To "detach" it from the <fieldset> you can give it a non-static position, or float it, or even just play a little more with its margins. Results can be a little unpredictable, though, again due to the special treatment of both elements.
IMO the best thing you can do to control legend is just leave it as a semantic fixture only.
CSS:
legend {
display: block;
margin: 0;
border: 0;
padding: 0;
width: 100%;
}
And then use a span inside it to control all of your desired styling:
HTML:
<legend><span>Span to the rescue!</span></legend>
CSS:
legend span {
display: block;
padding: 0 20px;
border-bottom: 1px solid red;
}
Clean, semantic, and generally easily manipulated across different browsers
A legend is a block-level element by default. If I add the width back in using Chrome (Dev channel), the width of the legend is changed appropriately.
If you're instead wondering about the margin style, a legend can only have its left or right margins set, and that would place it relative to the fieldset its's contained in. If you want to add spacing to the other elements, then you would probably want to add padding to the fieldset itself.
Uncomment the width attribute if you want the red line to go all the way across.
legend {
display: block;
border-bottom: 1px solid red;
width:100%;
margin-bottom: 50px;
}
Related
Inside of a parent element which is a paragraph, there is text and a couple of anchor links. These anchor links have their display set to inline-block and the visual result looks like this:
https://imgur.com/a/aLR3Q
Now if I would change the display to inline, the result looks like this:
https://imgur.com/a/TFof9
My question is, why does having the display of the anchors set to inline-block instead of just inline cause this, let's just say "soft line break" ? Because I thought that in terms of line-breaks, both of the displays act in the same way, and don't break at all.
Codepen link for the code: https://codepen.io/Kestvir/pen/zpvmYV
The code for the parent element:
.footer__copyright {
border-top: 1px solid #777;
padding-top: 2rem;
width: 80%;
float: right;
}
The code for the anchors:
footer__link:link, .footer__link:visited {
color: #f7f7f7;
background-color: #333;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: all .2s;
}
The anchors are:
Jonas Schmedtmann
and
Advanced CSS and Sass
The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.
Legend Tags in Webkit browsers seem not to accept any styling besides block and none for the CSS display property:
Here's the HTML
<legend>I should display as an inline block</legend>
<div>I should be on the same line</div>
And here's the CSS (put anything other than block or none as display style)
legend {
display: inline-block;
background: black;
color: white;
-webkit-margin-top-collapse: separate;
}
div {
display: inline-block;
background: blue;
color: white;
}
As you can see in this fiddle, the legend tag will always be styled as a block.
You will also see that despite I applied -webkit-margin-top-collapse: separate, which lets one apply margins to legend tags in webkit despite a quirk, the problem still persists.
I reckon this is a bug although it does not appear in the list of bugs when searching for legend, but does anyone know how to circumvent it?
I was able to get the legend and div to go side by side with the following CSS.
legend {
background: black;
color: white;
float:left;
}
div {
display: inline;
background: blue;
color: white;
}
http://jsfiddle.net/vhNbd/4/
Say I have a
<a class="myclass" href="foo.htm">Click Here</a>
and in css something like this:
.myclass
{
border: 2px solid #000;
padding: 1em;
}
so the <a> looks like a button but it only operates when clicked on the text, not in the whole box. How can I make so that the box also "catches" onClick?
Block will not work well unless you float the element and give it a fixed width. I think "inline-block" would work better.
.myclass{
display: inline-block;
border: 2px solid #000;
padding: 1em;
}
You can see it in action here: http://jsfiddle.net/2tmzL/
Browser support for inline-block is pretty good: http://caniuse.com/inline-block
Wrap the anchor tag around another container element
<a class=".." href=".."><div>Click here</div><a>
< a > is an inline , you have to transform it to a block, try this
.myclass:
{
display:block;
border: 2px solid #000;
padding: 1em;
}
You need to set the css property display: block or inline-block (depending the case...) for your a element.
I seem to be able to click the entire link. Make sure you remove : after .myclass. Also if it's still not working you may like to try adding display:block;
Alternatively in html5 you can wrap the a tag around a block element. This will work in older html though it's not correct.
.myclass
{
border: 2px solid #000;
padding: 1em;
display:block;
}
The issue is that a's are inline elements, and padding doesn't work the way we expect with inline elements. Change the a's to a block level element, and everything should work as you expect (note the removal of the ":" in the CSS declaration, that shouldn't be there):
.myclass {
display: block;
border: 2px solid #000;
padding: 1em;
}
I have two elements in a container:
<div class="container">
<span>This is a div</span>
<button>This is a button</button>
</div>
Styled as follows:
span, button {
display: block;
padding: 4px;
border: 1px solid black;
margin: 5px;
background: #c0c0c0;
font: inherit;
}
.container {
border: 1px solid black;
}
You can see a live demo here.
Why does the button not appear the same width as the span? How can I make the button behave like a standard block-level element?
I need to use a <button> here because its purpose is to submit the form.
This should do the trick. Live example: http://jsfiddle.net/925qz/18/
.container {
border: 1px solid black;
padding: 5px;
}
span, button {
display: block;
padding: 4px;
border: 1px solid black;
background: #c0c0c0;
font: inherit;
}
button{
width:100%;
margin-top: 5px;
text-align: left;
}
I'm expecting there to be some ruleset that makes them both
behave like <div>s
There isn't. The reason is that button is a "replaced element".
The clearest source I could find on this was: http://reference.sitepoint.com/css/replacedelements
A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.
Replaced elements can also have visual formatting requirements imposed
by the element, outside of the control of CSS; for example, the user
interface controls rendered for form elements.
Separate the span and button selectors, then add width to the button selector.
Browsers often ship with divergent default styles for many elements. Header elements such as h1 and h2, ul, strong and em all are styled with default CSS. A general tactic is to use something like the Yahoo! reset css stylesheet to remove these styles for better cross-browser appearance.
This would not immediately help with your button problem, but partly explains it. Internally, complex elements within browsers such as the button are defined by HTML that you don't have access to as a user. This internal HTML is also styled via CSS. In the case of a button you'll have to use explicit CSS to style it in ways other than the browser has been instructed to. Give it a width and understand that internal padding rules may give it divergent appearance from a div or span with similar rules.
Form elements use a different box-model in pretty much every browser. That’s why they never actually have the same size as the other elements, even if all have the same dimensions set. I also found a bug report from Firefox for this problem: https://bugzilla.mozilla.org/show_bug.cgi?id=562153
I always put the following code in my reset stylesheet to have a more even working ground:
select, input, textarea, button {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The code works from IE8 and up and all other major browsers, according to PPK: http://www.quirksmode.org/css/contents.html
When you apply a width of 100% (like block elements usually have) to the button it will ignore the padding! I had this problem a few days ago:
<button> padding / width problem
If u want to fill out all of the width and apply padding, this should do the job:
button {
width: 100%;
/* prefixes for box-sizing here */
box-sizing: content-box;
}
Of course the total width will be 100% + the padding, so it'll be more than you want. You may have to take a fix width, because of that.
http://jsfiddle.net/925qz/30/
How I corrected it:
The padding for left and right is set but the all around its managed by the container
The width is 100% for the button.
Lastly the button's separation is managed by top 5px margin.
span, button {
display: block;
padding-top:4px;
padding-bottom:4px;
border: 1px solid black;
background: #c0c0c0;
font: inherit;
}
button{
margin-top:5px;
width:100%;
}
.container {
border: 1px solid black;
padding:5px;
}
I just wonder where is this space between the end of the image and the end of the li's are coming from:
http://bluesys.ch/lussy/
its just a simple UL > li > img
spacing from hell http://bluesys.ch/lussy/spacingfromhell.jpg
code:
div#slider {
border: 5px solid #fff;
}
div#slider ul li {
border-bottom: 1px solid pink;
}
div#slider ul li img {
border-bottom: 1px solid green;
margin: 0;
}
note that all margins and paddings are set to 0 by my reset.css
can someone help me out? I colored the borders that you can see the spacing i speak of. I use firefox.
Try setting the line-height to 0 for those images and/or LI elements. Currently you have that set to 1.4 in the body, and the img will inherit that. A brief test of setting line-height: 0 in Firebug made the images stack flush.
If you want to get rid of the gaps, you could try:
li {
margin-bottom: 0;
padding-bottom: 0;
}
You may want a special class for those li elements tho, so that the CSS that gets applied doesn't do it to ALL your li elements on the site.
But, what's wrong w/ the gap? I kind of like it. Helps frame each image...
Images are inline elements just like text and by default they are positioned on the font base line leaving space for the ascender. There are different ways to stop that:
line-height: 0 (as suggested by Robusto)
display: block
vertical-align: bottom