CSS: Cross-Browser Hacks

09.27.2011 07:13 by kbeckman | Comments

A couple weeks ago, I found myself neck-deep in some nasty rendering issues involving Internet Explorer. Finding hacks around IE’s rendering issues is nothing new for anyone who has written a single line of markup targeted for the web. This time was the first time though that I’ve had to dig so deep to get around IE. Below is a list of tricks that I used to overcome and support our poor corporate users constrained by late-adopter IT departments.

 

I’ve also included a few links for further reading. My favorite is a link from Cats Who Code that explains some nifty tricks for completely crashing IE6! Seriously, if you’re still using IE6, your corporate or personal technology strategy is WRONG.


IE7

Use either an asterisk [*] or a period [.] character within the normal style definition to trigger a style specific for IE7…

.some-style-definition {
    margin-left: -965px;
    *margin-left: -900px; /* IE7 */
}
.some-style-definition {
    margin-left: -965px;
    .margin-left: -900px; /* IE7 */
}

IE8

Wrap IE8 specific styles (or repeat a style definition that doesn’t work for IE8) inside a [@media \0screen] block…

@media \0screen { 
    ie8-specific-style {
        .margin-left: -965px; 
    }
}

 

IE9

Use the [:root] prefix with a [\9] terminator for IE9 specific styles…

:root .ie9-specific-style { margin-left: –965px\9; }

 

Firefox

…and in rare instances. Use a [@-moz-document url-prefix()] block for Firefox specific style definitions…

@-moz-document url-prefix() {
    firefox-specific-style {
        margin-left: -965px;
    { 
}

 

References

CSS: Always Show the Vertical Scrollbar

08.05.2011 08:09 by kbeckman | Comments

A quick post to show how to solve an issue I’ve come across more than once… Depending on the layout of your site’s web pages, some pages might not be long enough to invoke the browser’s vertical scrollbar. This isn’t a big deal until you navigate to a page that requires the scrollbar to show its full length. When this happens (and if your content is centered in the page), your page will appear to jump a few pixels to the left to adjust for the invocation of the scrollbar. It’s annoying to QA testers and users, but it’s easy to fix… Here’s a quick CSS snippet to always show the scrollbar on your site whether a page requires it or not.

 

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}