Visitors using Internet Explorer (6 & 7) were unable to post comments on this site (my site runs dasBlog) ever since I added a JavaScript snippet from Technorati.

The Problem in More Details: For visitors using IE (Internet Explorer 6 & 7) dasBlog's "Save Comment" button wouldn't fire, hence the web form wouldn't submit, and the comment wouldn't be posted. When dasBlog's Captcha feature was enabled the Captcha validation wouldn't fire, and again the form would not submit. When JavaScript was disabled in Internet Explorer, dasBlog / ASP.NET would revert to server side validation, the web form would submit, and the comment would be saved. Everything worked fine in Firefox and Opera.

A wild goose chase: I'm using a ASP.NET 1.x version of dasBlog converted to ASP.NET 2.0, and customized to run on a medium trust environment. I initially assumed that something had been corrupted during the ASP.NET 1.x to 2.0 conversion - I thought that some of the ASP.NET client side scripts had been corrupted, or that somehow this ASP.NET 2.0 application was referencing some older ASP.NET 1.x scripts. This assumption proved to be fruitless. I then started looking at Jeff Atwood's Captcha control as the source of the problem, but after disabling the Captcha my "Save Comment" button still didn't work. It had to be something else, I thought that it was a bug with dasBlog, but upon downloading the latest release of dasBlog 2.0 (kudos to the dasBlog team!), I noticed that I could post comments to my site when using any theme other than my own. I started looking at my theme, I disabled my JavaScript links and discovered...

The Solution: a JavaScript linked from Technorati was preventing my comments from being saved. I removed the conflicting script - Goodbye Technorati, Hello Comments from IE.

I wish I would have figured this out sooner, hopefully this article will help anyone else with a similar problem (dasBlog's "Save Comment" button doesn't work). I'll be looking closer at the Technorati script and post another entry here with my findings. In the meantime look through the conflicting script yourself at: http://embed.technorati.com/embed/93ja2gejnr.js

Update: The second line of Technorati's JavaScript causes ASP.NET's postback to fail - ASP.NET can only have one form tag declaration.

The rough JavaScript:

document.write('<form id="te_s" method="post" ... 

I've been using Style Elements within the HTML Body tag to work around some of the design flaws presented in ASP.NET 2.0 Themes - see the second solution in this post for more details. I've been leary of using this method because it's not a best practice, since it compromises the validity of the HTML / XHTML document. I decided to do a little more research on this subject and made the following discoveries.

Discoveries:

1. Some of the more complex web sites (Amazon and Yahoo!) make use of Style Elements within the Body Element - see the source snippets below.
2. Gecko (Firefox, Flock, Mozilla, etc…) based browsers automatically move Style Elements found within the Body Element into the Head Element and render the page as expected - see the rendered Document Object Model (DOM) image below.
3. Internet Explorer doesn't move the Style Element into the Head Element, but renders the page as expected.
4. Opera… well I wish I knew what Opera did, but the page renders as expected.

Source snippet from Amazon:

</table>
    </td>
  </tr>
</table>

<style type="text/css">
.lol-hr-center { margin: 5px; border-top-width: 1px;
/* and so on... */
}
</style>

<div id="listoflists_data" style="display:none">
Note how the Style element is located between the <table> and <div> tags.

Source snippet from Yahoo!:

<h4>
<a id="paweather" class="details" href="r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html"><span class="icon">Weather <b><strong>51&deg;</strong>F</b></span></a>

<style type="text/css">#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}</style>

</h4>
Note how the Style element is located within the <h4> tag.

A snapshot of the Document Object Model (DOM) as seen through Firebug:

Note the highlighted area references the Yahoo! source snippet from above.

Conclusion: Although the Style Element within the Body Element compromises the validity of a document, some of the leaders in web design and accessibility use this approach, so it may not be as big a work around or hack.

I noticed that a couple visitors were using the Opera web browser, so I decided to check my site with this highly W3C CSS compliant browser - see the "Acid2 Test".

To my horror, I found my CSS wasn't working properly.

My blog in Opera (the CSS rendering issue):

I began debugging my site by starting up Firefox with the Firebug extension. Upon inspecting my Document Object Model (DOM) and my rendered CSS I found a syntax error (a bug).

Using the Firebug extension for Firefox to view the DOM and related errors:

My error; I had erroneously entered */ instead of /* for my CSS comment. After making the changes everything rendered as expected in Opera.

Conclusion; My site now works with Opera 9. As a rule of thumb, I generally do my CSS design in a more W3C CSS compliant browser like Firefox, Opera, etc... and then make the respective changes for proper display in IE. Firebug is amazing, the best web development tool I have seen in a long time. Firebug really makes debugging a breeze.

Other useful Firefox extensions:

• Colorzilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
• del.icio.us - Keep, share and discover all your favorite things.
• FasterFox - Performance and network tweaks for Firefox.
• FireBug - Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
• Greasemonkey - Customize the way webpages look and function (hide search engine advertisements, tweak Gmail).
• Mouse Gestures - Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.
  

Other useful Internet Explorer extensions / toolbars:

• Internet Explorer Developer Toolbar Beta 3 - Tools for quickly creating, understanding, and troubleshooting Web pages