CSS Inline Edit for IE6 (and above)
Tuesday, September 1. 2009
I use IE6 in my primary installation for testing against web browser compatibility. Because IE6 has so many more issues than the other browsers, I leave it without the "required" updates for Microsoft. I have Virtual PC installations for IE7 and IE8. Typically, once IE6 and Firefox compatibility is reached, fixing IE7 and IE8 to look and behave as expected is a breeze (read: typically).
The one thing that is a hassle, is the lack of a good development tool for IE6 to mess around with CSS style definitions and see them updated in the document in real time. Firefox has the Web Development Toolbar, or Firebug - both do a similar job in this regard. If you need to add a selector, then WDT is your choice, if you just need to set some new attributes, I prefer the interface of Firebug...regardless of your choice, they both work very well.
IE6's Developer Toolbar helps us out, but it just does not get us quite to the level that would be very helpful, and I have noticed at times that options I have set do not actually render as expected (I cannot recall what they were, sorry Microsoft developers!). I just now found two tools that supposedly help out with this.
DebugBar v5.x is a tool that gives a very nice and neat interface for seeing exactly how Internet Explorer sees your CSS/JS and the DOM. It doesn't let you edit documents live, but it may be useful in seeing how it interacts with your site. However, beyond this information (and the handy "Drag to Target" identifier), I didn't find this option all that useful for live editing. It still is kind of handy though, so I thought I'd mention it.
More importantly, I found a slightly less "smooth" (interface-wise) toolbar that will allow me to edit the CSS of the document in real time. This works almost the same way Firefox's Web Development Toolbar's "Edit CSS" option works. You can get this tool, "DOM Helper", at the following address:
http://www.hairy-spider.com/2006/02/24/AnnouncingDOMHelperANewAndImprovedCSSEditor.aspx. However, I found that the installation command given did not work for my version of IE. In order to get it working, I had to also register the other included DLL in the zip file. But, lo and behold, I now have inline CSS editing in Internet Explorer! YAY!
Note: The author of DOM Helper also has a tool that lets you modify scripts in real time, however getting it installed would require a recompilation of source code that you would have to do yourself. This is beyond my needs, and therefore, beyond my ability to assist with such requests - fair warning, if you ask I won't be able to help with that.
The one thing that is a hassle, is the lack of a good development tool for IE6 to mess around with CSS style definitions and see them updated in the document in real time. Firefox has the Web Development Toolbar, or Firebug - both do a similar job in this regard. If you need to add a selector, then WDT is your choice, if you just need to set some new attributes, I prefer the interface of Firebug...regardless of your choice, they both work very well.
IE6's Developer Toolbar helps us out, but it just does not get us quite to the level that would be very helpful, and I have noticed at times that options I have set do not actually render as expected (I cannot recall what they were, sorry Microsoft developers!). I just now found two tools that supposedly help out with this.
DebugBar v5.x is a tool that gives a very nice and neat interface for seeing exactly how Internet Explorer sees your CSS/JS and the DOM. It doesn't let you edit documents live, but it may be useful in seeing how it interacts with your site. However, beyond this information (and the handy "Drag to Target" identifier), I didn't find this option all that useful for live editing. It still is kind of handy though, so I thought I'd mention it.
More importantly, I found a slightly less "smooth" (interface-wise) toolbar that will allow me to edit the CSS of the document in real time. This works almost the same way Firefox's Web Development Toolbar's "Edit CSS" option works. You can get this tool, "DOM Helper", at the following address:
http://www.hairy-spider.com/2006/02/24/AnnouncingDOMHelperANewAndImprovedCSSEditor.aspx. However, I found that the installation command given did not work for my version of IE. In order to get it working, I had to also register the other included DLL in the zip file. But, lo and behold, I now have inline CSS editing in Internet Explorer! YAY!
Note: The author of DOM Helper also has a tool that lets you modify scripts in real time, however getting it installed would require a recompilation of source code that you would have to do yourself. This is beyond my needs, and therefore, beyond my ability to assist with such requests - fair warning, if you ask I won't be able to help with that.
