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>
Related
I'm working in eclipse with the Web Tools Platform, which provides a WYIWYG-feature. Now I got the problem, that two -containers are not shown in the same line. The really weird thing is, that when I export the file to desktop and open it with my browser, de two containers are shown in line, but there are no margins. Why are there two different looks? I mean, it is possible that the eclipse plug-in doesn't work well, but at the latest when I open the file in browser, it should display what I code or not?
Here are two pictures of what I want to explain:
here is the html-file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="mainStyle2.css" />
<title>title</title>
</head>
<body>
<div id="container">
<div id="header"><b>main title</b></div>
<div id="navigation" style="float:left">
<b>Navigation</b> <br /><hr />
Welcome<br />
Team<br />
Links<br />
Screenshots<br />
</div>
<div id="contCont" style="float:left">
Content
</div>
</div>
</body>
</html>
... and the css-file:
#CHARSET "ISO-8859-1";
#container{ background-color:#00FF59;
width:1200px;}
#header{ background-color:#99FF99;
text-align:center;
font-family:bookman old style;
font-size:50px;
margin-top:20; margin-bottom:10;
margin-left:20; margin-right:20;}
#navigation{ background-color:#99FF99;
width:200px; height: 800px;
font-family:bookman old style;
font-size:20;
margin-top:10; margin-bottom:10;
margin-left:20; margin-right:20;}
#contCont{ background-color:#99FF99;
width:1000px; height: 800px;
font-family:bookman old style;}
NOTE: I already tested it with float:left in both "navigation" and "contCont", but there was no changing.
The WYSIWYG that IDEs provide are generally not very trustable.
Either way, try this:
#navigation{ background-color:#99FF99;
width:200px; height: 800px;
font-family:bookman old style;
font-size:20px;
margin-top:10px; margin-bottom:10px; float: left;
margin-left:20px; margin-right:20px;}
#contCont{ background-color:#99FF99;
width:960px; height: 800px; float:right;
font-family:bookman old style;}
Also wrap the navigation and contCont in another div.
Another thing to note is that browsers have default styles for html tags. You should be resetting them for example:
*{
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-weight: normal;
font-style: normal;
}
Another thing that I noticed that for your margins, you are not specifying any units? Fixed it on the original code at the top. That's why the margins wont display in a real browser.
Also as previously mentioned, your container is too small because you are not taking in the margins.
try adding some margins to #contCont, it would also help to create a jsfiddle for trial and error purposes, generally wysiwyg is not the best idea for development.
you should also be adding your margins to the overall width of the container so if you have nav with width of 200px and 20px margins on each side, and the content div is 1000px, your container should be 1240px wide
Can anyone explain to me this code because it seems to beat my logic?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
}
#colWr{
width:100%;
height:500px;
float:left;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
margin-left: -100%;
}
</style>
</head>
<body>
<center>
<div id="main">
<div id="colWr">
<div id="col"></div>
</div>
<div id="left"></div>
</div>
</center>
</body>
</html>
My questions rely on the facts that #left holds a margin-left: -100px attribute, the position of the div's within the main div suggest that the left column would rather be a right column and why is the "col" column floated to the left within the "colWr" div?
For a 1_fixed-1_liquid css layout, the code is quite a mind-twister.
The order of the divs doesn't matter as colWr has a width of 100% which means anything floated after it will appear on a new line anyway, if the left column came first it would force the colWr column on to a new line and it would have to be given a negative margin. The left div has a negative margin of 100% which brings it back on top of colWr.
As to why the page was laid out this way I have no idea, the same effect could be just as easily achieved by putting the left next to the col div and removing the colWr div (doesn't do any harm but it serves no purpose).
You should also note that the center tag in HTML has been deprecated and I recommend you give centre a div by specifying in it's css margin: auto. The code also lacks a DOCTYPE declaration which is required to trigger standards mode in most browsers - you can find more information about browser modes here.
My suspicion is that the code you have was written pre-dating the release of HTML 4.01. It will work in most browsers due to their legacy support but that doesn't mean it works well, I wouldn't use it. I would however use this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
margin: auto;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="col"></div>
</div>
</body>
</html>
Im working with a XHTML 1.0 Transitional doctype html file, and I want to have a main div with 800px width and make it appears centered (not the div content, but the div itself).
I've used this on the past:
<!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>
<title></title>
<style>
<!--
html, body { margin:0; padding:0; }
#main-container { background:black; width:800px; }
-->
</style>
</head>
<body>
<center>
<div id="main-container">
Content
</div>
</center>
</body>
</html>
But I am not sure if this is cross-browser compatible, or if its valid xhtml.
The center tag is deprecated since 1998. You need to apply CSS margin 0 auto; on the div. This will set top and bottom margin to 0 and left and right margin to auto which will let the div "auto-center" itself when its width is known/fixed.
See also:
Center a div in CSS, (text-align is not the answer)
remove the center tags, and set this css declaration
#main-container { margin: auto; width:800px }
You can use
#container{
position:relative;
margin: auto;
}
or, if you have a fixed width for your container, lets say 800px you can do something like
#container{
position:relative;
left: -400px;
margin-left: 50%;
}
Use margin: 0 auto;, as stated above:
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#main-container {
background: black;
width: 800px;
margin: 0 auto;
}
</style>
And by the way, if you wish to validate as proper XHTML, you need to add type="text/css" to your style elements. In addition, there is almost no need to hide your CSS from old browsers, because almost all browsers nowadays supports CSS.
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;
I'm going bananas here, somehow below all of my images in my page there is a gap, a margin which isn't there in the code.
Even Firebug can't see it but Firefox and Safari are rendering it - EVEN WITHOUT CSS AT ALL!
This never happened to me before...!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="sidebar">
<img src="images/logo.png" id="logo" />
<ul id="menu">
<li class="menu1">Main</li>
<li class="menu1">System</li>
<li class="menu1">View</li>
<li class="menu1">Policy</li>
</ul>
<div id="sidebar_bottom"></div>
</div>
<div id="main_content"></div>
<div class="clear"></div>
</div>
</body>
</html>
body{
background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
width:864px;
margin: 8px auto 0 auto;
}
#sidebar{
/*width:139px;*/
float: left;
}
#sidebar_bottom{
height:10px;
background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
margin-bottom: 2px;
}
#sidebar #menu{
background: #f2f2f2;
border: 0 1px solid #cecece;
margin: 0;
list-style: none;
}
This is actually not that uncommon. It's because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.
The easiest solution to this is to simply use display:block; to turn the image into a block element. Floating the image using float:left; or float:right; also works as that also turns it into a block element.
Adjusting properties like the vertical-align, font-size and line-height may also affect the distance, but it's not as robust as it doesn't really remove the effect. It might still appear in some circumstances.
Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue
sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility ..... answer: only add "vertical-align: top;" to img tag inside a tag.
For me
font-size: 0;
line-height: 0;
on the wrapping container did the trick.
Try to change the DOCTYPE section to:
<!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">
You can also check this: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails
Well, I got it.
it was a combination of
font-size: 0px;
line-height: 1;