By mdoyle on

I have noticed that certain fonts render differently in IE compared to Firefox. I would like to modify the definition
of one core element of my stylesheet (the "body" definition "font:..." line) depending on whether the user is using IE or any other browser. I consider this an attempt to work around an IE specific bug.

Can it be done? If so, how ?

Mike

PS: Installed drupal a week ago, and I *love* it. Using it for one workk related site at the moment, and if this is a success, I'll re-do three other sites to use it.

Comments

freyquency’s picture

freyquency commented

This isn't a drupal method but a friend of mine wrote a script over the weekend: browser-specific Cascading Stylesheets using PHP.

If it did work I'd imagine you'd have to go into the theme template and change some things.

clairem’s picture

clairem commented

Browser-sniffing techniques are rather complicated, and tend to break, so I suggest that they are best avoided.

The solution, I suggest is to use a hack in your CSS to exploit one of IE's weaknesses.

IE doesn't support child selectors, so you could use the CSS snippet below. For the purposes of this example, I'll assume that you want Firefox and other browsers to use a font called "NiceFont", but IE to use a difft one called "ExplorerFont".

body { font-family: ExplorerFont, Sans-serif; }

/* Use child sector to hide next line from IE */
html>body { font-family: NiceFont, Sans-serif; }

The second definition, body>html will be ignored by IE, but picked up by CSS2-compliant browsers such as Firefox/Mozilla and Opera.

No javascript, no PHP, just one extra line in your CSS. Or two if your include a comment, which I suggest is good practice for any hack.

freyquency’s picture

freyquency commented

That's another way to do it, but it depends on what your preference is. Personally, and I'm not looking into either method, I try to stay away from CSS hacks and keep my stylesheet clean. But i'm a css purist.

clairem’s picture

clairem commented

I'm a CSS purist too, but as long as IE6 is the most-widely used browser, we have to choose where we stand on the spectrum betwen the Literary Moose banning of IE from his site, and writing web pages optimised for IE.

I'm sure you are right that it all comes down to preference, but for me the priority is to let folks read my pages roughly as designed. So that means a few compromises and workarounds: I optimise my pages for standrads-compliant browsers, but make sure they degrade gracefully in IE.

Given that approach, the choice about how to achieve that is not just a CSS choice, it's a choice about whether to support a widely-used browser, and if so, between different methodologies for supporting it.

I can only see three ways of doing this. The first is client-side browser sniffing in javascript, which won't work if javascript is off; the second is server-side browser sniffing, which requires the server to generate a custom HTML header for each request, possibly making cacheing less effective, as well as adding to server load. Both are subject to the vagaries of browser-sniffing algorithms, which are necessarily complex to cope with all the difft possible browser identifications and the possibility of browser spoofing.

So I prefer to put an extra entry in my CSS, rather than rely on a lot of complex code. The child-selector hack is one easy method, but another is the underscore hack: an attribute with a leading underscore is recognised by IE if it had no undescore, but ignored by other browsers, e.g.

body {
   font-family: Nice-Font, serif;
   /*  Special font for IE */
   _font-family: IE-Font, serif;
}
freyquency’s picture

freyquency commented

The spectrum visual is a good one. Black = IE, White = Lynx. It's like Twin Peaks, with the Black Lodge and the White Lodge. :) -- Firefox and Opera would be reality.

It's just so depressing that IE is still used by so many... Get FIrefox! (woot! drupal)

genwolf’s picture

genwolf commented

IE is a pig that that probably has cost more than the Y2K bug in the amount of time that it has forced people to spend coding around it's quirks and inadequacies.

I want to use DHTML menu bocks , but they all have problems with IE, when they work at all they are suceptible to rpoblems caused by adding another module using JS or CSS - or they experience problems with theme changes that other browsers handle gracefully.

This seems to be related to IE's layer bug, but not just DHTML, CSS in general is very difficult to tweak for IE, and even if you get it working on one version of IE it may well break on another.

Which is why I need a way to selectively dispaly blocks depending upon the Browser being used insted of checking the user.

dvessel’s picture

dvessel commented

It's a bit late but here it is http://www.dvessel.com/node/82.

Done through php.

–joon
http://www.dvessel.com

Senpai’s picture

Senpai commented

There's a page in the Handbooks that explains how to leverage Internet Explorer's Conditional Comments to feed IE a stylesheet that's separate from any other browsers. It's not a hack, and it's guaranteed to work for future versions of IE too, since it was developed by Microsoft!

http://drupal.org/node/134569

[/Senpai]

****
Joel "Senpai" Farris | certified to rock score