I am currently working on a website where I need to replace one <span> element with another. The original <span> looks something like this:
<span class="green_link">;Abbreviation;The definition</span>
The format of the input string is
<separator><string><separator><string>A JavaScript function is triggered by the onload event for the <body> element. It finds all <span> elements with the class "green_link". If none are found, the function stops. Otherwise, it creates a new <span> for each existing one:
<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>
The function then replaces the original "green_link" <span> with the newly created "revised_green_link" <span>.
Browsers were tested using a test page and the official site. Firefox, Opera, and Safari displayed as expected, but Chrome and IE had some issues.
All browsers showed the correct page when accessed via localhost:port after Visual Studio 2008 displayed it using "View in browser" (e.g., http://localhost:1291/BIODAB.html).
Both HTML documents passed validation as XHTML 1.0 Strict by W3C Markup Validation Service. CSS was validated at CSS Level 2.1 by W3C CSS Validation Service. All JavaScript, except jQuery Library v1.4, passed through JSLint without errors.
If you have any insights into why different browsers behave differently, please share them. Any input is appreciated.