Help with IE conditional statement not working

HTML & CSS
1

Hi guys,
so earlier today, I wrote this code which successfully changes the html within an element (all of its children elements) on document load, it is here:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
	<script>
	 $(document).ready(function () {
		$('nav#mainNavigation').html('<p>The HTML has been changed.</p>');
		});	
	</script>
</head>
<body>
	<nav id="mainNavigation">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
			<li><a href="#">Link 6</a></li>
			<li><a href="#">Link 7</a></li>
			<li><a href="#">Link 8</a></li>
			<li><a href="#">Link 9</a></li>
		</ul>
	</nav>

</body>

</html>

Then I tried using the less than IE 9 conditional statement and within it run this script which replaces the content within the <nav> with a <p> that informs the user that there browser is less than IE 9

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Replacing html with jQuery</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<!--[if lt IE 9]>
	<script>
	 $(document).ready(function () {
		$('nav#mainNavigation').html('<p>Your browser is less than IE9, please upgrade.</p>');
		});	
	</script>
<![endif]-->
</head>
<body>
	<nav id="mainNavigation">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
			<li><a href="#">Link 6</a></li>
			<li><a href="#">Link 7</a></li>
			<li><a href="#">Link 8</a></li>
			<li><a href="#">Link 9</a></li>
		</ul>
	</nav>

</body>

</html>

I know the purpose of this may seem confusing, but my ultimate goal is to change html based on the browser being a version of IE less than IE 9. The script works outside of the conditional-statements when it is executed by all browsers and I am pretty sure the syntax for the less than !( conditional statement is properly written, but it doesnt seem to switch the <ul> with the <p> therefore not execute the script if the browsers is less than IE 9 when I tested it in IE8.

Is there a conflict using the script and the conditional statement or id the conditional statement done wrong. As I mentioned before, the script works fine, but when put in the <IE9 conditional statement, it seems to not be ran even though the conditions are met.

Can someone please help me get this code to work. The <ul> to be replaced if the browser is less than IE 9. I would really appreciate it.

Please let me know if you have any Questions, COmments, Concerns, or Solutions :slight_smile:
Thanks in Advance & Best Regards,
Team 1504

2

The forum will not let me edit any more, but I just wanted to point out that according to this:

I am pretty sure I wrote the conditional statement correctly and I know the code is written correctly because it runs on its own without the conditional comments.

I am using the conditional-statement wrong, does the script have to be in a separate file, and then linked in the conditional comment, or did I make some ridiculously stupid mistake that I am not seeing?

3

The conditional statement is not the problem. The problem is that you’re using HTML5 elements that are unknown to Internet Explorer < 9 (e.g. nav), and since Internet Explorer doesn’t recognize them, your Javascript function doesn’t trigger anything.

To make the test, replace nav with div and you’ll see that your function works as expected.

If you must use html5 for whatever reason, then your only solution is to create DOM elements that are recognized by IE and thus allow for CSS styles to be applied.

That means lots of extra scripting. Modernizr would be one of those scripts.

4

Or you could use conditional statements to create <div>s for UAs that can’t handle unknown tags’ style.

Since the html implementation for those UAs probably stops at HTML 4.01 or XHTML 1.0, they treat <nav> like an unknown element rather then a HTML5 element.

You could also use conditional statement to create additional CSS rules, specifically targeting those UAs, for those unknown elements, like <nav>.

5

Another item to consider is that I’ve only seen very simple “look what you can do with conditional comments” demos that worked with this style of code reliably. I’ve always had poor consistency with conditional comments that directly wrap code. To get conditional comments to behave properly, I typically only use them to wrap a link element in the document head for an IE specific stylesheet or a script tag before the closing body tag for an IE specific .js file. Otherwise, I’ve had results similar to yours where it doesn’t work the way it’s supposed to, and I’ve run across blogs where other developers have had similar results.