Comments on: Internet explorer is a jerk: css hacks

By: Obagi Blue Peel

Obagi Blue Peel — Thu, 12 Jun 2008 18:14:37 +0000

Obagi…

I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you….

By: wo kann man gratis filme runterladen?

wo kann man gratis filme runterladen? — Sat, 19 Apr 2008 11:23:03 +0000

13 hier klicken und Filme runterladen

wo kann man gratis filme runterladen?

By: Ben Smawfield

Ben Smawfield — Fri, 14 Dec 2007 15:24:29 +0000

This isn’t really a great way of going about things.

The best way to send different CSS to different browsers is now widely accepted to be conditional comments.

You should have stylesheets that have your code working properly in standards-compliant browsers (Firefox).

Then, if things aren’t working as you wish in Internet Explorer, you should have separate stylesheets to target this browser - one for IE7, one for IE6, etc as needed.

These can then be sent to Internet Explorer by placing them in conditional comments in your HTML below where you have linked to your normal stylesheet.

Example:

By: Web 2.0 Announcer

Web 2.0 Announcer — Fri, 14 Dec 2007 10:14:23 +0000

Internet Explorer is a jerk: CSS

[...]Use the [id] attribute to make Internet Explorer 6 ignore certain CSS rules.[...]

By: Matt

Matt — Wed, 12 Dec 2007 17:59:55 +0000

Two words:

overflow:hidden;

By: Kris

Kris — Thu, 06 Dec 2007 16:39:16 +0000

Conditional comments, people, conditions comments… Coupled with hack-management, there really is no better solution…

By: Jan

Jan — Mon, 03 Dec 2007 22:59:50 +0000

yep, IE6 sux also IE7 although little less. thank you for the hack.

By: Jon

Jon — Mon, 03 Dec 2007 20:51:52 +0000

Cool. Thanks for reading. Dustin Brewer’s article (in the comments above) has a good solution too.

By: shane plasebo

shane plasebo — Mon, 03 Dec 2007 18:17:57 +0000

Great blog post. It was very helpful. I often get such problem when combining a height or width to a relatively or absolutely postioned div. I always get a difference between IE and firefox. I often solve it with the !important but sometimes it fails to work. Damn it!

I will try this to see if it work fine.

Thanks again…

By: Jon

Jon — Mon, 03 Dec 2007 13:42:56 +0000

Dustin-Nice article. Seems like that’s probably the best and cleanest solution.

By: Web 2.0 Announcer

Web 2.0 Announcer — Mon, 03 Dec 2007 10:16:43 +0000

Internet Explorer is a Jerk: CSS Hacks | Sassafrass

[...][...]

By: Willy Bergsnov

Willy Bergsnov — Mon, 03 Dec 2007 08:48:04 +0000

The problem with the floated divs arise because IE6 will double the left margin you put on your containers if they are floated right(!). To make the behave good, just set «display» to «inline» for the floated containers and everything will be good – and your overall width can stay the same.

By: Dustin Brewer

Dustin Brewer — Mon, 03 Dec 2007 04:11:57 +0000

I would avoid CSS hacks as much as possible. There are other much better solutions to targeting various IE browsers. They actually implemented an if statement that you can use in your code to check for and apply certain statements to ie7/ie6 or any combination of IE browsers. I wrote an article about it a while back.

By: Jon

Jon — Mon, 03 Dec 2007 01:35:26 +0000

I agree-it’s kind of an inelegant solution. I’m still not exactly sure what the nested content element does, however. Would it work if I just floated both columns to the left? Thanks much for writing.

By: Matt

Matt — Sun, 02 Dec 2007 22:31:58 +0000

I wouldn’t use that hack unless absolutely necessary. That will (in theory) slow down your page and decrease the readability of your code. It also will jack up browsers that render properly but don’t support attribute selectors.

If I ran into a problem like that, I would specify an absolute width on the sidebar and content area, the put a third element within the content element. This would display as block (to fill the entire object) and have whatever padding needs to be put in place. This avoids the hack entirely and allows you to place elements in your body area that don’t abide by the padding (like a divider or something).

Also, I feel that the only CSS hack that should be used if absolutely necessary is the asterisk html hack.(* html …). This is because it can only apply to IE6 (as IE invented the problem). By using a feature that simply isn’t supported, you run the risk of affecting browsers that follow the rules but aren’t yet capable of that kind of advanced parsing.