replacing an ID for IE compatibility

**rchqrd** · Jan 30, 2008, 15:16

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:

detect the browser
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.

**r51** · Jan 30, 2008, 15:29

Your double quotes may be a problem:

Code:

var new_Id = "<span id="ohsearch_ie">" + old_Id + "</span>";

Try

Code:

var new_Id = '<span id="ohsearch_ie">' + old_Id + '</span>';

**rchqrd** · Jan 30, 2008, 16:01

Thanks, r51. That fixed it!

**jimfraser** · Jan 31, 2008, 08:47

If it's just to apply a different CSS class to the object in IE7, I'd use a css hack/conditional like:

Code:

#ohsearch{
float:right;
padding:1px 25px 0pt 0px;
background-color:#00FF66;
<!--[if IE 7 ]>
background-color:#FF0000;
<![endif]-->
}

rather than messing about with object ids

**rchqrd** · Jan 31, 2008, 10:16

Thanks, Jim! I didn't know you could add conditional statements in a CSS rule. Would you direct me to a URL or book to find out more about that kind of CSS coding? I'm going to google as well. If I find anything good, I'll post it here as well.

Thank you very much!

**rchqrd** · Jan 31, 2008, 10:25

Jim, I just copied and pasted your code in my page (embed) and just tried your CSS hack, but the background color did not change. ? I removed the javascript, as well as the function call from the body tag, since I wasn't sure if that was causing a conflict. What did I do wrong?

**rchqrd** · Jan 31, 2008, 20:38

Right,
I found this link on MSDN on CSS comments http://msdn2.microsoft.com/en-us/library/ms537512.aspx and read it along with following the examples. I'm still not sure why the code you posted (jimfraser) is not working in IE 7 on my pc. I'll continue to study this and I also appreciate insight any one here offers.

Thanks

**siteguru** · Feb 1, 2008, 04:50

IIRC conditional comments only work inline in the document/page. They don't work when embedded in an external CSS file. (I may be wrong).

Try creating an ie.css file, and then using the conditional comment to load that file ...

Code:

<link rel="stylesheet" href="main.css" type="text/css" />
<!--[if IE 7 ]>
<link rel="stylesheet" href="main.css" type="text/css" />
<![endif]-->

There's also the IE7-only hack. Example below including also the IE6 hack ...

Code:

#container {
	margin: 1em 5&#37;;
	padding-top: 0;
	background-position: right;
	font-size: 0.85em;
	width: auto;
}
/* IE6 Only */
* html #container {
	padding-top: 1em;
	font-size: 0.85em;
	width: 90%;
}
/* IE7 Only */
*:first-child+html #container {
	width: 90%;
}

**rchqrd** · Feb 1, 2008, 12:04

Thanks, SiteGuru, I will try that and post back. CSS appears to be a quicker way to make these "on the fly" revisions in this case, instead of lengthy javascript (even tho I implemented the js at the top of this post).

I appreciate all the help that is offered here. I'm so glad I bought the book "Simply Javascript" and found out about this Sitepoint forum. These tools are really helping me to learn.

User Tag List

Thread: replacing an ID for IE compatibility

Thread Tools

Display

replacing an ID for IE compatibility

Bookmarks

Bookmarks

Posting Permissions