Special Offer for Blog Visitors — $0.01/m web hosting

Unlimited disk space, unlimited bandwidth, unlimited domain names hosted with FFMPEG support: $10.20/month &mdash 75% discount — $2.55/month
Limited time special offer: Your first month for $0.01 (1 cent only!) — Learn more! — Hurry up, offer expires on Tuesday 31st of August 2010!

Only CSS hack you’ll ever need, seriously.

Posted: March 1, 2007 at 10:24 pm | (20) Comments

While working on a few of my clients pages, I’ve always used other methods for CSS hacks but mostly using PHP to detect the remote user User-Agent and come up with the specific CSS. Until I’ve discovered this one:

You can actually have IE6 specific lines in CSS, it’s as simple as prefixing them with an underscore. Sure, you might start complaining “STANDARDS!!11!” – If I had to choose from a site that works fine in every browser and standards, I’ll go with the more working one. That’s not all! You can actually have lines that are both IE6 & IE7 specific in CSS by prefixing them with a dot.

So to sum it up, let’s say if I use a left margin that has to be 5px in Firefox/Opera, 6px for IE6 & 7px for IE7 – Here’s how I would do it:

margin-left: 5px; /* Left margin for all browsers, mainly Opera, Firefox, etc. */
.margin-left: 7px; /* Left margin of 7px that can be readable by both IE6 & IE7, now other still think it’s 5 while IE6 & IE7 think it’s 7 */
_margin-left: 6px; /* Only IE6 reads this and changes the value to 6px */

I have to admit I was pretty happy upon discovering this hack; I’ll sure be using it for a while now that I have found a pretty good one.

Do you have any of your own do not need loads of JavaScript and/or PHP code to work? Comment on!

Comments

Edwin Martin
Posted on: March 2, 2007 at 6:57 am

You don’t need any CSS hack, seriously.

I make quite complicated CSS designs and I’ve never used any hacks.

I do use conditional comments to load seperate css files for older versions of IE. It’s the only method that’s future proof.

Dave Worley
Posted on: March 2, 2007 at 10:09 am

There are two variations of this hack:

#id {

width: 100px;

_width: 95px; /* works ONLY in IE6 */

*width: 105px; /* works in BOTH IE6 and IE7 */

}

Using these hacks in the correct order means that you can address both of the most popular versions of IE.

It’s worthwhile noting that this will cause your CSS to be invalid when run through the W3C CSS Validator. That’s academic, though, especially when a client has a check waiting!

snowdog
Posted on: March 2, 2007 at 11:29 am

It is much easier to find and modify something in separate browser-specific files then in one big file. And separate files (loaded with conditional meta tags) are CSS valid…
So why should we use not valid method if it is not better (and not faster) at all?

Graham
Posted on: March 2, 2007 at 3:04 pm

Yeah conditional comments are great!!! What would be MORE awesome would be if EVERY browser had their own way to do conditional comments! Right now, only IE has them but just imagine the juicy goodness if we targeted EVERY browser with its own crazy pseudo-html commenting scheme. TEH AWESOME!!!

….(now removing sarcasm)….

Conditional comments are a HORRIBLE IDEA PEOPLE. What part of ‘proprietary markup’ don’t you understand?!? And stop saying ‘conditional comments’ like its some browser-agnostic thing. They are an IE-ONLY feature which no other modern browser maker would stoop so low as to do.

Don’t get me wrong, CSS hacks aren’t great either, but at least I can put my hacks in the stylesheet away from the regular markup.

Bugs
Posted on: March 5, 2007 at 3:00 am

Do u use any TOOL for generating complex CSS ? Please help

Romulus
Posted on: March 9, 2007 at 9:52 am

Nice tip, thank you.

Allthough, I agree with Edwin Martin, this might be very helpfull in certain cases.

But is this hack W3C compliant ?

SlechtValk
Posted on: March 23, 2007 at 11:54 am

@Romulus

No this is NOT i repeat NOT W3C complient “property _width does not exist”

grtz SlechtValk

Jon Harvey
Posted on: March 26, 2007 at 3:07 am

Ahhh the Harvey Morse Code hack is spreading ;-)

Romulus this is not compliant code as it throws errors in browsers such as Firefox (using the Firebug plugin*) however I’ve tested it pretty throughly across lots of browsers and it seems to render as expected in all of them.

* I recommend everyone downloads the FireBug plugin for testing their sites.
https://addons.mozilla.org/en-US/firefox/addon/1843 it’s VERY helpful.

TH3 M45T3R
Posted on: March 26, 2007 at 9:05 pm

This is nice, and it’s much faster/easier than some of the other hacks out there! As much as I don’t like to build to any specific browser, IE6 just fails miserably on several things. Having a quick CSS hack to fix IE6 saves dozens of hours of dual- or triple-CSS development.

The goal, of course, is to build standards-compliant CSS, but since somebody, somewhere (*cough* MS) chose to basically ignore them for so long, we have to compensate.

And, just how many of the regular, day-to-day users really care that the CSS on any given site validates according to the W3C? Just how many of those users have probably even heard of the W3C? They most likely only care that the site works and looks appealing.

Personally, I have always tried to avoid hacks whenever possible. Now that there are two very different versions of the most widely used browser available, every once in a while, a simple hack is the only logical solution. It’s either that, or we continue to build to the more rampant incapabilities of the older version.

That’s my two cents!

3stacks
Posted on: June 4, 2007 at 9:01 pm

Worked for me. Thanks for the help!!!

Patrik
Posted on: October 3, 2007 at 8:54 am

I am soo glad I am not a web designer/developer, which leaves me free to blatantly ignore how the pages I create look like in msie.

It is so refreshing :D

FluidMarkup Blog
Posted on: November 13, 2007 at 2:07 pm

[...] Only CSS “Hack” You’ll Ever Need [Try to stay away from these if possible] [...]

Ajax
Posted on: March 10, 2008 at 6:00 pm

Seriously, I’d rather have these hacks than conditional comments or whatnot. It just simply works without all the hassle and extra load of lines to add.

Who cares if its not standards compliant? Ive asked ALL our clients about this and their reply… “As long as it works AND looks the same in all major browsers then its totally fine”. I mean, isn’t them who you’re working for anyways? I’d go for my client’s satisfaction.

Thanks a lot for sharing. Will do the same thing with the rest of my team.

john
Posted on: April 8, 2008 at 9:15 pm

@Graham – you are quite clearly an absolute cunt. i agree with conditional comments. Some people on here are talking about them as though they have to write out a completely different FULL style sheet for each browser, just put the rule which needs changing in the browser specific style sheets, and add them in the correct order.. .dont see how why that takes longer, or is less acceptable than hacks… and as stated by others here.. they validate.

Lucas
Posted on: May 15, 2008 at 5:21 pm

Hey guys…. could somebody take a look at my site and let me know any tips to optimize, http://www.dealtoplay.com.

All feedback is greatly appreciated!!

thanks
Lucas
marketing@esimplifyme.com

dex online
Posted on: October 10, 2008 at 3:23 pm

background-color: transparent#; for safari mac

Will moving to a dedicated virtual host from a shared hosting improve my site performance?
Posted on: November 15, 2008 at 4:31 pm

[...] on a shared hosting (Media temple). I’m wondering if dedicated-virtual will be faster.Only CSS hack you?ll ever need, seriously, by VEXXHOST web hosting Leave a [...]

urmom
Posted on: June 12, 2009 at 10:31 am

Just keeping this alive, I like it :)

=8)-DX
Posted on: July 24, 2009 at 5:22 am

>>”It is much easier to find and modify something in separate browser-specific files then in one big file”. I don’t think that’s always the case. Often I have multiple css files (calendar.css) adn I don’t want to have 3 or more versions of each file. These hacks are good- you can easily remove them later and add them only for clients who are IE6 nit-picky. Not all clients are.

Newbie
Posted on: August 5, 2009 at 2:04 am

Excellent discovery, yet another way to beat IE6 and IE7. Thanks for the share.



Post a comment

Subscribe

Categories

Archives

Coming from another web host?

Transfer SiteWe understand how difficult switching web hosting companies can get, that is why we assist all of our new clients by handling the complete moving procedure for free! We make switching hosts quick and easy for you, we'll move your files and your databases from your old host to our servers all for free.

What our clients are saying

My Auto responder website was a nightmare for me, I was always kicked out from web hosting companies simply because I email too much, my responder was double optin and there were no spam issues. But with you, things changed, I am relaxed and can concentrate on my main business. Also you have a very responsive technical support that really helps answer my questions.

Awards

See More Awards »
Monitored by Sucuri
Technology Partners