I cannot seem to remove the spacing between the top of the page and the <div> in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
}
#container{
background-color: #808080;
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<h3>Index</h3>
</div>
</div>
</body>
</html>
I have narrowed it down to this line:
<!DOCTYPE html>
It seems removing this aligns the <div> to the top of the page. I can't see a way in CSS to achieve the same thing.
remove the margin from your <h3> as well
h3 { margin-top: 0 }
DEMO
Margins collapse into each other.
The top margin of html (0), body (0), #container (0), and h3 (not 0) merge into a combined non-zero top margin between the first content and the edge of the window.
Set h3 { margin-top: 0 } to remove it.
(Although you should start your document with a heading (h1) not a sub-sub-heading (h3).)
Actually Default Margin Of H1 to H6 is the problem you are facing so overriding this value will solve your problem.
h3 { margin-top: 0;margin-bottom: 0; }
Extra Info:
You also might want to look into using a CSS reset script before starting a project so you don't have to worry about little things like this.
Related
If I try to center my page by adding the following style rule
html, body {
margin: 0 auto;
width: 900px;
}
Flot works well on FireFox and Chrome, but on IE 11, when I select area on the screen, the yellow-marked-selected-area is not the same as the mouse-selected-area.
How can I solve it?
To reproduce: take Flot selection sample - http://www.flotcharts.org/flot/examples/zooming/index.html
and add the style rule for centering.
have you try by centering .container instead of html and body ?
form example
CSS
html,body {
margin:0;
padding:0;
}
.container {
margin: 0 auto;
width: 900px;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
<body>
<div class="container">
<!--your element place here-->
</div>
</body>
</html>
I thought I had CSS floats figured out but apparently I don't because I can't figure out why this page is behaving the way it is. I'd like for the photo and status divs to each take up 50% of the screen such that both of them appear on the same line and that line takes up 100% of the screen. But what is happening is that the "Stats" div renders below the "Photos" div. The only way I can get them to render on the same line is to reduce their respective widths to 49% (or lower) but then there's a slight gap between the right edge of "Stats" and the edge of the screen. There's something that's taking up additional room but I don't know what it is and I don't see anything in Chrome's Dev Tools. By the way, reset.css is just Meyer's reset.
Thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../reset.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="content-main">
<div class="photos">Photos</div>
<div class="stats">Stats</div>
</div>
</body>
</html>
base.css
.content-main {
width: 100%;
}
.photos {
float: left;
width: 50%;
background: #cf6;
}
.stats {
float: left;
width: 50%;
background: #bbb;
}
I found my error. If add additional padding to each of the elements, that creates the problem. I left that out of my question so that code shown above will work. My bad.
Basically I am using the "Tryit Editor" from the W3 website and
this is the code I started out with
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#cccccc;
}
</style>
</head>
<body>
</body>
</html>
I wanted to change the background color and background images so that they were only found on a div, not on the whole page. I also wanted to move the div around the page. I was able to make the div with the background elements, but I wasn't able to move it around the page. I used the following code, thinking that
top:150px;
left: 150px;
would have caused the div to change position
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position=fixed;
top:150px;
left: 150px;
background-image:url("img_tree.gif"),url("img_flwr.gif");
background-color:#00dccc;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Alas, the div did not change position. What gives?
Thanks! :]
You have an equals sign rather than a colon in your position declaration which is causing the page to ignore it. Change that and it'll work!
EDIT: Thanks for fixing my awful terminology Pavlo, can't believe I did that :P
Your code is wrong. It should be
position: fixed;
This is an embarrassingly basic problem, but I've been wracking my brains trying to find the solution and finally the frustration got too much for me...
All I'm trying to do is center a website in IE7. It works fine in Firefox, Safari, IE8, and Chrome. Just not IE7:
#container
{
margin:0 auto;
width:1035px;
}
I just can't see how this can go wrong. I've tried strict and transitional doctypes, I've also put the body in a text-align:center (makes no difference).
Any advice on this matter would be gratefully received.
Ok, here's (some of the) surrounding code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="content-container">
<div id="content">
/* content */
</div>
</div>
</div>
</body>
</html>
CSS (main):
html,body
{
text-align: center;
background-color:#F8F5EF;
height:100%;
margin:0;
padding:0;
width:100%;
}
#container
{
margin: 0 auto;
width:1100px;
}
#content-container
{
float: left;
width: 1100px;
background-image:url('../images/BG1.gif');
background-repeat:no-repeat;
background-position:0px 0px;
}
#content
{
float: left;
width: 778px;
padding: 15px 0px 80px 15px;
margin: 0 0 60 0px;
}
The IE7.css file doesn't modify those items.
Thanks!
G
Without posting your surrounding HTML/CSS we can't really help, as this code works in all IE (just tested)
Live Example
Which leads me to believe you have something affecting the styles. If you can show that or provide a link, I think more help can be provided.
Here is the CSS used:
#content {
width: 100px;
margin: 0 auto;
border: 1px dashed red;
}
HTML used:
<div id="content">
content here
</div>
Updated code, using your css/html provided:
http://jsfiddle.net/hyVjs/2/
This code is fine. One of your sub css files is messing you up :)
Have you tried removing your conditional css files and see if it still isn't working?
Make sure you have set the DOCTYPE. If not IE will enable quirk "dirty mode"
text-align is for aligning text...
in ie7 make sure you have given the parent container a width other than auto then all should be well.
You could try doing this for your container:
#container {
position: absolute;
margin:0 0 0 50%;
width:1100px;
left: -550px; /*half the element width*/
}
If the above doesn't fit your needs, try position:relative;
I found using percentage margins worked for IE7 when nothing else did. Though auto margins seem to work sometimes - your code in jsFiddle seemed fine under IE7.
The negative positioning to the left is needed to bring back the element, which is centered from its left edge.
If the container is a DIV then
#container
{
margin:0 auto 0 auto;
position:relative;
width:1035px;
}
if it does not work, use a css-reset first. It will definitely work.
try using
display:block;
for the container
Yeah, if I'm going to center a container, I usually text-align:center; the body and left align inside the container for backwards compatibility. Old habit I'm going to kill some day.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a box</title>
<style>
body { text-align:center; }
#wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
</style>
</head>
<body>
<div id="wrap">…</div>
</body>
</html>
I have the following code which, as expected, shows a grey rectangle in both Firefox and IE. As soon as I add a DOCTYPE (HTML 4.01 Transitional) in front, it shows only a blank page. The online validator says the document is OK. What is wrong? Should I care about DOCTYPE?
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750;
height:548;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
You need to specify the units for your width and height. I assume you're going for pixels so:
#gallery
{
width: 750px;
height: 548px;
background-color: #f0f0f0;
}
You haven't specified the units of measure for the height and width attributes in your CSS. Without a DOCTYPE the browser will attempt to render the page as best it can (QUIRKS mode), in your case I think it probably guessed the correct units. By adding the DOCTYPE you have told the browser to follow a very specific set of instructions when rendering the page - no guessing that you wanted pixels instead of percents.
Your CSS was buggy.
width:750px; /* PX!! */
height:548px; /* PX!! */
Then add the doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750px;
height:548px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
The definition of height and width should be in pixels, em's or percentages, e.g:
width: 750px;
height: 548px;