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.
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.
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!"
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;
}
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>