Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS and web browsers

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26098
    bolo
    Member

    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.

    #64004
    Rob MacKay
    Participant

    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 :)

    #64008
    bolo
    Member

    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.

    #64025
    TheDoc
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.