Search code examples
htmlcssinternet-explorerconditional-comments

IE 8 specific stylesheet won't work using Conditional Comment

My site simply has the words "Why is this text small?" on the screen. It is properly responding to the css styling applied to it, but not in IE 8.

The html is:

<!--[if IE 8 ]>
  <p>Only IE 8 will see this</p>
<![endif]-->

<div class="font4">Why is this text small?</div>

and the styling for "font4" within style tags at the top, is:

.font4 {
    margin-top: 4%;
    margin-bottom:3%;
    color: #030;
    font-family: "Times New Roman", Times;
    font-size: 6vh;
    text-align:center;
}

But if I view it in IE 8, it displays too small, like this:

screenshot

So I put this html in the head:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="http://testsite24.netai.net/public/ie8.css">
<![endif]-->

and ie8.css is properly linked. The code for ie8.css is:

@charset "utf-8";
/* CSS Document */

.font4 {
    margin-top: 4%;
    margin-bottom:3%;
    color: #030;
    font-family: "Times New Roman", Times;
    font-size: 10vh;
    text-align:center;
}

But why is it not responding to font-size: 10vh;?

You can view my site here: http://testsite24.netai.net/public/demo.html

Thank you!

Solution

  • It's simply because viewport-percentage lengths, such as vh, are not supported in IE8.