WordPress.org

Ready to get started?Download WordPress

Forums

Internet Explorer Conditional Comments (12 posts)

  1. mutlys
    Member
    Posted 5 years ago #

    Hello,

    I have this theme that - unfortunatelly - has to use some IE6-specific CSS. I'm using the IE conditional comments (better than hack the CSS file in my opinion) but WordPress seems to be stripping it out of the final code.

    As an example, say I have this in my header.php:

    <style type="text/css">
    #header { margin:1px 1px 1px 1px; }
    </style>

    <!--[if IE 6]>
    <style type="text/css">
    #header { margin:55px 55px 55px 55px; }
    </style>
    <![endif]-->

    The problem is, when I visit my blog and check out the source code of the page, the conditional comments above are missing, so the rules specifically for IE6 don't work.

    How can I fix this? Or is it a bug on WordPress 2.6x ?

    I'm using the latest version as of now: 2.6.2

    Thanks,
    Leandro

  2. jberghem
    Member
    Posted 5 years ago #

    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

  3. jberghem
    Member
    Posted 5 years ago #

    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.

  4. mariostella
    Member
    Posted 5 years ago #

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

  5. jberghem
    Member
    Posted 5 years ago #

    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="http://www.yourdomain.com/wp-content/themes/yourtheme/style_ie6.css" rel="stylesheet" type="text/css" />
    <![endif]-->
  6. mariostella
    Member
    Posted 5 years ago #

    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?

  7. Alex Mansfield
    Member
    Posted 5 years ago #

    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?

  8. mariostella
    Member
    Posted 5 years ago #

    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

  9. Alex Mansfield
    Member
    Posted 5 years ago #

    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?

  10. sleektest
    Member
    Posted 5 years ago #

    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.

    http://sleekmakeup.com/wordpress

  11. Alex Mansfield
    Member
    Posted 5 years ago #

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

  12. sleektest
    Member
    Posted 5 years ago #

    Thank you! Yes I managed resolve it. I tried all different codes floating around in wordpress.org 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]-->

Topic Closed

This topic has been closed to new replies.

About this Topic