Grow your CSS skills. Land your dream job.

First Attempt at Conditional Stylesheets

  • # December 7, 2009 at 2:45 am

    Hello again folks

    I’m cleaning up the last bits of trouble on my site and I’m to the point of check cross browser compatibility of my CSS. Everything seems to be fine except for one big thing; my main navigation on my front page. I’m trying a new effect where, if the user highlights a menu item, the link and background change giving it more emphasis and a transparency effect. Everything looks groovy in Firefox, but switching to IE and Safari, the alignment of the images is off on the second and third menu items when highlighted.

    I’m assuming that I am going to have to try and fix this using conditional stylesheets to target fixes for each browser. Before dig into figuring out how to do that, I want to make sure my code is as good as it can be so I am not heaping fixes on top of garbage. I ran my site through the W3 Validator like Chris C. advises in the forums and cleaned up some junk that I wrote first. Now I was hoping to get some other eyes on what I wrote to make sure I’m not causing myself any extra grief.

    Here is my HTML creating the links and divs

    and here is the CSS to style the mouseover effects

    Code:
    #block-block-6{
    background: url(images/Fullbanner_0.png) no-repeat scroll 25px 29px;
    min-height: 320px;
    padding: 3px 0px;
    }

    #block-block-6 .red a:hover {
    background-position: -24px 14px;
    }
    #block-block-6 .red a:hover{
    background-image:url(images/Fullbanner_0.png);
    background-repeat:no-repeat;
    }

    #block-block-6 h3 a {
    -moz-border-radius-bottomright:30px;
    -moz-border-radius-topleft:30px;
    font-size:150%;
    height:66px;
    padding:0px 0px 0px 30px;
    }
    .red a:hover, a.red:hover {
    background:#5E2510 none repeat scroll 0 0;
    color:#FFFFFF;
    }

    .red a, .red cite strong {
    color:#843418;
    }

    /*Green DIV*/
    #block-block-6 .green a:hover {
    background-position: -25px -76px;
    }
    #block-block-6 .green a:hover{
    background-image:url(images/Fullbanner_0.png);
    background-repeat:no-repeat;
    }

    .green a:hover, a.green:hover {
    background:#4F5C4E none repeat scroll 0 0;
    color:#FFFFFF;
    }
    .green a, .green cite strong {
    color:#7B8D78;
    }

    /*Yellow DIV */

    #block-block-6 .yellow a:hover {
    background-position: -25px -166px;
    }
    #block-block-6 .yellow a:hover{
    background-image:url(images/Fullbanner_2.png);
    background-repeat:no-repeat;
    }

    .yellow a:hover, a.yellow:hover {
    background:#777237 none repeat scroll 0 0;
    color:#FFFFFF;
    }
    .yellow a, .yellow cite strong {
    color:#FFFFFF;
    }

    #block-block-6[id] h3 a {
    height:auto;
    min-height:66px;
    }

    #block-block-6 h3 a {
    display:block;
    text-decoration:none;
    }

    #block-block-6 h3 cite {
    font-size:50%;
    padding:3px 0 1em;
    }

    /*end mainbanner CSS*/

    Any suggestions on clean up or tips for the conditional stylesheet if you see them would be appreciated, or if you like the effect and just want to swipe the code (like I did) feel free to let me know. You can see the effect on my site here: ecoevolution .org , just mouse over the primary links in the big graphic.

    Rob
    # December 7, 2009 at 2:52 am

    Do you have a live linky :D It would be very useful :)

    # December 7, 2009 at 3:13 am

    Yup Yup sorry.

    http://www.ecoevolution . org

    # December 7, 2009 at 3:35 am

    Hmmm… yea. So the problem is that IE and Firefox display some types of margin/padding combinations differently. The best way to avoid this is to have as few margins and paddings as possible.

    It looks like the problem is from your h3′s top and bottom margin. I hit a slight dead end there, but I would start by giving all h3′s a margin:0, and see if IE and FF are "broken the same"… and then work from there.

    Hope that helps,

    # December 7, 2009 at 4:59 am

    Looks like a good place to start. I updated my CSS with

    Code:
    #block-block-6 h3{
    margin: 0;
    }

    and just eyeballing it, it looks like the image moved to ::nearly:: the same position in Safari, IE and Firefox. I’ll try repositioning from there like you suggest using padding and see what I come up with. If anything, clearing the margins so I just have to conditional stylesheet the padding would be good, not trying to tweak two things at once.

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

You must be logged in to reply to this topic.

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