javascripthtmlcsswordpressinternet-explorer

Reputation: 5062

IE specific CSS not rendering

Can someone help me why IE specific CSS is not working on IE?

Here is the link to live site: http://www.themebia.com/pretavivre/

I'm trying to fix the top nav bars in IE. The nav bar looks good in Chrome and FF but not looking good in IE.

I've added appropriate below css fix for IE in the head of html.

<!--[if IE]>
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory')?>/css/ie.css"/>
        <![endif]-->

The ie.css is properly linked in head element but css is not working in IE.

You can reach the ie.css using http://www.themebia.com/pretavivre/wp-content/themes/pretAvivre/css/ie.css

NOTE: I've add firebug for IE, you have to right click a inspect the element.

Upvotes: 0

Answers (8)

Pieter Goosen

Reputation: 9941

I absolutely hate IE, specially versions 6, 7 and 8. When you are designing a wordpress theme, you have to style it twice, once for proper browsers and then for the IE ancients. The other big thing to remember, these ancients don't have support for media queries.

So to solve your problem, create a stylesheet called ie.css. You will use this to do all your styling for IE 7 and 8.

Next you will need to enqueue that stylesheet, but we will enqueue it conditionally. This stylesheet will only load for IE versions up to IE8. So in your functions.php, add the following

function enqueque_ie_stylesheet() {
// Load the Internet Explorer specific.  stylesheet.
 wp_enqueue_style( 'style-ie',   get_template_directory_uri() . '/ie.css',   array(), '' );
    wp_style_add_data( 'style-ie', 'conditional', 'lt IE 9' );
 }
add_action( 'wp_enqueue_scripts', 'enqueue_ie_stylesheet' );

You can now add your styles in ie.css. Just remember to change get_template_directory_uri to get_stylesheet_directory_uri if you are using a child theme

Upvotes: 0

Prabhat Jain

Reputation: 346

In style.css

change this

ul#menu-showroom {

  margin:0;

  padding:2px 0 !important;

}

and please let me know if it is working for upper navigation bar

Upvotes: 0

Tom Senner

Reputation: 548

TARGET IE 10
http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #yourDiv {margin-left:-570px;} }

Upvotes: 1

4dgaurav

Reputation: 11496

Note that IE 10 and up DO NOT support conditional comments at all.

Target ALL VERSIONS of IE

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Universal IE 6 CSS

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

source

Upvotes: 0

Mastrianni

Reputation: 3930

You are missing the ; on the end of your bloginfo(). However, the Wordpress Codex recommends using get_stylesheet_directory_uri(); instead of bloginfo('stylesheet_directory');.

Try this:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri();?>/css/ie.css"/>
<![endif]-->

Upvotes: 0

DA.

Reputation: 40671

Just a guess, but you appear to be loading your IE CSS before all the rest of your CSS. The link appears to be working, but I'm assuming the rest of your CSS is over-writing your already declared CSS you loaded for IE.

The fix would be to move the IE CSS file to be the last CSS file loaded.

Upvotes: 0