I haven't found a clear solution for this problem, so I decided to create this topic. There is a very annoying Firefox feature:
<!DOCTYPE html>
<html>
<head>
<style>
div{
line-height: 0;
margin: 0;
padding: 0;
border: 0;
width: 31px;
height: 50px;
font: 15px Verdana;
background: #0F0;
}
</style>
<body>
<div>test</div>
</body>
</html>
Here is the result (200%):
As you see, top padding in Firefox is bigger (6px) than top padding in other browsers (5px).
How to solve this?
EDIT: any css reset doesn't fix it.
This is usually the case when there is no default value normalization being done in your css, which is why such tools such as the normalize.css and the reset stylesheets have come about. Such tools try to normalize and reset the default values set by the user agents (browsers).
Try yui-reset. It can remedy problems like these and other differing default behavior across browsers.
http://developer.yahoo.com/yui/reset/
put this on top of your css:
DIV { /*let Firefox stick to the padding web standards*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 5 years ago.
I just started building a webpage using html and made a simple header for it. I want the header to be exactly along the borders of the screen but there is a white space all around my header. This is how it looks:
I changed my css by setting the margin, border and outline of my header to 0. But this doesn't seem to do the work and the white space is still there. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<style type="text/css">
h1{
margin:0 auto;
padding:20px;
border:0;
outline:0;
background: #003399;
color: #ffffff;
font-family: "Calibri";
font-weight: normal;
}
</style>
</head>
<body>
<header>
<h1>This is my website.</h1>
</header>
</body>
</html>
I can't figure out what my error is. Please anyone help. Thanks for the attention.
By default body tag take some CSS, just add following css for this
body {
margin: 0px;
padding: 0px;
}
In all my projects I place this code just at the start of my CSS files:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
So I have more control about margins, paddings and sizes (box-sizing: border-box makes borders and padding being applied inside the container size, not as an extra size, so it's easier to play with percentage sizes).
Another option is to put normalize.css before your styles, that already includes usual corrections like these.
Add this css
body, html {
margin: 0px;
padding: 0px;
}
I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
Preface: I've read lots of articles about images inside a div having a strange space around them, etc.
Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div
Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..
Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.
What am I missing? It's my first question so be patient please :)
<!doctype html>
<html>
<head>
<title>Anger</title>
<style>
*{
cursor: default;
margin: 0;
outline: 0;
border: none;
padding: 0;
text-decoration: none;
}
body{
background-color: #87cefa;
}
div{
background-color: #ffffff;
}
button{
border-radius: 9px;
padding: 1px 6px 2px 6px;
font: 14px monospace;
color: #ffffff;
background-color: #1e90ff;
}
</style>
<head>
<body>
<div>
<button>Sample Button</button>
</div>
</body>
<html>
Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.
PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!
Change the line-height on the div to zero.
div{
background-color: #ffffff;
line-height:0;
}
jsFiddle example
Set vertical-align to top on the button. That will fix it.
I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)
css:
* {
margin: 0px;
padding: 0px;
font-size: 13px;
line-height: 15px;
border: none;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
}
#search .text, #search .button {
border: 1px solid red;
}
html:
<form method="post" id="search" action="">
<p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>
this is how firefox renders:
this is how chrome renders:
i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.
change:
*{
line-height: normal !important;
}
or add something like:
input[type="submit"], input[type="text"] {
line-height:normal !important;
}
don't ask why)
and. safari need special fixes. but looks well
I found this in normalize.css that solved it for me:
// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Try By giving
.text{
border:0px;
}
Usually one of these below has worked for me in the past using firefox browser.
vertical-align: bottom;
vertical-align: top;
If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.
Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.
CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:
input {
box-sizing: border-box;
height: 15px;
}
This works for html select elements as well.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style>
#boxTop{
margin-bottom:20px;
border:1px solid green;
}
#box1{
float:left;
border:1px solid blue;
}
#box2{
clear:both;
border:1px solid red;
}
</style>
</HEAD>
<BODY>
<div id="boxTop">test</div>
<div id="box1">test</div>
<div id="box2">bottom</div>
</BODY>
</HTML>
check it here
in IE,why has a padding in #box1 and #box2 ? how to fix it?
What you've come across is the IE hasLayout "feature".
Getting #box2 to have layout will fix this issue. If you are concerned with IE7, add min-height: 0; to the style for #box2, like so: http://jsfiddle.net/VTmes/
UPDATE:
There also seems to be a big with the first element on the page having a margin. I tried to remove the margin-bottom and add a margin-top to the box1 and it works. Have a look here: http://jsbin.com/uqide3/6
ORIGINAL ANSWER:
Different browsers have different default margins and paddings. Reset this at the top of your CSS and you should not have these differences.
The simplest but not very efficient reset is:
* { margin:0; padding:0 } /* '*' affects everything (all elements) */
One I've been using recently is:
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,div { margin:0; padding:0 }
Google 'CSS Reset' and you should see many variations, some claiming to be better than others. My take is use the minimum that works for you.
One other approach is to not use one at all, and just set the properties you need as you polish your design. Read this for a deatailed explanation: http://snook.ca/archives/html_and_css/no_css_reset/
float:left
property seems to be problem in IE. Even though we set margin and padding to 0, still rendering is not as expected in IE. Try to use span instead of possible in place of 2nd div and remove float:left property.