PDA

View Full Version : Centering in Internet Explorer

iheartny
06-21-2008, 02:50 AM
I've been having problems aligning my content/layout in the center. It looks fine in Mozilla and as well as Safari, but it's I.E that won't do the job. ;) This is a CSS problem. I'm just no genius when it comes to centering sites.

#header = the layout image
#content = body content
#navigation = the side content (2nd column)

Here's my style sheet that I'm using:
body
{font-family: Verdana;
font-size:8pt;
text-align: justify;
width: 900px;
margin:auto;
background-color:#ffffff;
background-image:url('images/midbg.png');
background-repeat:repeat-y;
background-position:center;
color:#494949;}


#header
{height:239px;
width:900px;
position:absolute;}

#content{
position:absolute;
top: 230px;
width: 520px;
margin-left: 40px;}

#navigation
{position:absolute;
top: 230px;
width: 290px;
margin-left: 570px;}

A:link {font-size: 8pt;
font-weight:normal;
color: #66821A;
text-decoration:none;}

A:visited {font-size: 8pt;
font-weight:normal;
color: #66821A;
text-decoration:none;}

A:active {font-size: 8pt;
font-weight:normal;
color: #66821A;
text-decoration:none;}

A:hover {font-size: 8pt;
font-weight:normal;
color: #616161;
text-decoration:underline;}

.side-title
{background-color:transparent;
color: #E86759;
font-family: Verdana;
font-size: 12pt;
line-height:12pt;
text-align:left;
font-weight: bold;
letter-spacing:2px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 2px;
padding: 0px;}

.body-title
{background-color:transparent;
color: #38B0B7;
font-family: Verdana;
font-size: 12pt;
line-height:12pt;
text-align:left;
font-weight: bold;
letter-spacing:2px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 2px;
padding: 0px;}

tr, table, td
{text-align:justify;
font-family: Verdana;
color:#4C4C4C;
spacing:0px;
margin:0px;
padding:0px;
font-size: 12px;
font-weight:normal;
letter-spacing:0px;}


.smallspace
{clear: both;
height:5px;
overflow:hidden;}

.mediumspace
{clear: both;
height:12px;
overflow:hidden;}

.largespace
{clear: both;
height:20px;
overflow:hidden;}

b {color: #FF7364;}

i {color: #39C3CB;}

u {color: #A1C440;}


Please ask me for the site's url if you need to see the site.
_Aerospace_Eng_
06-21-2008, 02:54 AM
We need to see your html. Also why are you using so much absolute positioning? Don't ABUSE it which is what you are doing.
iheartny
06-23-2008, 02:18 AM
I'm so used to absolute positioning, but what should I replace it with?

index.php:

<? include ("header.php") ?>

<div id="content">
<div class="body-title">Test</div>
text

<div class="mediumspace"></div>

<div class="body-title">Test</div>
text


</div>

header.php

<html><body>
<link rel=stylesheet href="style.css" type="text/css">

<title>text</title>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="header">
<!-- ImageReady Slices (header.png) -->
<img src="images/header.png" width="900" height="239" border="0" alt="" usemap="#header_Map">
<map name="header_Map">
<area shape="rect" alt="" coords="725,178,802,207" href="text.php">
<area shape="rect" alt="" coords="572,178,725,207" href="text.php">
<area shape="rect" alt="" coords="478,178,572,207" href="text.php">
<area shape="rect" alt="" coords="376,177,478,207" href="text">
<area shape="rect" alt="" coords="308,178,376,207" href="text.php">
<area shape="rect" alt="" coords="243,178,308,207" href="text.php">
<area shape="rect" alt="" coords="156,178,235,208" href="text.php">
<area shape="rect" alt="" coords="87,177,148,208" href="index.php">
</map>
<!-- End ImageReady Slices -->

</div>

<div id="navigation">
bla bla sfsdf sdfas ty uyiyuqwe qwe erjfsgn yhuth sfjkdhepg fhsdpif sf
</div>

</html></body>
_Aerospace_Eng_
06-23-2008, 04:12 AM
Okay looks like you have a lot more issues than just abusing absolute positioning. Your HTML is full of errors. You are missing a lot of elements. In header.php change this
<html><body>
<link rel=stylesheet href="style.css" type="text/css">

<title>text</title>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

to this
<!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=utf-8">
<link rel=stylesheet href="style.css" type="text/css">

<title>text</title>
</head>
<body>

Now your page might center but its far from being coded properly. You don't NEED absolute positioning. It would help if you told us what type of layout you were going for. Let the elements flow naturally in the document. If you need divs side by side then float them. I also suggest that you run your page through an html validator as well as a css validator. bgcolor and the margin stuff goes in your CSS NOT your body element.

http://validator.w3.org
http://jigsaw.w3.org/css-validator/

Finally you should probably be doing some more HTML/CSS tutorials.