IE specific CSS not rendering

Question

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.

Your missing the ; on the end of your bloginfo(); See my answer below. — Mastrianni
– Mastrianni, Commented Apr 23, 2014 at 7:07

Tom Senner · Accepted Answer · 2014-04-23 07:27:17Z

1

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;} }

answered Apr 23, 2014 at 7:27

Tom Senner

5582 gold badges6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

W.D. · Accepted Answer · 2014-04-23 06:58:10Z

0

What IE version are you using?

Conditional comments are supported from IE5 to IE9(inclusive), thus they won't work in IE10,IE11.

More on that

answered Apr 23, 2014 at 6:58

W.D.

1,0411 gold badge8 silver badges13 bronze badges

6 Comments

DA. Over a year ago

It should also be noted that one shouldn't need to give IE10/11 custom CSS anyways.

Irfan Over a year ago

I'm using IE 11, Any help to fix for IE 11

DA. Over a year ago

@IrfanDayan why are you trying to write custom CSS just for IE11? IE11 should be a version of IE that can handle most all CSS correctly. Perhaps you can explain what you're tweaking just for IE and we can offer up alternative suggestions.

Irfan Over a year ago

@DA, Will you please check my site link in FF and Chrome for top nav bars, It looks good but in IE 11 it get merged on each other?

DA. Over a year ago

@IrfanDayan Sorry, I don't do much with IE anymore so don't have IE11 handy to test with. That said, I'd suggest you post a separate question that describes that particular problem. It's likely an issue with your existing markup or CSS and if that can be fixed, you wouldn't need the extra CSS just for IE11.

|

user2143589 · Accepted Answer · 2014-04-23 06:58:32Z

0

What version of ie you are using? If you test it on ie8, i am sorry to tell you that ie8 and earlier versions does not support :last-child.

answered Apr 23, 2014 at 6:58

user2143589

11 bronze badge

2 Comments

Irfan Over a year ago

I'm using IE 11, Any help to fix for IE 11.

user2143589 Over a year ago

try this @media all and (-ms-high-contrast:none) { #menu-showroom li { } /* IE10 / *::-ms-backdrop, #menu-showroom li { } / IE11 */ }

DA. · Accepted Answer · 2014-04-23 06:58:33Z

0

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.

answered Apr 23, 2014 at 6:58

DA.

40.8k51 gold badges162 silver badges219 bronze badges

3 Comments

Irfan Over a year ago

I'm using IE 11, Any help to fix for IE 11. Will you please add more detail to fix this for latest IE.

DA. Over a year ago

@IrfanDayan you shouldn't have to give IE11 separate CSS. Can you perhaps explain what the problem you're having with CSS in IE11 is?

Irfan Over a year ago

Will you please check my site link in FF and Chrome for top nav bars, It looks good in FF & Chrome but in IE-11, it get merged on each other and disturb the alignment?

Mastrianni · Accepted Answer · 2014-04-23 07:08:43Z

0

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]-->

edited Apr 23, 2014 at 7:08

answered Apr 23, 2014 at 7:02

Mastrianni

3,9303 gold badges22 silver badges33 bronze badges

Comments

4dgaurav · Accepted Answer · 2014-04-23 07:23:32Z

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

Prabhat Jain · Accepted Answer · 2014-04-23 07:33:56Z

0

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

answered Apr 23, 2014 at 7:33

Prabhat Jain

3461 silver badge8 bronze badges

Comments

Pieter Goosen · Accepted Answer · 2014-04-23 11:14:09Z

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

Collectives™ on Stack Overflow

IE specific CSS not rendering

8 Answers 8

Comments

6 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

6 Comments

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related