Grow your CSS skills. Land your dream job.

CSS and web browsers

  • # September 14, 2009 at 4:54 am

    Hi guys, i’m new to css and have currently designed a css website http://www.cya.co.za/qwt. I have also added a javascript menu which works fine but the positioning is all wrong but only on internet Explorer 8 where it is situated at the bottom of the page, the strange thing is it looks fine on Firefox 3 which is where i want the menu located just above the main content block i assume it might be a css issue.

    here is a copy of what my style sheet looks like, am still new to css so apologies for messy code.

    Code:
    body {
    background-color: #000;
    height:100%;
    }

    h3{
    font-family: Verdana;
    font-size: 13px;
    color: #8e0011;
    text-decoration: none;
    border-bottom: 1px #7f7f7f solid;
    margin:0px;
    padding-bottom:8px;
    }

    h4{
    font-family: Verdana;
    font-size: 11px;
    color: #000;
    text-decoration: none;
    margin:0px;
    padding-top:2px;
    }
    .content {
    font-family: Verdana;
    font-size: 10px;
    line-height: 16px;
    color: #000;
    text-decoration: none;
    }
    .contacts {
    font-family: Verdana;
    font-size: 10px;
    font-weight: bold;
    color: #8E0011;
    text-decoration: none;
    }

    .h4red{
    font-family: Verdana;
    font-size: 11px;
    color: #a30013;
    text-decoration: none;
    margin:0px;
    padding-top:2px;
    font-weight: bold;}

    #container{
    margin: 0px auto;
    width:1000px;
    background:url(images/background.jpg) no-repeat;
    }

    #right_block{
    width:201px;
    background: url(images/right_shadow.png) repeat-y;
    height:680px;
    float:right;
    }

    #left_block{
    width:100px;
    background: url(images/left_shadow.png) repeat-y;
    height:680px;
    float:left;
    }

    #center_block{
    width:799px;
    }

    #content_block{
    width:100%;
    position:relative;
    left:100px;
    font-family: Verdana;
    font-size: 10px;
    color: #000;
    text-decoration: none;
    line-height: 16px;}

    #content a, a:visited, a:active{
    color:#135565;
    text-decoration: underline;
    }

    #content a:hover{
    color:#a30013;
    text-decoration: underline;
    }

    #middle_content_block{
    width:752px;
    background-color:#fff;
    padding-left:39px;
    padding-right:8px;

    }

    #picture_block{
    width:124px;
    padding-top:21px;
    padding-bottom:53px;
    }

    #content{
    float:right;
    width:582px;
    }

    #grey_strip{
    background-color:#7f7f7f;
    width:1px;
    float:right;
    margin-left:30px;
    margin-right:15px;
    margin-top:-2px;
    height:360px;
    }

    .clear{
    clear:both;
    }

    #bottom_block{
    width:1000px;
    background: url(images/bottom.png);
    height:54px;
    margin-top:-54px;
    text-align: right;
    }

    .read_more{
    color:#135565;
    text-transform: uppercase;}

    h5{
    font-family: Arial;
    font-size: 10px;
    color: #fff;
    text-decoration: none;
    padding-top:2px;
    }

    I cant seem to understand how t looks fine on one browser and totally different in another. Any help or advise will be much appreciated.

    Rob
    # September 14, 2009 at 6:08 am

    welcome to the world of CSS – and CSS-Tricks lol

    Yea cross browser issues are normal.

    What I would do is look into a CSS Reset.

    It really just takes time and experience to get it to work… one thing I would recommend is validating all your code – making sure its as valid as it can be then working from there. Sometimes validation wont fix all your issues, but it will make a good start…

    Other than that I would just Google for cross-browser tips, and keep going! you have done great to get this far, so done stop now :)

    # September 14, 2009 at 8:45 am

    Thanks for the tip Rob, the whole point i started to use css was to avoid browser compatibility issues. you just cant get away from em.

    # September 14, 2009 at 11:51 am

    Continuing what Rob suggested, another way to combat some cross-browser issues, specifically with IE6, is to use some scripts.

    While I normally try to keep my websites as far from uneccessary scripts as possible, I’ve found one that has seemingly become invaluable to me. That is the ie7.js from Google (or at least Google hosts it, I have no idea if the person that wrote it actually works at Google).

    Simply plop this into your <head></head> and you should have significantly less problems in IE6!

    Code:
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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