css browser compatibility

Discussion in 'Support and Debugging' started by viciousdreamz, Apr 11, 2011.

  1. viciousdreamz Newbie

    Message Count:
    38
    Likes Received:
    5
    I need help with my css styling. My divs positioning looks fine in firefox but they look out of positioning in IE
    Can someone help please?

    Show Spoiler

    body{background-color: #000000; margin:0px;}
    .menu{margin:0 auto; padding-left:5px; height:30px; width:99.5%; display:block; background:url('topMenuImages.png') repeat-x; -moz-border-radius:5px}
    .menu li{padding:0; margin:5; list-style:none; display:inline;}
    .menu li a{float:left; padding-left:45px; padding-right:35px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
    .menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
    .menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
    .menu li a:hover span{background-position:100% -60px;}
    .menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
    .menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

    .bar {margin-top:10px; auto; padding-left:15px; padding-bottom:0px; width:633px; height:23px; border: 1px solid black; background-color:#000000;}
    .bar {-moz-border-radius:5px;}
    .bar{color: #ffffff; font:12px Verdana, Arial, Helvetica, sans-serif;padding-top:7px;}
    .social {margin-top:10px; auto; padding-left:15px; padding-bottom:0px; width:303px; height:23px; border: 1px solid black; background-color:#000000;}
    .social {-moz-border-radius:5px;}
    .social{color: #ffffff; font:12px Verdana, Arial, Helvetica, sans-serif;}
    .social{position:absolute;
    top:170px;
    left:890px;
    padding-top:7px;
    }

    #wrapper{
    background-color: #ffffff;
    border: solid 1px #AAA;
    width: 1000px;
    height:1000px;
    padding: 10px 10px;
    margin: 0px auto 25px auto;
    -moz-border-radius:5px;
    }
    .marquee {font-size: 18px; color: #000000; font-weight: bold; margin-top: 10px; margin-bottom: 10px;}
    #maincontent{
    width:643px;
    height:700px;
    border:solid 1px #aaa;
    position:absolute;
    top:250px;
    left:210px;
    Text-align:center;
    padding-top:10px;
    }
    #sidecontent{
    width:323px;
    height:700px;
    border-left:solid 1px #cccccc;
    position:absolute;
    top:250px;
    left:885px;
    text-align:center;
    padding-top:10px;
    }

    Html
    Show Spoiler

    <!DOCTYPE html PUBLIC "_//w3c//DTD XHTML 1.0 Transitional///EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title>List test</title>
    <link rel="stylesheet" href="style1.css">
    </head>
    <body>
    <div id="wrapper">
    <img src="myimage.jpg" width="960" height="93">
    <ul class="menu">
    <li><a href="/home" class="active"><span>Home</span></a></li>
    <li><a href="videos.html"><span>Videos</span></a></li>
    <li><a href="news.html"><span>News</span></a></li>
    <li><a href="games.html"><span>Games</span></a></li>
    <li><a href="tutorials.html"><span>Tutorials</span></a></li>
    <li><a href="about.html"><span>About</span></a></li>
    </ul>
    <div class="marquee"><marquee>News: Gears of war 3 beta starts on april 18th!</marquee></div>
    <div class="bar">
    Welcome to ViciousDreamz Website...
    </div>
    <div class="social">
    Social Networking
    </div>
    <div id="maincontent" valign="top">
    <p>Below is a video of the upcoming gears of war 3 beta.</p>
    </div>
    <div id="sidecontent">
    Some ramdom text

    </div>
    </div>
    </body>
    </html>


    I'm a noob in web design, this is actually my first attempt!
    viciousdreamz, Apr 11, 2011
    #1