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.
Related
I have a simple list of divs, with the exception that one div is an inline-block
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
...
div {
background-color: #000;
color: #fff;
line-height: 20px;
font-size: 20px;
}
div:nth-child(5) {
display: inline-block;
color: #bada55;
}
DEMO
all looks just fine (font-size :20px). However, when I change the font-size to 10px things are getting weird
DEMO
Although I can fix it by adding
body { font-size: 0 }
DEMO
I still don't understand why it did work with a line-height and font-size of 20px ? Any suggestions ?
Because the inline one has to be positioned inside the line height of its container.
If you set the container's line-height to 10px (the body in your examples) it will work fine.
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
Here's a fiddle that shows my code in action
The result seems crazy to me: in Chrome second button is slightly above the first.
In Firefox it is slightly below.
<div id="accounts">
<button class="account">
<h1>VISA Card</h1>
<span class="balance">-433.18</span>
</button>
<button class="account">
<h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
<span class="plus-text">Add Account</span>
</button>
</div>
What is even more confusing is that padding on the h1.plus affects the position of the whole div.
What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?
UPDATE:
Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.
You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.
This is a diagram from the specs which illustrates exactly that:
You can see in the first two boxes how padding and the font size of the content influence the positioning.
As a fix, use vertical-align: top or bottom, or even middle.
Edit: The image is from the table section and the situation is slighty different for inline-blocks.
Add this to your button.account: vertical-align: middle; .
And you can lose the display: inline-block; property, as it is not needed.
Check below code
button.account {
display: block;
float: left;
height: 80px;
margin: 10px 10px;
padding: 10px 5px;
width: 170px;
}
.account h1 {
font-size: 16px;
height: 16px;
margin: 0 0 5px;
padding: 4px 0 2px;
}
.account .balance {
display: block;
font-size: 24px;
}
.account h1.plus {
font-size: 24px;
padding-top: 0px;
}
Here is the fiddle http://jsfiddle.net/Gq3U8/13/
If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.
.account {
display: inline-block;
vertical-align: top; /*add this one*/
margin: 10px 10px; /*remove this one then can see whitespace*/
}
My CSS:
h1 {
background-color: #f7953d;
color: #FFF;
width: 100%;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
}
My HTML
<h1>Hello World</h1>
The background color is always stretched to 100% of the screen. How do I make the background color stop after "World" in the h1 tag, and not go all the way to the end of the screen?
H1 is by default a block element and so will span the full width of its parent container you want to make it an inline element (much like a span) in order for it to only be as wide as its contents.
There are 2 possible solutions dependent on your compatability needs
display:inline;
will achieve the effect your after however it does mean that whatever follows your H1 could appear on the same line.
display:inline-block;
Has the effect your after while still forcing anything following it to appear below the H1 the only downside to this is it can throw up some issues in IE<8 see quirksmode for more details
You can do this by adding display: inline-block; to the CSS for your <h1>. This will make it use only as much width as its contents and still respect the margin and padding you give it.
I would suggest something like this:
HTML:
<h1>Hello World</h1>
<div class="clear"></div>
<p>Elements after unafected by float</p>
CSS:
h1 {
background-color: #f7953d;
color: #FFF;
padding: 6px 0 6px 10px;
margin-bottom: 10px;
float:left;
}
.clear {
clear:both;
}
This works consistently (unlike inline-block which isn't supported by all browsers).
An inline of the element is probably not what you want since you require padding.
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.)