I've set a style on <html>:
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
If the contents of the page are wider than the page, why does the border stop, but the background keep going?
Here's a fiddle that show the problem : http://jsfiddle.net/rPGyc/3
html is a proper block-level element, just like body, p, div, etc — it therefore observes all the same overflow rules as other block elements do.
However, the reason why the background of html bleeds past its border when content overflows its width (or when its width is less than 100% of the browser window, or viewport), is because the background color is propagated to the viewport, which is the canvas containing html and all its contents that are rendered. The border remains part of the html element, however, so the element doesn't expand when the content overflows. This behavior is very similar to how applying a background to body, but not html, causes the body background to propagate to the root element anyway, as described in this answer which cites this section of the spec.
As Alohci notes in a comment under the answer, the same applies to html with respect to the viewport:
Note that html behaves with respect to the viewport in much the same way as body behaves with respect to html, with the background escaping beyond the confines of the html element. See http://jsfiddle.net/GmAL4/4/ to see what I mean.
Here's a little fix using jquery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
I know it's lame that css alone don't seem to work fine but at least we can have the wanted result with jquery.
here'S the fiddle : http://jsfiddle.net/rPGyc/5/
A way to prevent that is using the css3 word-wrap property. Jsfiddle here
Simply add:
html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
Related
In my answer to another question I noticed the CSS resize handle icon of a parent div can be obfuscated by an img. In that answer it doesn't really matter, as background is more appropriate anyway and could be used instead.
However, let's say (for some bizarre reason) you wanted an img inside a resizeable div, how could you bring the icon above it?
I wasn't sure if it was just an optical illusion of some kind, so I used a colour wheel with a white centre to test it:
div{
resize:both;
overflow:hidden;
height:400px;
width:400px;
border: 1px solid black;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>
Here is a browser comparison:
Edge and IE don't support CSS resize so they couldn't be tested. I believe Opera uses the same Engine as Chrome so it's no surprise they both failed. However, it works as you would expect in Firefox. Is there a fix for Blink?
At first, I thought about the ::-webkit-resizer pseudo element, but upon further testing, I found out that it only considers textarea elements, not other elements that uses the resize property. Here's a fiddle showing this behavior.
Also, notice that even on the textarea element, ::-webkit-resizer style changes only kick in after it reaches a certain height (Very very small). This is also reproducible through the fiddle above.
Given that, it seems to me that the best alternative to "fix" this bug is to use a custom JS resizer lib.
A (rather monkeypatchey) pure css workaround is to apply a negative z-index to the child img
div{
resize:both;
overflow:hidden;
height:400px;
width:400px;
border: 1px solid black;
}
img {
position: relative;
z-index: -1;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>
I noticed that the html tag won't change it's height or width. I was wondering if there was a way to do that or if the html tag will always fill the available space?
for example:
html{
width:300px;
height:300px;
background-color:blue;
}
You can set the dimensions of the html element in CSS just as you have done in your sample code. You can see that they are applied, e.g. by adding outline: solid red to rule.
Setting the dimensions does not have much effect, though. In particular, setting background color on html still affects the entire canvas. According to CSS 2.1 spec, section 14.2 The background, it is recommended to set background on body rather than html. If you set on html, it “becomes the background of the canvas and covers the entire canvas”.
And if you set background on body, a special rule applies, saying that the background will be used for the entire canvas (as if it had been set on html), if the html element has transparent background and no background image, which is the default. Thus, you can avoid the effect by also setting background on html. Example:
html {
background: white;
}
body {
width:300px;
height:300px;
background: blue;
}
I don’t see why you would do that, though. If you really want the page content appear in a 300 by 300 pixels box, the normal way is to wrap it in a div container and set dimensions and background on it:
<style>
.stuff {
width:300px;
height:300px;
background: blue;
}
</style>
<body><div class=stuff>Content goes here.</div></body>
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 7 years ago.
I am confused about size of body tag in html.
I have a tough code as follows:
<body>
</body>
body{
padding: 0px;
height: 100px;
background-color: #e5e5e5;
}
Why does background cover all of the page?, I thought it should only cover 100px,
Please explain this for me, thank for your help!
This is indeed confusing, but it is specified in the CSS 2.1 specification, clause 14.2 Background: if the computed value of background-color is transparent and the computed value of background-image is none for the html element (as things are by default), browsers must instead use the computed value of the background properties for the body element and must not render a background for body (i.e. make it transparent). That is, body background magically turns to html background if html lacks a background of its own – and this only affects background properties, not the true height of the body element.
I haven’t seen any rationale for this odd rule, which prescribes a kind of “reverse inheritance”. But it’s clearly specified in CSS 2.1 and applied by browsers.
As explained in other answers, you can make your content have a background of specific height either by setting a background on html (so that body background is really applied to body only) or by using wrapper element inside body and setting height on it (since the special rule applies to body only).
Thanks to Anne van Kesteren who pointed to the CSS spec when I asked about this in the WHATWG mailing list. (I thought I knew CSS 2.1 by heart but really didn’t. ☺)
The body is a special HTML tag, and ordinarily covers the entire HTML page. Try the following:
<body>
<div id="content">
Content goes here
</div>
</body>
and the CSS to accompany it would be:
body{
/* whatever body related codes you'd like to use go here */
}
#content{
padding: 0px;
height: 100px;
background-color: #e5e5e5;
}
Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.
The confusion is understandable. In the beginning, both were treated similarly, with attributes like background-color being applied to the body tag, affecting the whole page.
EDIT: To simplify thing i have added a fiddle to demonstrate how the background-color gets applied.So if you specify the background color for the body and you DONT want it to spread to the whole page you must specify the background-color for HTML too
FIDDLE
CSS
html{
background-color:yellow;
}
body{
padding: 0px;
height: 100px;
background-color: red;
}
You should explicitly specify a background color for the html tag (as browsers add it automatically), otherwise, the background of the body is spread all over the document.
On a div I have css set:
div.class {border: 1px solid red;}
The div is positioned absolutely in the center of the page. The problem is that the border appears even if there is no content.
Any css methods to get the border to not appear if there is no content?
CSS3 has a selector defined for this case. It does not work in IE8 and lower though.
div.class:empty {
border: none;
}
Your best option would be to tweak this on the server side, and simply don't display that div if it would be empty.
If the div can have content related to a server response, you can tell whether it is an empty or a filled response and change to display:none or display:block accordingly
I would like to have a border around the entire body of my web page.
I have created a layout that has a body with several div tags inside of it. I added CSS that I assumed would put a border around all content. Unfortunately the last two divs in my layout are, for some reason, being placed outside of the border.
This is the CSS I am using for the body:
body
{
position:relative;
top:5px;
width:1024px;
background-color: #f7f7f7;
padding: 5px;
border:1px solid #151515;
margin:auto;
font-family:Calibri;
}
I suspect that the reason the border is not displaying as I wish has nothing to do with this CSS. You can view the site here if you would like to see the complete CSS/HTML: http://sprocket-tools.com/
I won't bloat this post by including the verbose HTML/CSS. If you need more details on the HTML/CSS aspect please visit the link.
You have floated your DIVs, which causes the parent element to collapse. You need to have an element below them that clears, forcing the parent element to not behave this way.
<div style="height:0px; clear:both;"></div>
Put that above your </body>. That should do.
See this: http://css-tricks.com/all-about-floats/ Start with the section, "The Great Collapse"