How do I make my theme, Gallery, look good in Internet Explorer? WordPress
- SOLVED
Hi,
My site is using the theme Gallery, which is a child theme of Thematic. I have it all up and running in Firefox and Chrome, however, the navigation menu, the header, and the cateogry background overlap like crazy in Internet Explorer.
The only option I've found so far is to manually adjust the margins of the three menu elements (the header, the navigation bar, and the background that appears when you click on a certain category), but this obviously makes the three elements drift apart in Firefox and Chrome.
www.stefanchavdarov.com
What should I do?
Answers (2)
Nathan Parikh answers:
The best way to implement IE CSS "hacks" is to create a separate stylesheet.
You should create a new css file and include it via conditional comments. Just include this in your header:
<!--[if IE 6]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/ie6.css" type="text/css" media="screen" />
<![endif]-->
You could also try adding a Javascript fix that sometimes works in "forcing" IE6 to behave by putting this in the header code given above:
<!--[if IE 6]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/ie6.css" type="text/css" media="screen" />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE7.js"></script>
<![endif]-->
Let me know if that works for you.
Nathan Parikh comments:
To put this into your Thematic child theme here's what you have to do.
Edit your functions.php file and put the following:
function childtheme_create_stylesheet($content) {
$content .= "\t";
$content .= "<!--[if IE 6]><link rel=\"stylesheet\" type=\"text/css\" href=\"";
$content .= get_bloginfo('stylesheet_directory') . '/';
$content .= 'ie6.css';
$content .= "\" /><![endif]-->";
$content .= "\n\n";
return $content;
}
add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');
That will add your custom ie6.css into the header of your site if the user is using IE6.
horaxh comments:
Dear Nathan,
Seeing how my theme is a child theme that by itself only has two files, style.css and functions.php, I'm afraid I can't include anything in my header file.
I think I'm looking for a solution specific to my theme, Gallery, which builds on top of Thematic.
Nathan Parikh comments:
Right, if you include the code I gave you in your Child Theme's functions.php file, that will put the code in the header for you - one of the cool things when working with Thematic child themes! :)
Try it out and let me know what happens.
horaxh comments:
Yes, sorry, I typed and submitted my reply to you without seeing the code you included for functions.php.
This worked, so thanks a lot!
Buzu B answers:
You can use conditional comments.
<!--[if IE 6]>
Adjust margins here
<![endif]-->
You can change the 6 for the version you want to to fix or take it out to target all versions.
horaxh comments:
If i was using a regular Wordpress theme this is what I would have done.
However, my theme basically builds on another theme, Thematic, that I also have installed on my site. So my theme, Gallery, only has two files, style.css and functions.php, that define it. I am not supposed to tinker with the Thematic install at all.
For instance, the menu bar has an id of "access", however, nowhere in my functions.php does it refer to "access" at all - I assume it's done through the Thematic files.
So I'm looking for a specific fix for Gallery, I'm afraid.
Buzu B comments:
on your css file you can use uderscores to specify IE only styles. You would do something like
#myElem{
margin:10px;
_margin:14px;
}
most browser will ignore the _margin declaration, but IE will not. Notice that it is important that the declaration with the underscore be after the normal declaration, other wise it won't work.