Cool Tools 6: IE Web Developer 2

After upgrading from ALUI 6.1 to WCI 10gR3, all of our portlets looked … wrong.  The background color had reverted the blue, and they were cutting off on the right side so you couldn’t see the toolbar buttons.  Strangely, this was only happening in IE, so we weren’t able to use Firefox’s FireBug.  Fortunately, there’s a similar type of tool offered by IEInspector Software called IE Web Developer 2.

Similar to FireBug, it offers basic HTTP tracing, JavaScript debugging, and, in this case, DOM/CSS analysis.  This allows you to higlight an item on the page – in this case, a portlet – and view all the styles applied to that item.  it also shows you where the style definitions are coming from:

Using it, we were able to determine that the CSS files had changed, and there was an addition of “table-layout:fixed’ and a ‘background-color’ definition in the CSS definitions for the column layouts.  Removing these definitions from the CSS restored the look and feel back to the way we had prior to the upgrade.

How did we update the hundreds of CSS files we had?  Well, that’s a post for another day…

.layoutOneColumn { /* table-layout: fixed; */ }
.layoutOneColumn .columnOne { width: 100%; }
.layoutTwoColumnNarrowWide { /* table-layout: fixed; */ }
.layoutTwoColumnNarrowWide .columnOne { width: auto; }
.layoutTwoColumnNarrowWide .columnOne .portletBody { /* background-color: #fff */ }
.layoutTwoColumnNarrowWide .columnTwo .portletBody { /* background-color: #FFFFFF; */ }
.layoutTwoColumnWideNarrow { /* table-layout: fixed; */ }
.layoutTwoColumnWideNarrow .columnOne .portletBody { /* background-color: #FFFFFF; */ }
.layoutTwoColumnWideNarrow .columnTwo { width: auto; }
.layoutTwoColumnWideNarrow .columnTwo .portletBody { /* background-color: #fff */ }
.layoutThreeColumn { /* table-layout: fixed; */}
.layoutThreeColumn .columnOne { width: auto; }
.layoutThreeColumn .columnOne .portletBody { /* background-color: #fff */ }
.layoutThreeColumn .columnTwo .portletBody { /* background-color: #FFFFFF; */ }
.layoutThreeColumn .columnThree { width: auto; }
.layoutThreeColumn .columnThree .portletBody { /* background-color: #fff */ }

Tags: , , ,

Leave a Reply