SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    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:

    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.

  2. #2
    SitePoint Evangelist
    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>";
    Try
    Code:
    var new_Id = '<span id="ohsearch_ie">' + old_Id + '</span>';

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, r51. That fixed it!

  4. #4
    SitePoint Wizard
    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]-->
    }
    rather than messing about with object ids

  5. #5
    SitePoint Member
    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!

  6. #6
    SitePoint Member
    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?

  7. #7
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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

  8. #8
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,608
    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]-->
    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%;
    }
    Ian Anderson
    www.siteguru.co.uk

  9. #9
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •