Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    177
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Header Image not marginized center in IE6

    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:
    Code:
    <!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
    Code:
    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;}

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to give #aligner a width that matches the width of the image however this might be better to do
    Code:
    <div id="header"><img src="dir/logo.png" alt="logo" /></div>
    Then your CSS would look like this
    Code:
    #header img {
    display:block;
    margin:auto;
    }
    You may also want to look into some type of image replacement technique: http://www.mezzoblue.com/tests/revis...e-replacement/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    177
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Aero, it worked.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •