Forum Moderators: not2easy
Apologies if this has been asked before!
I am trying to horizontally center a page on the screen using the align-center div command but the only thing that seems to happen is that IE takes it upon itself to center the whole content using the left border as a guide (ie. the far left margin ends up in the center of the page!)
Also while I am at it...the min-width command doesnt seem to work in IE, is there a work around?
Thanks all in advance!
I am trying to horizontally center a page on the screen using the align-center div command but the only thing that seems to happen is that IE takes it upon itself to center the whole content using the left border as a guide (ie. the far left margin ends up in the center of the page!)Also while I am at it...the min-width command doesnt seem to work in IE, is there a work around?
Thanks all in advance!
Put this into your css:
body {
text-align: center;
margin: auto; /* or 0 auto; */
}
Make sure you set the aligment for text in your divs, otherwise the above will not only center your website, it will center your text too.
e.g. text-align: left;
Min-width is not supported in Internet Explorer.
I tried that but I still get IE placing the left most border in the center of the screen and as a result it massivley increases the width of the page.
Maybe I have done something seriously wrong elsewhere.
This is what I have so far:
BODY {
text-align: center;
margin: 0 auto;
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px 2px; PADDING-TOP: 0px; max-width: 600px
}
DIV.contentL {
BORDER-RIGHT: #fff 2px solid; BORDER-TOP: #fff 2px solid; Z-INDEX: 5; BACKGROUND: #fff; MARGIN: 150px 0px 0px 155px; BORDER-LEFT: #fff 2px solid; WIDTH: 200px; BORDER-BOTTOM: #fff 2px solid; POSITION: absolute; HEIGHT: 360px
}
DIV.contentM {
BORDER-RIGHT: #fff 2px solid; BORDER-TOP: #fff 2px solid; Z-INDEX: 4; BACKGROUND: #fff; MARGIN: 167px 0px 0px 360px; BORDER-LEFT: #fff 2px solid; WIDTH: 200px; BORDER-BOTTOM: #fff 2px solid; POSITION: absolute; HEIGHT: 343px
}
DIV.contentR {
BORDER-RIGHT: #fff 2px solid; BORDER-TOP: #fff 2px solid; Z-INDEX: 3; BACKGROUND: #fff; MARGIN: 150px 0px 0px 565px; BORDER-LEFT: #fff 2px solid; WIDTH: 200px; BORDER-BOTTOM: #fff 2px solid; POSITION: absolute; HEIGHT: 360px
}
DIV.header {
BORDER-RIGHT: #ff9900 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ff9900 0px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ff9900 0px solid; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #ff9900 0px solid; POSITION: absolute; HEIGHT: 100px; TEXT-ALIGN: right
}
DIV.header2 {
BORDER-RIGHT: #ff9900 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ff9900 0px solid; PADDING-LEFT: 0px; Z-INDEX: 2; PADDING-BOTTOM: 0px; MARGIN: 107px 0px 0px 155px; BORDER-LEFT: #ff9900 0px solid; WIDTH: 610px; PADDING-TOP: 0px; BORDER-BOTTOM: #ff9900 0px solid; POSITION: absolute; HEIGHT: 60px; TEXT-ALIGN: center
}
DIV.footer {
BORDER-RIGHT: #ff9900 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ff9900 0px solid; PADDING-LEFT: 0px; BACKGROUND: #ff9900; PADDING-BOTTOM: 0px; MARGIN: 515px 0px 0px; BORDER-LEFT: #ff9900 0px solid; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #ff9900 0px solid; POSITION: absolute; HEIGHT: 20px
}
Thanks for your help
If you post the (x)html as well, I should be able to help. I can already see a few problems in your css.
Its a just a frame fo far
<BODY>
<DIV id=navcontainer>
<UL id=navlist>
<LI>News and Events</LI>
<LI>Businesses </LI>
<LI>Students</LI>
<LI>Partners</LI>
<LI>My NTI</LI>
<LI><Contact</LI>
<LI>>Home</LI>
</UL>
</DIV>
<DIV class=left</DIV>
<DIV class=contentL>/DIV>
<DIV class=contentM></DIV>
<DIV class=contentR></DIV>
<DIV class=header></DIV>
<DIV class=header2></DIV>
<DIV class=footer></DIV>
</BODY>
thanks again
IE does not support max-width or min-width. The best workaround is to use an IE proprietary expression(), which lets you use JavaScript to calculate the value. Just make sure to hide the rule from other browsers, using either conditional comments, or an IE only hack.
Are you sure the use of expressions might cause problems?
width: 100px;In general, whenever you use a hack, or otherwise exploit some incorrect behavior in a browser, make sure that it is well hidden from other browsers, as best you can.
I would be greatful for any comments on the code. As you can probobly tell I am new to css and all guidence is valuable.
thanks again
BODY {
text-align: center;
margin: 0 auto;
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px 2px; PADDING-TOP: 0px; max-width: 600px
}
To start with, you declared margin twice in your css.
Change your body to:
body {
text-align: center;
margin 0 auto;
padding: 0;
background: #fff;
}
This should at least center your content on the page. As previously mentioned there is a lot more cleaning up to do in your css.
Regarding the min-width, IE doesnt understand this. But thats not all... safari and IE5/mac is also guilty. Sure, you can add an expression, but you still have the safari and IE5/mac issue.
As of today, the only method i know works is to insert a in this case 600px wide 1px high transparent gif in your content div. Its a hack and its ugly, but it works.
Firstly it can be shortened a great deal. When using shorthand for margin/padding
1. four numeric values should be read in the order
top ~ right ~ bottom ~ left - (like a clockface 12 3 6 9 is how I always remember it) so:
margin: 1px 2px 3px 4px; is the equivalent of:
2. three numeric values should be read in the order
top ~ right/left ~ bottom so:
margin: 1px 2px 3px; is the equivalent of:
3. two numeric values should be read in the order
top/bottom ~ right/left so:
margin: 1px 2px; is the equivalent of:
4. one numeric value indicates all four sides are the same.
margin: 1px; is the equivalent of:
Padding is exactly the same
Borders are the same again in that the order is the same, but they also have the width/style/color setting too
there are various ways to shorten them, but again if all four sides are not the same what I tend to do is lengthen the border shorthand code so that the width/color/style is separated then use the above ordering system to apply the styles.
If all four borders are the same you can just use:
one line of code replaces your 4 lines, but if you would like to build in the flexibility to have them different colors, styles, widths
There are lots of questions in here that will need answers I think :) So I would start at the beginning and use container divs with background colors so you can see what's happening at each stage of the template and ask a new question as each one arises
here's a starter for you, I've used colors and removed borders so you can see if the borders are triggering width with whatever doctype you're using
<!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>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html {background: #000;}body {
text-align: center;
margin: 0 auto;
padding: 0;
background: #ddd;
width: 600px;
}#container {
text-align: left;
position: relative;
background: #00f; /* blue */
margin-top: 100px; /* top spacing */
}.contentL {
background: #fff;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
height: 360px;
background: #eee;
}
.contentM {
background: #ffc;
width: 200px;
position: absolute;
top: 17px;
left: 200px;
height: 343px
}
.contentR {
background: #ccc;
width: 200px;
position: absolute;
top: 0;
left: 400px;
height: 360px
}
</style>
</head>
<body>
<div id="container">
<div class="contentL">content L</div>
<div class="contentM">content M</div>
<div class="contentR">content R</div>
</div>
</body>
</html>
have fun ;)
Suzy
