Link to home
Create AccountLog in
Avatar of hankknight
hankknightFlag for Canada

asked on

jQuery and IE: .insertBefore not working

My jQuery code works in Firefox and Chrome but not Internet Explorer.

You should see a red box.  This is probably a problem with the way Internet Explorer renders CSS.

Please help the red box be displayed in all browsers, thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function(){ 

$('<p style="display: block;position: absolute; left: 40px; bottom: 500px; width: 238px; height: 123px; overflow: hidden; padding: 0; margin: 0; cursor: pointer;" \
><a class="mapPlus" title="Click to Select" style="display: block; width: 238px; height: 123px; padding: 0; margin: 0; cursor: pointer; background: #ff0000;" \
></p>').insertBefore('p#ClientList');

	$('a.mapPlus').hover(function () {
		$('a.mapPlus').css('background-position','0 -123px');
	  }, 
	  function () {
		$('a.mapPlus').css('background-position','0 0');
	  }
	);
});

/* ]]> */
</script>
<style type="text/css">

body {
padding: 40px;
}

#ClientList {
margin: 300px 0 0 0;
}

</style>

</head>
<body>

<h1>Hello World</h1>

<p id="ClientList">There should be a red box above this.</p>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of mydropz
mydropz

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account