Enterpise Manager and CSS 2.1


We seem to have a problem with Enterprise Manager in modern browsers that support the 'inline-block' CSS property.
This manifests and can easily be seen in Firefox 3, Safari 3.1, and Opera 9.5.

The 'inline-block' is a wonderful new feature, and the lack of support in most browsers as left this layout nuance undercover.

In the backoffice screen we have two principal blocks: the left one with the links to the imported application entry points, and the right one with an iframe for the page where the backoffice functionality is implemented.

Now, in a browser without support for the 'inline-block', this property is ignored, the left menu is properly set though the use of the 'float' property, the iframe extends the containing div to 100% of the screen's width, and the 'margin-left' property prevents any overlapping.

When we get to a browser that does support the 'inline-block' property, the float is still defined but it's not necessary anymore, the 'inline-block' is a more elegant and pratical solution, the 'margin-left' is to still defined, but while using the 'inline-block' the browser will not allow the overlapping to occur, displaying both div's inline, and the 'margin-left' causes a large gap between them.

This is one of the problems, the other one is that the right div won't expand to the full available width of the screen. When using an 'inline-block' without defining it's width, the div should be treated as a block and expand as it's contents require. But the 100% width of the iframe is not respected. It works if the iframe has an absolute width, or if the containing div has a specified width like 80% for instance.

So to get this working correctly in modern browsers we could make the following changes in the CSS:
.Enterprise_TwoColumns_RightLiquid {
// margin-left:216px;
width: 80%; }
.Enterprise_TwoColumns_LeftFrozen {
border:1px solid #DDDDDD;

This should get it working right in browsers that support the 'inline-block', but it would also break the ancient ones which according to quircksmode is almost all the relevant ones:

We can also simply comment out the 'display: inline-block' from the Enterprise_TwoColumns_LeftFrozen, and Enterprise_TwoColumns_RightLiquid. It won't be nearly has fun as the other solution but it should work in all browsers.

As a quick-fix this could be included as a GreaseMonkey script, for those already using Firefox 3:

// ==UserScript==
// @name EnterpriseManagerQuickFix
// @description This is just a very simple fix to try EM iframe.
// ==/UserScript==

document.getElementById('wtRightColumn').style.display = "block";

Disclaimer: I haven't properly and thoroughly tested all this in the various browsers.
Thanks a lot for your tips André, they're great!
We'll test your suggestions and implement them in the next version of Enterprise Manager.

Tiago Simões