Drupal - Zen Subtheme - Specify stylesheets for non-Internet Explorer browsers

2
votes

On Drupal 6 using a Zen subtheme, our custom stylesheet is beautiful and perfect everywhere except in Internet Explorer 7. It appears to be the :hover bug, where any link we hover over causes the main content area to jump over the left sidebar (is that called margin collapse or margin reset?).

Tried setting min-height: 1% on all :hover and parent elements, but there are soooo many finally decided to specify an 'ie7specific.css' which has zero hover elements defined. Tough luck for Internet Explorer 7 users.

However, in the myspecialsub_theme.info file the myspecialsub_theme.css is automatically sent to Internet Explorer, therefore creating the :hover elements. We need to specify Internet Explorer 7 gets its specific CSS and all other browsers get the regular.

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

It works for Internet Explorer versions, but Firefox is not getting the stylesheet. Why isn't the !IE working, what should I use instead?

Or is there a different solution for the problem described?

UPDATE: My comment did not display well below, here is the solution I finally found:

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">
<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?

FINAL UPDATE: Best yet, I finally discovered the source of :hover bug in the Zen subtheme. The div main needs a zoom:1; and none of these conditional stylesheets are necessary. But there you go if you cannot solve the original problem.

4
drupalthemesstylesheet
Found 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: <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]> – IdahoFamilyMan

4 Answers

2
votes

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">
<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.

0
votes

!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.

0
votes

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!

0
votes

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-Internet Explorer specifics in a separate file, and load them through JavaScript after detecting the browser. Try http://docs.jquery.com/Utilities/jQuery.support.