ansaurus

Question

Drupal - Zen Subtheme - Specify stylesheets for non-IE browsers

Answer 1

A:

!IE won't work as I understand it because only IE supports conditional stylesheets.

The way I handle this is to define the other browsers stuff in the main stylesheet and override as needed in the IE conditionals.

You could do this:

 stylesheets[all][] = myspecialsub_theme.css
 conditional-stylesheets[if IE 7][all][] = ie7specific.css

Of course the IE specific stuff will need to do extra work to override any stuff that wouldn't otherwise have been imported but thats what you get for using IE.

Ben 2009-07-18 01:32:12

ack! yeah that ie7 :hover bug is the problem, if ie7 gets the original stylesheet with the numerous :hover declarations then I cannot override them, I have to then add min-height declarations to all those and parent elements, which is a huge pain. any other ideas to prevent IE from seeing original style sheet but ensure other browsers get it?

Kirk Hings 2009-07-20 18:15:06

Only nasty ones like using conditional comments to add an extra class somewhere and use jquery to attach or remove the hover, or using a existing js solution or if you hate caching and want your site to run slow you could even detect it in PHP, feel dirty now

Ben 2009-07-21 18:44:31

Answer 2

A:

Your conditional statement statements need to print like this:

    <link rel="stylesheet" href="/sites/all/themes/style.css" 
type="text/css" media="screen, projection">
    <!--[if IE 7]>
    <link rel="stylesheet" href="/sites/all/themes/ie7.css" 
type="text/css" media="screen, projection">
    <![endif]-->

Remember to place the IE tag after your normal CSS so that you can over write the IE issues.

Also, I wouldn't wrap your main stylesheet in a conditional statement:

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->

Just target IE7 with you first fix and be done.

Cheers!

pinxi 2009-07-22 05:02:29

I really appreciate help but still no go. I tried a few weeks ago and again now in my ie7specific.css to 'reset' the hover styles to be exactly like the a element. It still fails causing the content to jump left when link is hovered. I think this has to do with the notorious hasLayout setting getting set in the first original css, then there is no way to 'unset' it in ie7specific.css. To be clear, I changed my css to deliver regular css to all, then the conditional ie7 to deliver just the ie7specific.css after. Still broken because the :hover elements in the regular css is already in play.

Kirk Hings 2009-07-22 15:17:45

Answer 3

A:

as ben says, you should try overriding the :hover selector in ie7specific.css with .selector:hover{property:none}. make sure to match every selector and set every property to its regular value. if it still does not work, i think a lighter workaround would be to write those :hover or other non-ie specifics in a separate file, and load them through javascript after detecting browser. try http://docs.jquery.com/Utilities/jQuery.support

barraponto 2009-11-10 17:59:40

Answer 4

+1 A:

UPDATE: Just realized I can answer my own questions. Not seeking reputation points, but want to clarify the right solution for anyone else looking into this.

Solution thanks to wikipedia.org/wiki/Conditional_comment

In the subtheme.info:

; stylesheets[all][] = specific_subtheme.css
conditional-stylesheets[if gt IE 7][all][] = specific_subtheme.css
conditional-stylesheets[if IE 7][all][] = ie7specific.css
conditional-stylesheets[if lt IE 7][all][] = specific_subtheme.css

In page.tpl.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
<title><?php print $head_title; ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<?php print $head; ?>
<?php print $styles; ?>
<![if !IE]>
<link href="/sites/all/themes/specific_subtheme/specific_subtheme.css" rel="stylesheet">
<![endif]>
<?php print $scripts; ?>
</head>

Crazy huh?

AAAAND btw finally fixed the hover selector/collapsing margin bug in IE7, using the drupal zen theme, in IE pasting

javascript:alert(content.currentStyle.hasLayout)

into the location bar and hitting enter, would tell me if the id=content element hasLayout (true or false). I kept replacing content with other id names like main-inner, primary, until I discovered main div was false. Adding a property of zoom:1; to that ie7specific.css cured all the problems.

God bless Microsoft.

Kirk Hings 2009-11-19 21:15:59

I found that I needed to disable the default conditional comment styles in zen.info, to be able to use the conditional comment styles defined in MYTHEME.info.

codeinthehole 2010-01-14 21:58:15

ansaurus

tags:

views:

answers:

Drupal - Zen Subtheme - Specify stylesheets for non-IE browsers

related questions