Grow your CSS skills. Land your dream job.

[Solved] IE6 & IE 7 problems

  • # October 3, 2009 at 6:30 am

    hi… my website doesn’t work correctly in this 2 browsers and can’t figure out why

    The website in this browsers moves right instead of center
    It is working fine in any other browser even in IE 8, But IE 7 and 6 it doesn’t
    Aspecialy i didn’t mind that it will work for IE6 but IE7 is a must …

    Can someone help me here ?

    Code:
    @charset “utf-8″;
    /* CSS Document */

    body { width:800px;
    margin: 0 auto;
    padding-top:50px;
    /*background: url(images/bg.jpg) repeat;*/
    background-color:#000;
    direction:rtl;
    border: 0;
    color:#FFF;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    }
    a:link {
    text-decoration: none;
    color: #FFF;
    }
    a:visited {
    color: #FFF;
    }
    a:hover {
    color: #FFF;
    }
    a:active {
    color: #FFF;
    }

    #container {width:800px; background-color:#000; border-color:#60F;}
    #container .logo {width:800px;}
    #container .logoright {width:300px;}

    ul { list-style-image:url(images/loadinfo.net.gif);
    text-align:right;

    }
    /* ——————- Start Menu ——————- */

    #container .menu {width:800px;
    height:43px;
    background:url(images/menull.png);
    list-style:none;
    margin: 0 auto;
    padding: 0;
    position:relative;

    }
    .menu ul { }

    #nav ul {
    margin: 0px;
    padding-left:210px;
    list-style: none;
    }
    #nav ul li {
    }

    #nav ul li,
    #nav ul li a {
    float: left;
    display: block;
    }

    #nav ul li a {
    margin: 8px;
    padding: 1px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight:700;
    color: #fff;
    text-decoration: none;
    }
    #nav ul li a:hover,
    #nav ul li a.selected {
    background-color: #fff;
    color: #272727;
    }

    /* ——————- End Menu ——————- */
    #container .footer {width:100%;
    height:40px;
    background-image:url(images/footer.png);
    font-family:Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-size:10px;

    ;}

    #container .footer .leftboard {width:130px; float:left; text-align:right; font-size:14px; font-weight:800; padding-left:40px;}
    #container .footer .rightboard {width:170px; float:right; text-align:right; font-size:14px; font-weight:800; padding-right:40px;}
    #container .zero {
    text-align: center;
    background-color:#000;
    background:url(images/logo2.jpg) center no-repeat;
    height:300px;
    width:100%;
    }
    #container .zerogallery {
    text-align: center;
    background-color:#000;
    background:url(images/logo2.jpg) center no-repeat;
    height:100%;
    width:100%;
    }

    .doh {height:150px;}
    #container .zero .flash {
    width:158px;
    padding-left:10px;
    padding-top:20px;
    float:left;
    }
    #container .zero .flashright {
    width:158px;
    padding-left:10px;
    padding-top:20px;
    float:right;
    }

    #container .zero .flashleftbutton {
    width:100px;
    padding-left:80px;
    padding-top:20px;
    float:left;
    }

    #container .footer {width:100%; height:40px;}
    #container .aware {
    margin: 0 auto;
    text-align:center;
    font-size:10px;
    font-family:Tahoma, Geneva, sans-serif;
    padding-top:23px;

    }

    /* contact css */
    #contactzero {
    width:100%;
    height:100%;
    background:url(images/logoopacity.jpg) center no-repeat;}

    .contactmerq {width:140px; height:230px; float:left;}

    .contactform {width:300px; float:right; padding-right:20px; text-align:right; padding-top:7px;}

    /* End Contact Css */

    #idox {
    width:300px;
    height: 50px;
    margin:0 auto;
    padding-top:10px;
    text-align: center;
    color:#FFF;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:10px;
    }

    #idox img {border:0;}
    #idox a:link {border: 0;}
    #idox a:visited {color:#FFF;}

    # October 3, 2009 at 8:53 am

    EDIT.

    You could try taking the width and margin properties off body and put them on the #container div instead.
    Like so:
    #container {width:800px; margin:0 auto;}

    Might not work…

    # October 3, 2009 at 10:49 am

    thank you very much…
    It solved the problem…
    Learned something new today…

    Thanks again !

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".