...

View Full Version : Header Image not marginized center in IE6



nolvorite
10-08-2007, 10:47 PM
I got a problem guys:
My header image doesn't margin automatically (center) on the #header. So does the wrap. I have validated my site, my css, and even rechecked my markup, but to no avail, nothing changed.
HTML:

<!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>
<link rel="stylesheet" href="dir/style.css" type="text/css" />
<title>Digg Jean</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="aligner"><img src="dir/logo.png" alt="logo" /></div>
</div>
<div id="left">
<div class="maintitle">Introdcution</div>
Digg jean looks for all about game (multiplayer) discussions, looking for facts/information, etc...
<div class="maintitle">Latest Update</div>
<div class="subtitle">Site is released!</div>
Site is no longer under construction! Thanks to everyone who helped me in all those bugs while I was making
this site.<br /><br />
<a href="morelatest.html">More ...</a>
</div>
<div id="right">
&nbsp;
</div>
<div id="footer">
Copyright &copy; Digg Jean 2006-2007 - All rights reserved.<br />
No part of this site may be reproduced or plagiarised without permission from the
webmaster and the owner themselves.
</div>
</div>
</body>
</html>
CSS

body{background:#000;font:11px "impact","tahoma","verdana";padding:0;margin:0;}
#wrap{width:750px;margin:0 auto;}
#header{width:100%;background:#333;border-bottom:1px solid #777;height:175px;}
#header #aligner{margin:0 auto;}
#left{width:250px;background:#575757;height:600px;}
#right{width:500px;height:600px;background:#4a4a4a;margin:-600px 0 0 250px;}
#footer{width:100%;background:#666;text-align:center;padding:3px 0;}
.maintitle{width:100%;padding:8px 0;background:#006;color:#fff;text-align:center;}
.subtitle{width:100%;background:#123;color:#fff}
a:link{color:#f90;}
a:visited{color:#080;}
a:hover{color:#00f;}
a:active{color:#ff0;}

_Aerospace_Eng_
10-08-2007, 11:00 PM
You need to give #aligner a width that matches the width of the image however this might be better to do

<div id="header"><img src="dir/logo.png" alt="logo" /></div>
Then your CSS would look like this

#header img {
display:block;
margin:auto;
}

You may also want to look into some type of image replacement technique: http://www.mezzoblue.com/tests/revised-image-replacement/

nolvorite
10-08-2007, 11:05 PM
Thanks Aero, it worked.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum