I came across a strange issue when testing a site in FF.
The situation is this:
box-sizing: border-box is applied to everything.
I have a floated wrapper <div>, with a fixed height.
Inside the wrapper is an <img> with height: 100%.
When I add padding to the wrapper, I expect the wrapper to remain the same height, and the image to remain the same aspect ratio, but shrink to fit the height minus the padding. The width of the wrapper should change to match the new width of the image, plus the padding.
This behaves as expected in Chrome and IE on both OSX and Win7, but in FF the width of the wrapper seems to remain the same as if no padding was added.
Am I missing something, or is this a bug in the implementation of box-sizing in Firefox?
This fiddle demonstrates the issue:
http://jsfiddle.net/3j43Y/1/
Screenshots:
First image is the result in Firefox, the second one is Chrome.
This appears to be a bug, but it's not calculating the width as if no padding is applied. It's calculating the width as if the content (the <img> tag) has the width it would have were there no padding applied. It's then adding padding on top of this incorrectly calculated content width.
i.e. With no padding, the <img> element has a width of 167px. If you then add padding it should shrink (because of the height constraint) and .wrapper's width should now be the width of the shrunken <img> width plus the padding. Instead, (in FF at least) .wrapper's width is the width of the unshrunken <img> width plus the padding (167 + 16).
At least, that's what I'm seeing.
Also, it looks like you can see the same in Chrome (35.0.1916.114) if you toggle the padding rule on/off in dev tools. Initially Chrome gets it right, but then you see the same erroneous behaviour after toggling padding.
#BYossarian's answer is correct. The answer below is a possible workaround when coming across the issue.
Since .wrapper is set to a specific height, we can add the padding to the image and get the desired effect we are looking for.
Demo:
<style type="text/css">
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 100px;
background: #99ccff;
}
.wrapper img {
height: 100%;
padding: 8px;
}
</style>
<div class="wrapper">
<img src="http://placehold.it/250x150" alt="">
</div>
Another way to analyze, it is also necessary to be careful with the statement of the doctype of the document.
If you have an old doctype,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Firefox will not consider box-sizing: border-box;
For html 5,
it is necessary to declare the doctype as follows:
<!doctype html>
it will fix Firefox, it will take the box-sizing correctly.
Related
I'm getting strange behaviour from margins. A vertical scrollbar appears even though I'm no where near the bottom. I assume this is the desired behaviour, considering that I tested this and got the same results in the latest versions of Chrome, IE11 and Firefox.
The following code results in a scrollbar
<html>
<head>
<style>
body {
margin: 0;
height: 100%;
padding: 1px;
}
div {
margin: 15px;
}
</style>
</head>
<body>
<div>Hmm</div>
</body>
</html>
Changing the body's padding to 0.1px results in no margin.
Changing the body's padding to 0px also results in a margin.
Also, adding box-sizing: border-box to the body removes the scrollbar as long as the padding is not zero.
I haven't added a Fiddle because I can't replicate it there. You need to test this in a simple html file.
Is this actually the expected behaviour? Is there a logical explanation why they implemented it like this?
Looks like the reason you're seeing the scrollbar is a combination of defining a height and setting a padding value. The height property dictates the height of an element's content, excluding the margin and padding added onto that value. The scrollbar appears after adding padding because you've set the content of the element's height to 100% of the page, plus the padding, causing the element's entire height to overflow.
Additionally, applying box-sizing to an element makes the height and width properties include padding in the value. Funny thing is, it doesn't include margin. So if you were to apply:
body {
box-sizing: border-box,
margin: 1px,
padding: 0
}
You'd still see the scrollbar. Once understanding that an element's height property, by default, only dictates the height of the content within the element, it makes a little more sense.
Hope this helps :)
Setting the height of the body to 100% makes it take all of the height of it's parent element which is the html element. The html element's width and height in turn are governed by the window it is in. Adding a margin or a border would increase the dimensions beyond the available space thus inducing the scroll.
However, the other issue is that adding the margin to the div is pushing the body down by 15px. This has to do with collapsing margins.
Check out https://stackoverflow.com/a/2680515/6184852 for further information.
So I came across a strange issue today, it only happens in Chrome.
Have a look at the fiddle:
https://jsfiddle.net/m1npLfcm/1/
<div class="table">
<div class="row">
<div class="cell">
<div class="content">
</div>
</div>
</div>
</div>
There is some basic table layout made of DIVs, a table, a row and a cell. All of them have 100% width and height. Inside the cell there's a regular DIV. It has 100% width and height and also some padding.
As we all know default box-sizing: content-box for div would push the boundaries by that padding. So I've made it box-sizing: border-box as I usually do and now I have this strange behavior.
Seems like in this situation, box-sizing: content-box is only applied to the width and height works just fine by default without pushing the boundaries. However if I add box-sizing: border-box - the width gets to work fine but the height gets total vertical padding subtracted from it as if previously content-box acted as it should have been.
Just what the hell is this? It only happens in Chrome and I'm totally confused. Has anyone seen this before and how this should be treated? Brief googling didn't help as this issue is quite hard to describe in a few words.
If you see the padding of 20px is the height you are talking about, since there is no elements or content inside the cell there browser only puts the padding.
In your fiddle I played around with the padding of the content and manage to fix the height with the size(red) with the value I want.
I hope that helps you.
Unfortunately an additional div wrapped around .content is required with a class like .inner that will serve specifically as a padding around content.
In this codepen I've changed a bit the CSS of your fiddle:
set box-sizing: border-box to all elements, as it's essential
replaced .cell with .inner (supported only by evergreen browsers, in IE <= 10 the .cell wrapper should remain)
removed the excessive width: 100% for block-level elements
The border/padding is applied correctly as long as the red background of the .table is covered by the .inner
I've set my html body tag heigth to be 100% but in Firefox that shows as a few more pixels than the screen has, so a nav scroll bar appears. How can I adjust that other than specifiying an arbitrary height :98%? I've set padding and margin to zero.
I'm using only bootstrap for css, if that's of any importance.
Check elements inside the body. One of it probably has margins or even content goes outside the body element. Just try to delete all inner elements one by one in Firefox's dev.tools and notice what element deletion will solve the problem.
Just to follow up the answer above, I noticed that padding can cause the same effect, but can only be noticed when inspecting the elements.
<button class="sbtn">
<span class="text">
my btn
</span>
</button>
.sbtn {
height: 5vh;
background-color: red;
}
.text {
padding: 10vh;
color: white;
}
Try adding this to your main CSS file.
/* CSS */
* {
box-sizing: border-box;
}
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
CSS box sizing
When I put width: 100% for my ul, its border flies off the edge of the page. I tried setting margin-right: 2px to see if that would make a difference, but to no avail. What I thought would happen is that the border would occupy the right edge of the screen, and setting the margin-right would bring it to the left, but this didn't work. Why does it behave this way?
<!doctype html>
<html>
<head>
<style>
#nav {
border: 1px solid black;
width: 100%;
margin-right: 2px;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Local</li>
<li>Weather</li>
<li>Sports</li>
<li>Politics</li>
</ul>
</body>
</html>
You can see the page here: http://www.noetherherenorthere.com/practice/2013-1-5-02.html.
Answers
Browsers use box-sizing: content-box; use border-box instead ~ setek
Choose a smaller percentage ~ Damien Black
Use width: auto ~ Josiah
This happens because the box is being generated using the content-box model: with an explicit width, and then add border and padding to it.
And uls have a left-padding by default, to account for the bullets.
Removing the left padding will stop this, but you won't be able to see the bullets anymore: you could always add a margin onto the lis to counteract this.
Alternatively, if you don't have to support older browsers (IE 6/7) you could use the property: box-sizing: border-box; which will cause the box to render by subtracting the padding and border from the explicit width, rather than adding to it like the content-box model.
EDIT: It's worth noting that IE 6 (and 7, I believe) will generate all boxes as if they were border-boxes anyway. This causes inconsistencies when you start setting widths and applying padding in those browsers vs. modern browsers.
Setting width to 100% does something a little odd in html, it makes the width 100% and the padding, border and margin will all appear outside of that full width.
You'll have to do less then 100% to leave room for the border and margin.
Using 100% will make the main box fill the whole screen, but padding and margin will be excluded. Instead of width: 100% use width: auto. That will make the box fit comfortably and takes into account margin and padding.
Fiddle: http://jsfiddle.net/kfWvr/
i am wondering why the textarea refuses to stay aligned with the containing div?
<!-- the textarea pokes out-->
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%"></textarea>
</div>
It is causing me difficulty in ensuring alignment of elements
By default, a <textarea> element is rendered with a border around it. The problem with this is that when you set the width property on an element, you're only setting the content width, not the total width. The total width of the element is (width + border + padding + margin) so when you set the width on the <textarea> to be 100% it sets the content width to 300px but the total width is that 300px plus the default borders, which causes it to exceed the 300px width of the <div>.
You'll could accommodate these borders in the <div> using padding/margins, but a better solution would be to set the box-sizing property on the <textarea> to border-box to force the width property to define the total width of everything up to and including the border of the element.
You'll need to do a bit of research on that property because it's declared differently in all browsers (e.g. -moz-box-sizing, -ms-box-sizing, -webkit-box-sizing, etc.). Here is the QuirksMode page on box-sizing for you to look through.
The box-sizing fix works for Firefox, but I haven't tested it in other browsers. It's possible that some of them, particularly when in quirks/legacy mode, could also apply a margin to the element. If this is the case, then all you would need to do would be to remove the margins with CSS (AFAIK, there isn't a widely supported option for box-sizing that extends to margins - only ones for content, padding, and border).
I'd suggest being specific with this fix, and only removing the left/right margins (i.e. margin-left: 0; margin-right: 0;) rather than removing margins entirely (i.e. margin: 0;) to preserve any top/bottom margins if they exist (and if you want to keep them). I know Firefox applies a 1px margin to the top/bottom, and other browsers might as well.
I tried that in Firefox, Chrome and IE, and they all show it properly. I suspect that you DIV is inside of another container and that's causing the problem.
Please add a part of your code.
The textarea may have a margin being applied to it. Try this:
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%; margin: 0;"></textarea>
</div>
<div style="border:1px solid #ccc; width:300px">
<textarea style="width:100%"></textarea>
</div>
Tested working on Firefox 3.6.10, Internet Explorer 8 and Google Chrome.
But, maybe instead of enclosing it in a DIV, you can also try this:
<textarea style="border:1px solid #ccc; width:300px"></textarea>
Which about has the same looks as your original code.