Button and div acts differently with the same styles. Actual difference in width: div have 100% of parent width, while button acting like display: inline; with minimal width, no actual inlining. And both have display: block;.
That strange button behavior is what I'm trying to achieve with div. Problem is that 'width: auto;' works in another way. So I'm gave div's same style as button have by default in chrome. As a result there is one property sets differently: -webkit-appearance, but changing it make no sense for width or display property.
Codepen
Also I'm tried to achieve that with display: flex;, but width becomes 100%.
If there's another way do achieve this, it have to deal with parent height: 0px and display: absolute
A button is displayed as inline-block. If you want a div to 'act' the same way
display the div as an inline-block as well. As to why buttons behave this way
see the following post:
button behavior
div{
border:black solid ;
display:inline-block;
}
<button></button>
<div>x</div>
Related
I have a simple span on my page with a class eah-logo-img, and inside of my CSS, I have tried to set the background image for it. However, It is not working for some reason.
This is my HTML:
<span class="eah-logo-img"></span>
and this is my CSS:
.eah-logo-img{
width: 150px;
height: 150px;
vertical-align: middle;
background: url('img/logo_def_white.gif');
background-size: auto;
}
My image is inside of the img folder (inside the same folder as the CSS; so it should be working.).
I have made sure the name is right, and I have checked Chrome inspect element and made sure the link is correct.
I am unsure why this isn't working.
Cheers.
Your span element has no actual width or height – and therefor you do see little of any background, because it is displayed in an area that is 0*0 pixels big.
width and height by definition have no effect on inline elements (which span is by default.)
So add display:inline-block or display:block to your span, or float it, or position it absolutely – so that width and height are allowed to have an effect.
In your css add
display:block
or
display:inline-block
better yet do not use span if you want to define the width and height, use div instead.
I want to center picutes in a span. The span has the class centerMe but it doesn't affect the pictures.
Markup of centerMe:
.region.region-footer .centerMe{
text-align: center;
}
You can find this example on JSFiddle.
Thanks for any help
It is not happening because span is an inline element.
text-align:center does not affect it because total width of images and width of span is exactly same. If you give it 100% width, then only you will see the difference.
Also, width property will not work on inline element so change it to block or inline-block.
Add width to the markup:
.centerMe {
width:100%;
display:inline-block;
}
Updated fiddle here.
Another solution is to use any block element like div,p or section rather than using span.
You can't use text-align: that way on inline elements.
If you want to achieve that, you will have to change your span into i.e. a <p> element, which is a block.
The span itself doesn't have full width, so there is no space to center the images in.
You can solve this by changing the span into a div.
Or you can make it behave like a div by adding display: block to the CSS:
.centerMe{
display: block;
text-align: center;
}
Alternatively, you can give it width: 100%, like Hiral suggested but then you will have to take any borders, padding and margin into account as well. By making it behave like a block element, it will automatically occupy the available space, and I think it is a more flexible solution.
So, I'm using display: table-cell to put two buttons next to each other so that if text from one overflows to the next line, both buttons are the same height. I have border-collapse: separate and am using border-spacing to put space between them. It works just fine if I'm using something like <div class="button">, but as soon as I use the <button> element, the middle space disappears.
JSFiddle: http://jsfiddle.net/uASbb/
Now, using the <div> is fine for now (if not semantically as accurate), so I'm mostly just curious if anyone knows what exactly is going on here.
Note: I've also noticed some (different) weird behavior with using <input> elements in this same situation: http://jsfiddle.net/G5SFX/1/
Is display: table-cell just not supported in these instances? Is this a bug?
Thanks!
EDIT: It seems like you just can't apply a display: table-cell to a button; it just defaults back to inline-block. See this screenshot from Chrome WebInspector:
Now the questions remain: Is this intentional? Is it the specification or is it just the browser? Can we get it changed?
Inserting the button element into a div is a good solution (in your place I would have choose it, too), but if you want to display both button elements side by side with space in between without the help from a div you can try this for your .item class:
.item {
display: table-cell;
width: 46%;
background: aliceBlue;
border: 1px solid black;
margin: 1%;
}
Width is reduced to 46% to allow a margin of 1% around every button element. You have a space between them now, and also if you resize the window the second button element won't fall under the first one.
Example: http://jsfiddle.net/codenighter/H7TZU/
Hope it helps.
EDIT: It seems that border-spacing (in fact none of block styling is working) doesn't work with button or input. But it does working with other inline elements like span, h1 or b. So, for input and button the display: table-cell property can't be properly applied (I've changed the width value for button and input and it showed, while for span and b the width remained actually at 50%).
Examples: http://jsfiddle.net/codenighter/HrTZS/
When a div is styled as "inline", it seems all its dimension variables lost effect.
for example
<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
gives me a big box, but after I add inline style, the box shrink to the smallest size.
for example
<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
My question is, is there a way that I can keep the div inline (same line as some preceded text) and at the same time able to fix its size. (either div or span)
Thanks.
The width of inline elements is ignored. From my experience, in cases like this using a float will solve the issue.
You can also use inline-block, but if you have to support older browsers you may not wish to use this.
The floated div will float to the left of the the nearest block element parent (assuming this parent is also not floated). If you need more control of where the div is floating, add a wrapping (non-floated and block) div around your floated div
Use display: inline-block or (better) display: block; float: left
Use display: inline-block;
PS: inline-block is not available in some older browsers.
In this example, I'm setting width:200px on form labels.
This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.
Any idea why?
label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:
display: block
From there, you could add width:
width: 200px;
float: left;
As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:
#form label {
width:200px;
display: inline-block;
}
Or, as #David mentions, float it left. This article describes getting this to work cross-browser.
This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:
#form label {
display: block;
width: 200px;
}
Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility
http://www.quirksmode.org/css/display.html