Grow your CSS skills. Land your dream job.

Targeting Mozilla through Conditional Comments or hacks.

  • # September 24, 2011 at 12:36 am

    Here’s my website : http://attilahajzer.host-ed.net/

    view that in Chrome/ Safari whatever. but then check it on mozilla and the Navigation is out of WACK! how do I fix this?!

    My website is losing the little credibility it has.

    # September 24, 2011 at 8:29 am

    Targeting specific browsers is generally a bad idea. IE is obviously the exception, only because it’s approximately 7 years behind. Conditional comments, as you probably know, are a Microsoft creation and only work in IE 5-9. There is zero reason to try and hack this nav for Mozilla (or even IE), you’ll only build upon a poor foundation. Learn why its breaking and how to better style for all browsers.

    The problem here is that you’re relying on the font rendering for sizing the nav. The same fonts will never render exactly the same from browser to browser and more so from platform to platform. You’re also using a lot of relative positioning which isn’t needed and only adds a layer of confusion to whole thing.

    So to fix: clean up the html – it’s pretty clean and simple now, but there’s no reason for the wrapping div.

    Realistically, there’s no need to id the nav either, as it could be targeted with a descendant selector, but I’ve left it in there.

    Now for the css – let’s work backwards here. Instead of floating the anchors and padding top and bottom, make them display: block, pad only the left and right sides and give a height and line-height of 50px. This will center the anchor, give the same padding you originally wanted without the chance of 1 or 2px under or oversize and make the whole block clickable. The li are simply float: left while the ul is simply list-style: none; (you’ve already zeroed the margin and padding with a reset). The nav itself is floating right and moved down with a top margin; also contains the background color, a height, and is position: relative – only for the positioning of the before and after pseudo elements.

    #navigation {
    float: right;
    height: 50px;
    position: relative;
    background: #333;
    margin: 15px 0 0 0;
    }

    #navigation:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 25px solid #333;
    border-bottom: 25px solid #333;
    border-left: 25px solid transparent;
    left: -25px;
    }

    #navigation:after {
    content: "";
    display: block;
    position: absolute;
    right: -25px;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #333;
    }

    header nav ul {
    list-style: none;
    }

    header nav li {
    float: left;
    }

    header nav a {
    color: #FFF;
    padding: 0 12px;
    font-size: 16px;
    font-style: italic;
    display: block;
    height: 50px;
    line-height: 50px;
    }

    nav a:hover, #active { color: #06a8eb; }

    Also note that I changed the pseudo elements a bit. The before now lets the noise show through and they’re both positioned absolutely, relative to the nav.

    # September 24, 2011 at 12:30 pm

    Thank you so much. you’ve saved me a whole bunch of confussion.

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

You must be logged in to reply to this topic.

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