Internet Explorer – Web Developer Toolbar

In a world of FireFox and its beautiful extensions of web-development power, Internet Explorer has been a horrid browser to develop/debug your code.

Microsoft has a fancy FireBug clone for the bane of every web developer…Internet Explorer! They call it the Web Developer Toolbar (although it isn’t much of a toolbar and more of a tool set) and it is a blessing for finding problems in IE. Its features include:

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages. These features enable you to:

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to a new resolution.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Display a fully featured design ruler to help accurately align and measure objects on your pages.
  • Find the style rules used to set specific style values on an element.
  • View the formatted and syntax colored source of HTML and CSS.

The Developer Toolbar can be pinned to the Internet Explorer browser window or floated separately.

This toolbar isn’t a match for the features, look, or usability of FireBug…but it is a great start and a pretty decent tool provided by the guys at Microsoft. As many developers can attest, developing sites that work according to standards AND Internet Explorer is a pain…this tool eases that pain.

Get it here.

Oh, and once you install the toolbar, it is hard to see where to open the thing. After installing, a little blue arror will appear in the icon bar at the top of the browser. Click that and the tool will open at the bottom of the screen.

PNG Transparency in Internet Explorer

code.gifI teach a Multimedia class at Plymouth State University. This week we were discussing the pros and cons on the use of PNGs. I mentioned that Internet Explorer versions 6 and lower fail to render the transparency of a PNG properly, placing white background in the transparency’s place. I also took the time to plug Firefox, mentioning that Firefox does it right!

Well, one of my students, Brendan Emery sent along this fix for PNG transparency in Internet Explorer, thus refuting my biggest con on PNG use! (honestly, I can’t think of any other cons)

[This is] a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. […]

Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.

The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers – in fact it is treated as an HTML comment – thanks to IE’s conditional comments. This solution is therefore light, portable and non-invasive to other browsers.