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;
Related
This code works:
<html>
<head>
<style>#a { height: 100%; }</style>
</head>
<body>
<form>
<textarea id="a"></textarea>
</form>
</body>
</html>
and produces a 100% height textarea.
If we add <!DOCTYPE html> on top, it doesn't work anymore (the height isn't 100% anymore).
Why? According to here, it seems that adding this DOCTYPE is making it HTML5. Why would HTML5 break the height: 100%;?
When you use of <!DOCTYPE html>,you are in standard mode and html and body have height equal his inside content,so you must use this code:
html, body, form, #a {
height:100%;
}
but when you don't use of DOCTYPE you are in quirks mode and , html and body have default height equal 100%,only use this code:
#a {
height:100%;
}
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.
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 would like to have the following layout
+++++++++++++++++++++++
+Header +
+++++++++++++++++++++++
+Nav+ +
+ + +
+ + +
+ + Content +
+ + +
+++++++++++++++++++++++
so basically a two column layout with a header. I've checked many CSS layout generators on the net, but they just produced me a result where the left navbar is as big as the content in it. I can scale it with "height:500px" or whatever, but i want it to be fullsize (from top to bottom of browser window) all the time. Changing the value with "height:100%" does not work.
If you want to try it out yourself: http://guidefordesign.com/css_generator.php and then select full page, two column layout, with header to see what i mean. If you want you can tell me which property i have to adjust in the generated css file to make it work
You can try this. It works on the browsers I tested (Firefox, IE7+8, Opera, Safari, Chrome). Just play around with the percentage units for header and columns.
<!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=utf-8" />
<title>for stackoverflow</title>
<style>
body, html {
padding : 0px;
margin : 0px;
height : 100%;
}
#wrapper {
width:900px;
height:100%;
margin: 0px;
padding: 0px;
}
#header {
height:10%;
background-color:#930;
width:900px;
}
#nav {
background-color:#999;
width:200px;
height:90%;
float:left;
}
#content {
height:90%;
background-color:#363;
width:700px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
</div>
</body>
You might want to have a look at and get the idea from:
Super Simple Two Column Layout
See the demo here.
A little general answer: Look into CSS frameworks, like http://www.blueprintcss.org/ - these let you define grids.
Here's a sample page: http://www.blueprintcss.org/tests/parts/sample.html
Concerning the height problem, try out this (should give you 100% of browser window height for your div all the time):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #123456;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
A solution you can try, is to give the content area a background image which is repeated vertically (1px height and width of your page). The left side of that image would have the nav background color, and the rest would be the color of the content background color ...
Specifically, I am referring to a situation where you need to have a total width of say 100% on a DIV, but a 10 pixel padding and 1 pixel border. (And don't rely on the browser automatically setting it to that width — say it's floated left for instance.)
Is there any simple way to accomplish this without using JavaScript?
No, there's no way to set this on one element that works with the currently major browsers.
You could use 2 nested divs. Set the 100% width on the outher div, and set the padding and border on the inner div.
If you use box-sizing: border-box you can set width: 100%; border: 1px solid black; padding: 10px; and the total of the width, border, margin, and padding will be what is specified for the width. Source
EDIT: True, browser support is a bit limited. FF 3.5 and Safari 4 support it, not sure about IE8 or Chrome.
What about the following solution?
<?xml version='1.0' encoding='UTF-8'?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Content with Menu</title>
<style type="text/css">
.content .outer{
width:100%;
border:1px solid black;
background-color:green;
}
.content .inner{
margin-left:10px;
margin-right:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="outer">
<div class="inner">
<p>Hi!</p>
</div>
</div>
</div>
</body>
</html>
Update
OK, doesn't accomplish what you are talking about with just one element.
That's only possible with CSS 3.