Internet Explorer Conditional Comments

Try adding the CSS in an external style sheet instead of an embedded style sheet. That’s how I have it and it works fine.

You see the way you format it means that for IE 6 there are 2 embedded style sheets. Although you’re allowed to have as many external style sheets as you like, you can only have one embedded one.

I did it like this:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link href="<?php bloginfo('template_url'); ?>/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Just place your IE6 CSS file in the same folder as the style.css file

Although you’re allowed to have as many external style sheets as you like, you can only have one embedded one.

Not entirely true. You can have more than one internal stylesheet but it becomes very confusing. External is just the way to go since you can link as many pages to it as you want.

hi jberghem, thanks but your trick does not work for me. Use 2.6.3, but did not work in 2.5.1 either

Be sure and check that your paths are correct. The <?php bloginfo('template_url'); ?> in the conditional tag points to the theme folder of the selected theme. Adding the /style_ie.css behind it means the stylesheet in in your theme folder. Of coarse you need to create a file named style_ie.css and add the necessary conflicting css to have IE6 override the style.css. Note that the <!--[if lte IE 6]> does not apply to IE7.

This is also not a WordPress trick so the the WP version is irrelevant.

If you’re just editing a theme for your own use instead of developing a theme for others to download, use the direct path to the IE stylesheet. It would look somewhat like this:

<!--[if lte IE 6]>
<link href="https://www.yourdomain.com/wp-content/themes/yourtheme/style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Thanks for replying, the funny thing is that it used to work fine, and even stranger the first thing you see when you load the page with IE is the correct CSS (I have a different header image for this purpose in the two CSS files) , but after a split second it loads the other CSS file for non IE browsers… funny, uh? All reloads get the cached CSS file (the wrong one) so I have to clear the cache to see the right CSS for a second again.
Any one any idea? Anyone the same problem?

Which CSS file is being called first? It sounds like your IE specific style sheet is being overridden by the generic style sheet. Can you provide a link to the page that is causing the problem?

Hi Alex, I found the problem..tired of it all I deleted both css links and it did not screw things up as expected in FF and in IE just the same behavior!! So then the css must have been called some place else, and in fact it was called in the friggin’ footer, but it called the FF style only..I said to myself..what in the heck is the css doing in the footer? Le me get rid of it and place all nice things in the header where they belong! But hey, no sir! It did not find the link anymore, it screwed all up, so now I have a double call..for the CSS
Why does it have to be this way? It looks very weird to me…anyone any idea? Alex?
Thanks

I’m not sure what to tell you. Can you post a link to the page you’re having problems with so we can take a look?

Hi Alexmansfield,

Please see my link below and tell mw what is the problem. I have pasted the code mentioned above in my header file and I also see the correct layout for a split second only in IE6 afterwhich the sidebar falls to the bottom of the page. The CSS works fine for FF and IE7 but not IE6.

https://sleekmakeup.com/wordpress

@sleektest

Did you get it fixed? I visited your site using FF, IE7, IE6 (and Safari just for good measure) and they all looked the same. I couldn’t get the sidebar to drop down to the footer no matter how hard I tried. Hopefully that means you got it figured out. Sorry I couldn’t be of much help.

Thank you! Yes I managed resolve it. I tried all different codes floating around in www.ads-software.com and this one solved the problem.

<!–[if IE]>
<style>
.container-right ul li { width: 150; padding: 0;}
.container-right ul li ul { width: 100%; }
</style>
<![endif]–>