Tuesday, October 17th, 2006

DOM Helper: IE Inline CSS Editor

Category: CSS, IE, Utility

Rhys Jeremiah created DOM Helper, an inline CSS editor for Internet Explorer:

Well I’ve finally got round to producing the inline CSS editor that I wanted to do in the first place. The first stab, was in C++ and although it worked, it was a complete nightmare. It didn’t allow you to alter CSS files that were loaded as “@import”. This new version does, it parses the CSS and adds each individual rule back to the style sheet. Simply replacing the CSSText caused a memory corruption error in MSHTML.

It’s been re-written it in C# using Pavel Zolnikov’s BandObjects. I’ve also added a few extras such as a DOM Explorer and the ability to add plugins to the band object.

While it’s been writting in C# 2.0 there’s not much use of the new version 2 features. Mind I was most satisfied with my first foray into using generics. I didn’t think that there’d be much use for them but I did find a use, albeit slightly contrived.

DOM Helper

Posted by Dion Almaer at 7:53 am

4.3 rating from 25 votes


Comments feed TrackBack URI

I wish I had known about this yesterday…would have saved me a bit of headache (copying html source + local testing) for something trivial.

Comment by Will — October 17, 2006

How to get it working in IE7???

Comment by Patrick — October 17, 2006

The WebDeveloper extension for Firefox has had this for ages…

Comment by Arjan — October 17, 2006

Nice, very nice. I’m gonna try this for sure.

Comment by localhost — October 17, 2006

Sounds promising, but I installed it with the latest .net 2.0 installed (as per Windows Update) and it immediately crashed from a missing assembly. Anyone else run into this problem?

************** Exception Text **************
System.IO.FileNotFoundException: Could not load file or assembly 'Microsoft.mshtml, Version=7.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. The system cannot find the file specified.
File name: 'Microsoft.mshtml, Version=7.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a'
at bho.csseditor.CSSEditor.Activate(Boolean NewDocument)
... {snip} ...

Comment by Peter — October 17, 2006


Thank you for that. Yes, the Web Developer Extension has a whole s**tload of things that don’t do me any good in IE. Since I need to support IE, tools like this help. Slag IE where and when it sucks (you don’t have to look hard for opportunities), don’t do it when people try to improve the experience developing for it in any little way they can.

Comment by The Hater — October 17, 2006

installed successfully. But how to get it work with IE7?

ciao André

Comment by André Fiedler — October 17, 2006

I got the same error as Peter. Any suggestions?

Comment by Steven — October 17, 2006

@ Patrick: The web developer extension is awesome, but you can’t use it in IE. This is extremely helpful for layout bugs you only get in IE, something the web developer toolbar for firefox can’t help.

@localhost: I also ran across the same error message. It’s a shame since I could have really used this type of tool for IE.

Comment by Kevin Lamping — October 17, 2006

what does this do that MS IE Dev Toolbar doesn’t? With the IE dev tool bar you can edit the currentStyle properties of the any element you wish.

Comment by Champ Bennett — October 17, 2006

Can do the same thing using DebugBar (free for personal use), plus much more …

Comment by Paul — October 17, 2006

@Steve & Peter:
Get yourself a copy of Microsoft.mshtml.dll and drop it in your DOMHelper directory. Then register it with RegAsm.exe, the same way you did with DOMHelper itself.

Failing that, download and install the .NET 2.0 SDK, which includes Microsoft.mshtml.dll and should resolve the issue as well. It is, however, ~364Mb, and the file you need is ~4Mb.

Comment by Derek — October 17, 2006

Boy I just pissed myself laughing:

What a nightmare developing anything to work with MS products!

e.g. “Get yourself a copy of Microsoft.mshtml.dll and drop it in your DOMHelper directory. Then register it with RegAsm.exe, the same way you did with DOMHelper itself.

Failing that, download and install the .NET 2.0 SDK, which includes Microsoft.mshtml.dll and should resolve the issue as well. It is, however, ~364Mb, and the file you need is ~4Mb. ”

I say, forget about IE; if enough of us ignore it, it will go away.

Comment by ajaxianfading — October 18, 2006

I did some poking around on the Microsoft site, and you can download the required assembly as part of the Office 2003 PIA, here. This comes with a .msi file that is very easy to install. After I installed it, I was able to run the DOM helper, which was actually quite cool.

Comment by Peter Mularien — October 18, 2006

After registering i cannot see it in Explorer Bars. Any Ideas? Thanks!

Comment by mupo — January 9, 2007

Nice idea but it does not work in IE7

Comment by Francis — February 24, 2007

Also not seeing it under Explorer Bars :( .

Comment by Brett — April 19, 2007

This is a long time later but since the time of this post until now there still isn’t an inline CSS editor that seems to work. I tried CSSVista which has been discontinued and it doesn’t seem to work anymore. The DOMHelper, however, does. Even on IE7. But it’s a challenge.

You install it as per the directions on it’s homepage. After registering the dll, it wouldn’t show up until after a reboot.

After the reboot I could see the toolbar in the list of available toolbars and select it. It opened but switching to the CSS pane threw the same error as Peter back from Oct 17 2006.

If you don’t have Office 2003, like me, you can’t use the Office 2003 PIA as above from Oct 18 2006. This is on the IE compatibility images so there isn’t anything other than IE7 and an antivirus software. However you can search for the dll. The one I found was a lower-case “microsoft.mshtml.dll”. I couldn’t register it until I renamed it to “Microsoft.mshtml.dll”.

After another reboot it still gave the same error as Oct 17 Peter’s. It turns out you have to register it with the .net 2.0 Config tool. And that, AFAIK, comes with the .net 2.0 SDK.

So 300+MB later and installing only the tools and not the example projects nor the documentation, I had the config tool.

Going into My Computer>Configured Assemblies > Add… allowed me to choose. Select “Choose Assembly…”. Scroll through the list because it’s not in alphabetical order. It’s near the VisualStudio entries on my install.

Select it, click Finish, wrap up, close IE, and perhaps there was another reboot in there for good measure, and I was happily greeted with the DOMHelper’s HTML pane actually working on load. Clicking the CSS pane took me in and I could get to work.

So it is possible with some effort and a fast ‘net connection.

Comment by michaelangela — January 13, 2009

The link above to download no longer works. I have used it before, and its a great product. I need to use it again, but am not able to find it online. Can someone please revive the link above so that I can download it.

Thanks in advance.

Comment by polomunda — January 7, 2011

Leave a comment

You must be logged in to post a comment.