SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Jan 30, 2008, 16:16 #1
- Join Date
- Jan 2008
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
replacing an ID for IE compatibility
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>
Code:<body id="ohchannel" onload="change_Id4IE()">
-
Jan 30, 2008, 16:29 #2
- Join Date
- Jul 2007
- Posts
- 345
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Your double quotes may be a problem:
Code:var new_Id = "<span id="ohsearch_ie">" + old_Id + "</span>";
Code:var new_Id = '<span id="ohsearch_ie">' + old_Id + '</span>';
-
Jan 30, 2008, 17:01 #3
- Join Date
- Jan 2008
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, r51. That fixed it!
-
Jan 31, 2008, 09:47 #4
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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]--> }
-
Jan 31, 2008, 11:16 #5
- Join Date
- Jan 2008
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Jan 31, 2008, 11:25 #6
- Join Date
- Jan 2008
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jan 31, 2008, 21:38 #7
- Join Date
- Jan 2008
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Feb 1, 2008, 05:50 #8
- Join Date
- Oct 2002
- Location
- Scotland
- Posts
- 3,631
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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]-->
Code:#container { margin: 1em 5%; 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%; }
-
Feb 1, 2008, 13:04 #9
- Join Date
- Jan 2008
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks