Hi all,

The navbar on a site I'm working on is not displaying correctly in IE 7. It works fine in Firefox. Here is what I want to do:

  1. detect the browser
  2. if it's IE 7. replace the style div ID (that works in FF) with the revised div ID(that will works in IE by changing the padding so the nav element, in this case, an image, doesn't break/wrap to a new line).


Here is what I have tried, but doesn't work. I may be using the innerHTML property wrong or just plainly don't know what I'm doing, but don't kill me ... I'm still learning. I looked into using the .replace method, but that seems to only replace words in a string.

Code:
<script language="javascript" type="text/javascript" >

var browserName=navigator.appName; 
if (browserName=="Microsoft Internet Explorer")
  { 
	var x = document.getElementsByID('ohsearch');
	
	function change_Id4IE()	{
	var old_Id = document.getElementById('ohsearch').innerHTML;
	var new_Id = "<span id="ohsearch_ie">" + old_Id + "</span>";
	document.getElementById('ohsearch').innerHTML = new_Id;
	}
			
}
</script>

<style>
#ohsearch_ie {
float:right;
padding:1px 25px 0pt 0px;
background-color:#00FF66;
}
</style>
I'm loading the function in the body onload event.

Code:
<body id="ohchannel" onload="change_Id4IE()">
Thank you.