I've setup a simple webpage, and there is a weird gap at the top which I don't know how to fix. Other sites I've developed haven't had this issue at all..?
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sitename</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="wrapper">
lorem ipsum
</div>
</body>
</html>
And the CSS:
body {
background-color:#323232;
}
#wrapper {
width:960px;
margin:0pt auto;
background-color:#272727;
}
And here's a pic of the weird gap:
Is this just my version of FireFox acting up temporarily or am I doing something obviously wrong?
I think by default browsers do tend to add margin or padding to either the <html> or <body> element, I can never remember which.
Edit: as per other answers and comments (e.g. Rahool’s), looks like it’s margin on <body>.
So this should sort out your issue:
body {
margin: 0;
}
For every page, each web browser uses a set of default styles before any other css styles are applied.
Mozilla default style sheet
Internet Explorer User Agent Style Sheets
You will need to reset the styles applied by these default css.
Firefox applies default 8px margin to body element. To reset it,
body {
margin: 0;
}
Because the body tag default margin, and you need to reset it, such as:
body {
margin: 0;
}
Try adding
*{
margin: 0px;
padding: 0px;
}
Related
I am making a hangman game. And I am working on styling everything. I am including CSS reset in my HTML and I think it is causing my tags to error out. Like my H1 tag isn't working now. Any thoughts?
The H1 tag should make my text big and bold. However that is not working. The linked stylesheet I am using is empty right now. When I remove the CSS Reset link the H1 then works correctly.
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container" id="gamebox">
<h1>Hang-Person</h1>
</div>
</body>
<script src="assets/javascript/game.js"></script>
</html>
The last script tag is outside the body tag. It should be inside
Be aware to not repeat the same properties for each object in CSS.
Example:
In reset.css:
body {
margin: 0;
text-align: center;
}
And in style.css:
body {
margin: 20px;
text-align: justify;
}
It might cause the browser to get confused, I recommend you to do CSS reset in only one of your stylesheets. You can do it in the other one as well, but it won't be as efficient.
Here you have the universal CSS reset code:
* {
margin: 0;
padding: 0;
}
After this, you can specify the margin or padding to every element, although it violates the DRY (Don't Repeat Yourself) principle.
CSS Working example:
* {
margin: 0;
padding: 0;
}
.object1 {
padding: 70px;
}
It would be more helpful if you post the CSS code for better answers.
Last but not least, the last <script src="assets/javascript/game.js"></script> tag should be inside the body tag.
EDIT: try with the universal CSS reset code and keep the linked stylesheet.
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
MyPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
<div id="title">
<h1>Color Flash Cards</h1>
</div>
</div>
</body>
</html>
index.css
body{
background-color: #31859C;
margin-left: 0px;
margin-top: 0px;
overflow-x: hidden;
}
#header{
margin-top: 0px;
height: 120px;
background: #9838CE;
}
#title{
margin-top: 0px;
}
result:
Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?
All headings have a default margin that can be canceled out with:
h1 {
margin: 0;
}
Demo:
I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.
One of two things might be causing this:
Padding in the body? Add padding: 0; to body.
The top margin on the H1. To combat this add overflow-hidden; to #header
Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).
Set the margin of h1 tag to 0:
h1 { margin: 0; }
See jsFiddle demo.
Try setting the margins of html to 0 as well.
html {
margin:0;
padding:0;
}
Two things:
You might want to add
body{
padding:0;
}
but that's not the real issue, its the H1 tag that is spoiling the layout
add this to your css
h1{
margin-top:0;
}
here is a little fiddle
use reset css for default browser setting will be reset.
http://meyerweb.com/eric/tools/css/reset/
enter code here
I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.
http://jsfiddle.net/qfSZ5/3/
Try adding
h1 {margin:0}
or
h1 {display:inline-block}
if you want to keep its margins inside the parent.
jsfiddle
That's because h1 has a default margin assigned by the browser; that could be kinda messy.
Some people just do this in order to prevent default margins and padding:
* {
margin: 0;
padding: 0;
}
And that literally means:
"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"
Why does this create a veritcal scrollbar in IE6, IE7 and IE8? How to avoid it?
(I had a real applet in there, but I discovered that this heavily mutilated one gave the same result and helps simplify the test case)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Why vertical scrollbar in IE?</title>
<style>
HTML, BODY {
height: 100%;
}
BODY {
padding:0;
margin:0;
}
/* And yes I can use this, but I'd rather not
BODY {
overflow-y: hidden;
}
*/
</style>
</head>
<body>
<APPLET WIDTH = "100%" HEIGHT = "100%"></APPLET>
</body>
</html>
Above also available as http://www.morch.com/download/ieVerticalScrollbars.html
applet {
display: block;
}
To prevent rendering the applet as an inline-element, which enforces line-height rendering.
Add position: absolute; to the applet's style.
Try bringing the height down to 99% or 98%. Or try throwing in some more thorough reset CSS. Don't ever use overflow-y on a body element. Terrible usability.
Thing 1 -- CSS/overflow
Here are the CSS settings you can work with (if they help): http://www.w3schools.com/Css/pr_pos_overflow.asp
Thing 2 -- CSS-erize the scrollbar itself (i.e., turn it completely white, or whatever works for your page.: http://www.draac.com/css/csstricks.html (scroll down a ways)