Container off-center in certain browsers - Need Help!

Discussion in 'HTML & Website Design' started by pghtech, Jul 2, 2008.

0
  1. #1
    Greetings:

    I have a Container div that holds my header, maincontent and footer div. The <body> has a background that repeats on Y, and the Header and Footer div each have a background image that matches up with the background image of the body (horizontal lines in the <body> background aligns with the horizontal lines in the Header and footer background)

    The problem is that in IE and Firefox the horizontal lines in all these background images match up. But in Safari and Opera, it is like the container div is pushed to the left 1px. I can even add a "left: 1px;" to the container div and it will line up in Safari and Opera, but ultimately break IE and Firefox. In addition, in Dreamweaver CS3, it is showing out of alignment - though opening the page in IE or Firefox the issue doesn't exist.

    Can someone tell me what is occurring here?

    The container div is 798px, but I have even tried an odd number at 799px to see if it would then center on the odd number px. I currently have all the div's in the container set to "width: 100%" but have tried setting them to the same number as the container. Neither of these worked.

    Thanks in advance for any help.


    <body>

    <div id="banner"></div>
    <div id="container">
    <div id="header">
    <div id="navigation">
    <ul class="menu">
    <li class="active_item"><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Arrangements</span></a></li>
    <li><a href="#"><span>Candle Rings</span></a></li>
    <li><a href="#"><span>Wreaths</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
    </div>
    </div>
    <!-- end #header -->
    <div id="mainContent"></div>
    <!-- end #mainContent -->
    <div id="footer">
    <div id="footermenu">
    <ul>
    <li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Arrangements</span></a></li>
    <li><a href="#"><span>Candle Rings</span></a></li>
    <li><a href="#"><span>Wreaths</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
    </div>
    </div>
    <!-- end #footer -->
    </div>
    <!-- end #container -->

    </body>
    </html>

    CSS

    @charset "utf-8";
    body {
    background: #FFFFFF url(Images/Background/wrapper_bg.gif) repeat center;
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    padding: 0;
    text-align: center;
    color: #F0EFDB;
    z-index: 1;
    width: 100%;
    position: static;
    margin: 0;
    }
    #wrapper {
    background:transparent;
    width: 100%;
    position: static;
    z-index: 2;
    margin: 0px auto;
    }

    #banner {
    background:transparent url(Images/banner/banner_bg.jpg) repeat-x center center;
    height: 77px;
    margin: auto 0;
    z-index: 4;
    width: 100%;
    position: relative;
    top: 430px;
    height: 61px;
    }

    #container {
    width: 799px;
    text-align: left;
    background: #FFFFFF no-repeat;
    position: relative;
    z-index: 5;
    top: 25px;
    margin: 0 auto;
    }

    #header {
    padding: 0;
    width: 798px;
    height: 420px;
    background-image:url(Images/Header/header_bg.jpg);
    background-repeat: no-repeat;
    z-index: 5;
    position: relative;

    }

    /* ---BEGIN ---- Navigation CSS */
    #navigation {
    height: 61px;
    background: transparent url(Images/Menu/mmid.png);
    margin: 0 auto;
    border: 0;
    top: 346px;
    left: 285px;
    z-index: 6;
    position: relative;
    width: 798px;
    text-align: center;
    }

    .menu {
    margin: 0;
    padding: 0;
    }

    .menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    }

    ul.menu li {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    }

    ul.menu a {
    background:transparent url(Images/Menu/mright.png) no-repeat right top;
    margin: 0;
    padding: 0;
    text-decoration: none;
    border: 0;
    display: block;
    float: left;
    }

    ul.menu a span {
    display:block;
    background:url(Images/Menu/mleft.png) no-repeat left top;
    padding:0 8px 0 8px;
    font-family:"Times New Roman", Times, serif;
    font-size: 20px;
    color:#FFFFFF;
    font-weight:lighter;
    line-height:61px;
    }

    ul.menu a:hover,ul.menu li.active_item a {
    background-position: right bottom;

    }

    ul.menu a:hover span,ul.menu li.active_item a span {
    color: #AA2A70;
    font-style: normal;
    text-decoration: none;
    background-position: left bottom;
    }

    /* ---END ---- Navigation CSS */

    #h1 {
    margin: 0;
    }

    #mainContent {
    width: 798px;
    background:#F0EFDB url(Images/MainContent/page_shadow.jpg) repeat-y;
    height: 400px;
    z-index: 5;
    position: relative;
    }

    #footer {
    padding: 0;
    background:#F0EFDB url(Images/Footer/footer_bg.jpg) no-repeat center top;
    height: 33px;
    position: relative;
    z-index: 5;
    width: 798px;
    }

    #footermenu {
    margin: 0 auto;
    padding: 0px;
    width: 550px;
    position: relative;
    z-index: 5;
    top: 50px;
    }

    #footermenu ul {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #footermenu ul li {
    margin: 0 auto;
    padding: 0px 5px 0px 5px;
    display: inline;
    }

    #footermenu a {
    text-decoration: none;
    color: #AA2A70;
    }

    #footermenu a span {
    font:"Times New Roman", Times, serif;
    padding: 0px 10px 0px 10px;
    font-size: 14px;
    }

    #footer p {
    margin: 0;
    padding: 1px 0;
    }
     
    pghtech, Jul 2, 2008 IP