CODEWITHSUNDEEP
javascriptcssxhtmlinternet-explorer-8
Gus
Gus

Reputation: 1572

Chrome and IE8 vs the others

I am in the process of creating a web page in which I wish to replace a <span> element with a new <span> element. The original <span> element is (for example):

  <span class="green_link">;Abbreviation;The definition</span>

The form of the supplied string is <separator><string><separator><string>. The separator is supplied to insure that any special characters in either the first or the second string will not cause parsing difficulties.

A JavaScript function is invoked by the onload event handler for the <body> element. It detects all <span>s with the class of "green_link". If no such <span> exists, the function exits. Otherwise, for each such <span>, the function creates a new <span> element:

  <span class='revised_green_link'>
    <span class='abbreviation_alone'>
      Abbreviation
    </span>
    <span class='abbreviation_definition'>
      <a id='greenlink_1'></a>
      <a href='#greenlink_1' 
         style='text-decoration:none; 
                font-weight:bold;'>
        <span class='abbreviation'>
          Abbreviation
        </span>
        <span class='definition'>
          The definition
        </span>
      </a>
    </span>
  </span>

Then the function replaces the "green_link" <span> with the newly created "revised_green_link" <span>.

Browsers were tested using a test page and the actual page. Firefox 3.6.12, Opera 11.11, and Safari 5.0.2 displayed what was expected for both pages. Chrome 12.0.742 displays the test page as expected but fails to display the actual page as expected. IE 8 fails to display either page as expected.

I find it interesting that all of the browsers display the web page as expected when they are directed to it on localhost:port once that Visual Studio 2008 has displayed the page using "View in browser" (i.e., http://localhost:1291/BIODAB.html).

Both HTML documents were successfully checked as XHTML 1.0 Strict by the W3C Markup Validation Service. All CSS (both test and actual) was validated successfully at CSS Level 2.1 by the W3C CSS Validation Service. All JavaScript, with the exception of the jQuery JavaScript Library v1.4, was passed through JSLint without errors.

I have no idea what is causing this diverse behavior and would appreciate some thoughts.

Upvotes: 3

Views: 188

Answers (2)

Alohci
Alohci

Reputation: 83126

In IE8, there are two parts to the failure.

The first is that the HTTP headers include this line:

 x-ua-compatible: IE=EmulateIE7

which is putting the browser into IE7 mode.

The second part is that the GreenLinkTest.js contains 

getAttribute("class")

which doesn't work in IE7. See getAttribute cannot return class in IE7? for more details.

I can't see a problem with Chrome.

Upvotes: 0

mrsmith
mrsmith

Reputation: 121

You can create HTML tags with javascript and it is cross-browser:

var newSpan = document.createElement('SPAN');
newSpan.id = 'newSpanId';

and then append it to the desired container (div, a, etc...)

parentContainer.appendChild(newSpan);

To remove an element:

parentContainer.removeChild(document.getElementById('elementId'));

Upvotes: 3

Related Questions