0

I have a bug in IE8, but works in firefox, chrome and safari. Here's my HTML code

<!DOCTYPE html>
<html dir="ltr">
<head> 
        <style>
        header {display:block; background-color:#333; color:#fff;height:30px;}
        </style>
        <!--[if lt IE 9]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]--> 
</head>
<body>


<div id="bug">
        <header><h2>h2</h2></header>
</div>

<button type="button" onclick="$('#bug').html(' <header><h2>h2</h2></header>');">press</button>

<script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script>
</body>
</html>

You can see the code in action here - http://evermight.com/jquerybug/index.html

In IE8, how come when I press the "press" button, the h2 with black background turns to white background instead of remaining as black background? When I remove the white space in between html(' and <header> of the button's onclick event handler, then the black bakground persists as expected.

Why does an empty space affect the CSS appearance of the header tag in IE8?

John
  • 32,403
  • 80
  • 251
  • 422
  • 2
    tag is in HTML5 ONLY, I doubt IE8 could deal with it correctly – Neverever May 20 '11 at 04:01
  • Does it work the same when you remove the inline JavaScript? – Sparky May 20 '11 at 04:02
  • You are also missing your

    tag.

     – Sparky May 20 '11 at 04:04
  • Also, after reading your question about ten times: Why do you want the leading white space in html(), especially if it works as expected without it? – Sparky May 20 '11 at 04:06
  • @Neverever - I was told to use the html5shiva to make HTML5 tags work in IE7+ – John May 20 '11 at 04:12
  • @Sparky672 - i can't seem to re-edit my question, but in my live code, the ending body tag exists. Same problem when fired from external JS file. The code that generates templates from an ajax response may sometimes have empty spaces and line breaks to make human readable mark up code. – John May 20 '11 at 04:14
  • Maybe html5shiv doesn't work so good when you dynamically rewrite the HTML with jQuery. It only gets called when the page first loads, right? Just a guess. – Sparky May 20 '11 at 04:18
  • @John: Erik's answer confirmed my previous comment. [Known Bug](http://code.google.com/p/html5shiv/issues/detail?id=4) – Sparky May 20 '11 at 05:10

2 Answers2

4

This isn't a jQuery bug -- its an IE combined with HTML5shiv bug. Or you could just call it an IE bug in general.

If you try your code, replacing

<header> .... </header>

with

<div class='header'> .... </div>

you'll find it works correctly, even with the leading space.

If you read the issues page on the html5shiv site this is a known bug (dynamically created HTML5 elements not styling).

You can also read this stackoverflow post for more information on what's going on and some workaround suggestions.

Community
  • 1
  • 1
Erik
  • 20,526
  • 8
  • 45
  • 76
1

You need the innershiv.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73