By 56rosa on

Hello,

How can I include a CSS for IE8 when I have a Zen sub-theme please? Do I need to create an IE8 CSS then?

I can see that there are an ie.css, and an ie-rtl.css as well as an ie.css.
But my footer shows behind my nice menu in IE8. I have not tried yet the other IE (-s).

Thanks

⋅ Categories: Drupal 6.x

Comments

prajaktam’s picture

prajaktam commented

If yo want to create separate css files for IE7 , IE8 then try to add the following function inside your theme's template.php file:

function phptemplate_get_yourthemename_styles() {
  $base_path = base_path();
  $path_to_theme = path_to_theme();
  $css_string = '';

  $css_string .= <<<EOD
<!--[if lt IE 7]>
    <style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/fix-ie6.css";</style>
<![endif]-->
EOD;

    $css_string .= <<<EOD
<!--[if gt IE 6]>
      <style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/fix-ie7.css";</style>
<![endif]-->
EOD;

    $css_string .= <<<EOD
<!--[if gt IE 7]>
      <style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/fix-ie8.css";</style>
<![endif]-->
EOD;

    return $css_string;
}

Then in your themes page.tpl.php add the following line in the head section:
<?php print phptemplate_get_yourthemename_styles(); ?>

Now you can create separate css files for IE6, IE7 and IE8 that is you can create fix-ie6.css for IE6, fix-ie7.css for IE7 and fix-ie8.css for IE8 in your themes folder.
Clear the cache after adding these files. Add some css and check on IE.

Thanks,
Prajakta.

56rosa’s picture

56rosa commented

Hi Prajakta,

Wow, THANKS VERY MUCH for the code.
I will try to do that and see.

Thanks again

56rosa’s picture

56rosa commented

Hi Prajakta,

Is it where I'm supposed to have this line, before the title in the head section? phptemplate_get_Hello_styles(); stays black, not blue.

<head><?php print phptemplate_get_Hello_styles(); ?>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>

Thanks

56rosa’s picture

56rosa commented

Hi,

I have added the function and everything like above. But somehow, it does not take into consideration my new css changes in the fix-ie8.css.

Am I supposed to write the name of my theme somewhere in the code?

Thanks a lot

prajaktam’s picture

prajaktam commented

You need to add the function inside the head section like this:

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print phptemplate_get_Hello_styles(); ?>
  <?php print $scripts; ?>
</head>

The function will remain black only. You need to put this function inside all page template files, that is, if you have page-front.tpl.php or page-your_content_type.tpl.php etc.

What is the location of your css file? Is it - your_theme_name/css-file.css or do you have a separate css folder inside your theme? (your_theme_name/css/css-file.css) If so , then you need to change the path inside the function 

<style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/css/fix-ie6.css";</style>

and in same way for IE7 and IE8. Also note the placement of the closing "EOD;" it should be at the starting of a new line, sometimes while copy pasting it take several empty spaces before the word.
Please clear the cache and check.

Thanks
Prajakta

56rosa’s picture

56rosa commented

Hi Prajakta,

I have: 

function phptemplate_get_Hello_styles() {
  $base_path = base_path();
  $path_to_theme = path_to_theme();
  $css_string = '';

  $css_string .= <<<EOD
<!--[if lt IE 7]>
    <style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/css/fix-ie6.css";</style>
<![endif]-->
EOD;

    $css_string .= <<<EOD
<!--[if gt IE 6]>
      <style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/css/fix-ie7.css";</style>
<![endif]-->
EOD;

    $css_string .= <<<EOD
<!--[if gt IE 7]>
      <style type="text/css" media="all">@import "{$base_path}{$path_to_theme}/css/fix-ie8.css";</style>
<![endif]-->
EOD;

    return $css_string;
}

So, I tried with the path: {$path_to_theme}/css/fix-ie8.css, since I have a css folder inside my theme folder. I have placed the function inside the head section exactly like you showed me above (Thanks!). I only have page.tpl.php so far. And still, I cannot make it work. I don't see any change happening.

I also tried {$base_path}{$path_to_theme}/sites/all/themes/Hello/css/fix-ie8.css for the path but nothing shows either. As well, is it normal that it says "lt" in

instead of "gt" like [if gt IE 7]?

What do you think I should try next please? I did clear the cache several times.

Thanks a lot

56rosa’s picture

56rosa commented

I've just realized that "gt" means greater than, and "lt" means lower than. So, sorry for asking if that should be written like that. Obviously yes...

56rosa’s picture

56rosa commented

Hi Prajakta,

I have a question that may sound very stupid.

Do I need to add an ie7.css as well as an ie8.css before adding a fix-ie7.css and a fix-ie8.css please?

I already have an ie6.css, an ie6-rtl.css and an ie.css as part of the zen sub-theme.

I'm still trying to figure out why my fix-ie8.css won't link properly since the changes don't show up.

Thanks a lot

56rosa’s picture

56rosa commented

Hello Prajakta,

I found what was wrong: I had to add these lines below to my info file named (i.e. my_theme_name.info) in my theme's folder.

stylesheets[all][] = css/fix-ie6.css
stylesheets[all][] = css/fix-ie7.css
stylesheets[all][] = css/fix-ie8.css

So, now my style is showing. I realized this by reading some issues here:

http://drupal.org/node/547940
http://drupal.org/node/924126
http://drupal.org/node/551670

So, thanks a lot again for this piece of code.

However, they seem to mention this module http://drupal.org/project/conditional_styles

But I think that I will stick with what you gave me since it seems to be working!

Thanks again

56rosa’s picture

56rosa commented

Actually, I have spoken too soon: now, it takes into consideration my changes for fix-ie8.css for the main theme.css, which is not what I want.

It would have been too good to be true!

56rosa’s picture

56rosa commented

Hello again,

Thanks to this link: http://drupal.org/node/863316

I was able to find this: http://john.albin.net/css/ie-stylesheets-not-loading

And thus, find this module (http://drupal.org/project/ie_css_optimizer) which helped make my changes appear in IE8.

So, it's great! I'm back to business!!!

Thanks the community!