Cross browser problems

Discussion in 'CSS' started by moz-art, Dec 1, 2008.

0
  1. #1
    mozart


    newbie


    Posts: 3
    Joined: 2008-12-01
    Posted: Mon, 2008-12-01 22:53

    Hello, I'm new to css styling, I'm a designer not a programmer, but I'm now learning the programming side too. So I started with some easy sites creating them with css stylesheets. No problem there, I seem to be doing all right untill I start testing my sites in different browsers. it seem to be working in IE7 but not in IE6 or firefox (different issues. I hope my code isn't half that bad. The link to the site I'm working on is //users.skynet.be/fb224438/ranch/index.html. Here is the code:

    css:

    @charset "utf-8";
    body {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    }
    body{
    text-align: -moz-center;
    }
    a:link {
    color: #000000;
    }
    a:visited {
    color: #000000;
    text-decoration: none;
    }
    a:hover {
    color: #000000;
    text-decoration: none;
    }
    a:active {
    color: #000000;
    text-decoration: none;
    }
    .divMainContainer{
    width: 720px;
    }
    .wrapperHeader{
    width:720px;
    margin-left:auto;
    margin-right:auto;
    }
    .divHeaderNav{
    display:block;
    float: left;
    width: 520px;
    height: 146px;
    }
    .divHeader{
    width: 520px;
    height: 106px;
    }
    .divNav{
    width: 520px;
    height: 40px;
    background-image:url(images/im_nav.jpg);
    background-repeat: no-repeat;
    font-family:"Times New Roman", Times, serif;
    font-size: 29px;
    text-align: left;
    padding-left: 40px;
    }
    .divMenu{
    display: block;
    float: left;
    width: 200px;
    }
    .divTopMenu{
    width: 200px;
    height: 14px;
    background-image: url(images/im_menu_top.jpg);
    background-repeat: no-repeat;
    }
    .menu {
    display:block;
    float:left;
    width:200px;
    text-align: left;
    margin:0px;
    padding:0px;
    }
    .menu li{
    height: 22px;
    width:200px;
    padding:0px;
    text-decoration: none;
    }
    .menu li > a {
    display:block;
    height:100%;
    width:100%;
    text-align: left;
    background: url(images/im_btn.jpg);
    background-repeat: no-repeat;
    padding-top:0px;
    padding-left: 20px;
    font-size:18px;
    font-family: "Times New Roman", Times, serif;
    color:#FFFFFF;
    text-decoration:none;
    }
    .menu li > a:hover{
    background-position: 0 -22px;
    }
    .menu li > a.selected {
    background-position: 0 -22px;
    }
    .divText{
    margin-top: 30px;
    margin-left: 40px;
    margin-right: 75px;
    font-family:"Times New Roman", Times, serif;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    }
    .divContentGallery{
    width:720px;
    height:400px;
    background-image:url(images/im_content.jpg);
    background-repeat: no-repeat;
    }
    .divPictureGallery{
    width: 720px;
    height: 304px;
    background-image:url(images/im_picture.jpg);
    background-repeat:no-repeat;
    }
    .divContentInstruction{
    width: 720px;
    height: 400px;
    background-image:url(images/im_content.jpg);
    background-repeat: no-repeat;
    }
    .divPictureInstruction{
    width: 720px;
    height: 304px;
    background-image:url(images/im_picture.jpg);
    background-repeat:no-repeat;
    }
    .divContentHome{
    width: 720px;
    height: 400px;
    background-image:url(images/im_content_home.jpg);
    background-repeat: no-repeat;
    }
    .divPictureHome{
    width: 720px;
    height: 304px;
    background-image:url(images/im_picture_home.jpg);
    background-repeat:no-repeat;
    }
    .divContentContact{
    width: 720px;
    height: 400px;
    background-image:url(images/im_content_contact.jpg);
    background-repeat: no-repeat;
    }
    .divPictureContact{
    width: 720px;
    height: 304px;
    background-image:url(images/im_picture_contact.jpg);
    background-repeat:no-repeat;
    }
    .divContentAbout{
    width: 720px;
    height: 400px;
    background-image:url(images/im_content.jpg);
    background-repeat: no-repeat;
    }
    .divPictureAbout{
    width: 720px;
    height: 304px;
    background-image:url(images/im_picture_about.jpg);
    background-repeat:no-repeat;
    }
    .divgallery{
    width: 500px;
    height: 380px;
    padding-top: 30px;
    }
    .divgallery{
    text-align: -moz-center;
    }
    .divFooter{
    width: 720px;
    height: 40px;
    padding-top: 5px;
    font-family:"Times New Roman", Times, serif;
    font-size: 10px;
    color:#000000;
    }
    .wrapperMenu{
    width: 720px;
    margin-left:auto;
    margin-right: auto;
    }
    .divwsk{
    display: block;
    float:left;
    width: 300px;
    font-size:10px;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    text-decoration:none;
    text-align: right;
    }
    .menu1 {
    display: block;
    float: left;
    width: 340px;
    margin:0px;
    }
    .menu1 li{
    display: block;
    float: left;
    padding-right:10px;
    padding-left: 0px;
    }
    .menu1 li > a {
    text-align: left;
    font-size:10px;
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    text-decoration:none;
    }
    .menu1 li > a:hover{
    color: #0066FF;
    }
    .menu1 li > a.selected {
    color: #0066FF;
    }
    .style2{
    color:#FFFFFF;
    }

    HTML on link above

    Thanks
     
    moz-art, Dec 1, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    You need to be testing your site first in Firefox as it is the modern browser, while checking in IE to see when and where it screws things up. Your markup validates so get it working in FF, then we can hack for crappy IE.
     
    drhowarddrfine, Dec 1, 2008 IP