Grow your CSS skills. Land your dream job.

Category Pages Dont look right in Google Chrome

  • # November 4, 2009 at 8:40 am

    Hi
    Chris m facing this problem
    http://www.crispytech.com/category/firefox/
    when i open any category page of my blog in google chrome the posts have blue background and and white text on it.But the category pages works fine in other browsers like internet explorer or firefox.i don’t know what is the problem.I tried a lot to figure this out but in vain.You can feel the difference by opening the above mentioned url in google chrome and firefox.Seeking for help.
    Thanx in anticipation.

    Code:
    /*************************************
    Headings
    **************************************/
    h1, h3 {
    color: #FFFFFF;
    background: #4778B3 url(images/titlebg.jpg) top right no-repeat;/*post-title-background*/
    font-size: 22px;
    font-weight: normal;
    font-family: “Trebuchet MS”, Arial, Helvetica, Sans-Serif;
    margin: 0px 0px 5px 0px;
    padding: 8px 10px;
    }
    h3.h1 { /*make homepage h3′s for the first 2 stories look like H1 */
    font-size: 22px;
    }
    h1 a, h3 a, h1 a:visited, h3 a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }
    h1 a:hover, h3 a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    }
    h2 {
    color: #000;
    font-size: 24px;
    font-family: “Trebuchet MS”, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    padding: 10px 0px;
    line-height: 150%;
    margin: 0px;
    }

    h2 a, h2 a:visited {
    color: #6B030B;
    text-decoration: underline;
    }
    h2 a:hover {
    color: #000000;
    text-decoration: none;
    }
    h3 {
    font-size: 18px;
    }
    #sidebar h3 {
    font-size: 22px;
    }
    h3 a, h3 a:visited {
    color: #FFF;
    text-decoration: none;
    }
    #sidebar h2 {
    margin: 0px; padding: 5px 0px;
    font-size: 12px;
    font-family: Arial, Helvetica, Sans-Serif;;
    font-weight: bold;
    color: #3D474E;
    }
    #sidebar #popular h2 {
    color: #000000;
    font-size:14px;
    }
    h6 {
    color: #000;
    font-size: 24px;
    font-family: “Trebuchet MS”, Arial, Helvetica, Sans-Serif;;
    font-weight: normal;
    padding: 10px 0px;
    line-height: 150%;
    margin: 0px;
    }

    this is the headings css and below is the css for main container and content are

    Code:
    /*************************************
    Main Container
    **************************************/
    #container {
    width: 970px;
    background: #FFF url(images/container-bg.gif) top left no-repeat;
    text-align: left;
    margin: 0 auto;
    padding: 0px 10px;
    border: 0px solid black;
    clear: both;
    }
    .container-bot-bg {
    clear: both;
    height: 9px;
    width: 990px;
    display: block;
    background: url(images/container-bot-bg.gif) no-repeat;
    margin: 0px auto;
    }
    /*************************************
    Content
    **************************************/
    #content {
    width: 590px;
    float: left;
    margin: 14px 0px 20px 5px;
    display: block;
    }
    #content p{
    margin: 0px;
    line-height: 18px;
    padding: 0px 0px 10px 0px;
    font-size: 13px;
    }
    #content p img{
    border: none;
    padding: 0px 5px 15px 0px;
    }
    #content ol {
    list-style-type: decimal;
    line-height: 18px;
    margin: 0px;
    padding: 0px 0px 10px 35px;
    }
    #content ul {
    list-style: none;
    margin: 0px;
    padding: 0px 0px 10px 0px;
    }

    #content li {
    margin: 0px;
    padding: 0px;
    }

    #content ul li {
    list-style: square outside;
    margin: 0px 100px 0px 30px;
    padding: 5px 0px 0px 5px;
    }
    #content .post-meta-top {
    display: block;
    margin: 8px 0px 15px 0px;
    padding: 5px 10px;
    font-size: 12px;
    color: #8E8F91;
    clear: both;
    }
    #content .post-meta-bottom {
    background: #FBFCFE url(images/postmetabottombg.jpg) bottom left no-repeat;
    display: block;
    border-top: 1px solid #DFE3E6;
    margin: 0px 0px 15px 0px;
    padding: 12px 10px;
    font-size: 12px;
    color: #535353;
    clear: both;
    }
    .post-meta-bottom a {
    color: #535353;
    text-decoration: none;
    }
    .post-meta-bottom a:hover {
    text-decoration: underline;
    }
    .cat {
    float: left;
    width: 75%;
    text-align: left;
    }
    .cat span {
    background: url(images/catbg.gif) 0px 0px no-repeat;
    padding: 0px 0px 0px 18px;
    }
    .comm {
    float: right;
    width: 25%;
    text-align: right;
    }
    .comm span {
    background: url(images/commbg.gif) 0px 0px no-repeat;
    padding: 0px 0px 0px 18px;
    }
    .auth {
    float: left;
    width: 50%;
    text-align: left;
    }
    .auth span {
    background: url(images/authbg.gif) 0px 1px no-repeat;
    padding: 0px 0px 0px 15px;
    }
    .auth a {
    text-decoration: none;
    }
    .date {
    float: right;
    width: 50%;
    text-align: right;
    }
    .date span {
    background: url(images/datebg.gif) 0px 0px no-repeat;
    padding: 0px 0px 0px 18px;
    }

    # November 4, 2009 at 9:10 am

    Like the sticky says "Validation: It’s your cross browser compatability friend!" http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.crispytech.com%2Fcategory%2Ffirefox%2F 58 errors.

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

You must be logged in to reply to this topic.

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