For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
Related
Why people add padding:0; on body element? I don't see any point in that. All browsers use default margin:8px; on body not padding. Am I missing something ? Is there any quirks?
* {
margin: 0;
padding: 0;
}
This is part of the "CSS Reset" theory which helps keep your designs consistent across browsers, a very good thing. Unfortunately this is not a good practice. It is very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.
If body { margin: 0; } is used, all other standards compliant browsers (excluding Opera) will set items into the top left corner of the window.
If body { padding: 0; } is used, only Opera (both Mac and Windows) will set items into the top left corner of the window.
The best way to set items into the top left corner of the window is to use body { margin: 0; padding: 0; } which will work for all standards compliant browsers.
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am using HR tag in my HTML page. But the horizontal line is not covering the whole page along X axis. There is a gap at left and right both. How can I fill this gap?
For example, below is a sample code -
<html>
<hr>
</html>
You can do the following -> demo
You have two options that I know of anyways - Using a horizontal line or a div with a top or bottom border.
The reason why you have a space or gap is because browsers comes with different pre-set settings - so you need to set margin and padding to zero. Take a look at the demo.
CSS
* {
margin:0;
padding:0;
}
hr {
margin-top: 30px;
/*so you can see it in demo */
width: 100%
}
.demo {
position: relative; /*so I could use 'top: 30px' */
top: 30px;
/*so you can see it in demo*/
width: 100%;
border-top:1px solid black;
}
HTML
<hr/>
<div class="demo"></div>
Edit: As Ojdo commented, you CAN reset before working on a project using something like this Meyer's Reset OR you can make it 'cross-browser' compatible and use normalize.css from Necolas - this basically tries to make your default css look consistent among several browsers. The choice is ultimately up to you. Start from the ground up or start with something somewhat consistent.
that's because of the margins of the body. try this:
<html>
<body style="margin:0;">
<hr>
</body>
</html>
put this css on the hr:
hr {
margin-left: -8px;
margin-right: -8px;
}
This happens as there is always automatic margin
Here is a fiddle example:
http://jsfiddle.net/ha97t/
The gaps are caused by the default margin of 8px for the body element (which is a common browser default and described both in CSS 2.1 and in HTML5 CR).
You can override the horizontal margins of body rather simply:
body { margin-left: 0; margin-right: 0 }
It is possible to use more extensive overrides, like “CSS resets”, but they could affect your page layout in many ways and do not contribute to solving this problem any better than simply overriding the specific properties for body.
However, removing those margins means that text will run from the left edge of to right edge, often making letters touch the edges. So if you wish to make the horizontal rule extend across the page without affecting anything, set negative margins on it. Then it is best to set the body margins explicitly (to guard against browsers not implementing them according to common practice):
body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }
I have a canvas object in a div. The canvas seems to have a padding around it somehow. I want its edges to touch the edges of the browser screen:
// my html file:
<body>
<div id="canvasholder"></div>
</body>
// my java gwt code
Canvas canvas = Canvas.createIfSupported();
canvas.setWidth("100%");
canvas.setHeight("100%");
RootPanel.get("canvasholder").add(canvas);
but yeah the page still has a ~20px margin around the canvas element. There is nothing else on the page beside what's copied above.
I don't think this is a GWT specific problem, might be that html elements have default padding/margin to them?
Thanks
------ Update ------------
I'm weirdly still seeing the padding, the firebug plugin is showing me that the body element has a 10px margin somehow:
// firebug inspection of the body element:
body {
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none;
color: black;
direction: ltr;
margin: 10px; // huh?
padding: 0;
}
// my css file:
hml, body, div, canvas {
margin: 0px;
padding: 0px;
}
div.logParent {
position: absolute;
top: 20px; left: 20px;
color: black;
z-index: 2;
}
I had similar problem, the absolutely positioned div with canvas inside (added via JS so no extra spaces around) was causing overflow on page when I positioned div at the bottom of the page.
The solution was to set canvas display property to 'block' (didn't know it's 'inline-block' by default at the time) and now no extra padding is added and scrollbars are gone.
As you've correctly noted, browsers implement default styles for various HTML elements (and they're not standardised, so every browser implements slightly different defaults). For your purposes, given your posted HTML, you'd need something like the following:
html, body, div, canvas {
margin: 0;
padding: 0;
}
This does, of course, over-simplify things and it might be worth setting font-size and default color and background-color properties too (among many, many others).
References:
CSS Reset Reloaded, by Eric Meyer.
YUI reset.
And there are many others, though I really can only think of those two, the css-reset might be of use to you, though.
Take this code:
#wh_wrapper #slider .scrollButtons.left {
width: 100px;
}
the width of 100px is being applied only to:
#wh_wrapper -> #slider -> scollButtons left
If I do this:
.left {
width: 50px;
}
all the
.left
classes has now a width of 50px, including the one from before.
Now, I completely understand how to avoid this error (setting specific classes, putting .left before #wh_wrapper #slider .scrollButtons.left etc..) what I'm asking is if there is a way to specify properties that cannot be overwritten by "global" properties.
I hope I was able to explain myself.
Thanks
EDIT:
I now understand !important :-)
But look at this other example:
#wh_wrapper #slider .scrollButtons.left {
width: 100px !important;
}
.left {
width: 50px;
}
Now #wh_wrapper #slider .scrollButtons.left will still be 100px, but what about:
.left {
width: 50px;
border: 1px solid #000;
}
since I haven't decalred a border before I can't put an important on it, still the #wh_wrapper #slider .scrollButtons.left will now have a border property.
Any way areound this?
Yes, put !important behind them:
.class{
height:100px !important;
width: ...etc
}
Watch out though: Internet Explorer 6 and previous versions simply ignore !important, while IE 7 supports them. More info on this can be found here or here.
!important is something to consider, butyou should try to avoid it. Most of the times it can be avoided by building a better html/css tree or adding a class (try to keep them generic though ;)).
#EDIT: You should always put the most generic selectors on top, and the build down to the more specific ones. for example: put a img{} selector on top to provide a global specifier for all your images, then you go down more and more specific.
wrapper img{}
wrapper container img{}
wrapper container div.something img{}
and so on. Don't try to overdo the classes and ID's, the more generic your html/css is the better. containers and wrappers are often overused and unnescessary. Try to write good semantic html and keep html and css seperated. Don't use css when you should us HTML (and vice versa)
Often it is better to create your whole html file, and when everything looks good, provide css for the finishing touch.
Tried !important?
I tested your code in Opera, Chrome, FF and IE and all prefer the first line over the second one, no matter what the order of the rules is. In the sample you pasted there's a space missing in ".scrollButtons.left" - if I use that code then it (of course) always matches the second rule. Are you sure this isn't the problem?