[2.??] Vertical separator in Menu item

[excelsis]

There is "dead" space between a menu item icon and the associated text in an Menu item where mouseover/click handlers of the menu are not active.

I think this is specific to IE7/8; seems OK in FF3

The dead space corresponds to the 8px right margin assigned by class x-menu-item-icon. In this margin the background menu.gif image that includes the vertical separator "bleeds through" and is unresponsive to events.

[Condor]

Yes, that also bothered me for quite some time...

I played a bit with the CSS rules and came up with:

<style type="text/css">
.x-menu a.x-menu-item {position: relative; padding-left: 27px;}
.x-menu-item-icon {position: absolute; left: 3px; top: 3px; margin: 0;}
</style>

(also looks better with multi-line menu item text)

[excelsis]

Thanks Condor ... but it doesn't work in IE8 (see attachment).
and if I fiddle with it to work in IE as follows
.x-menu a.x-menu-item {position: relative; padding-left: 27px;}
.x-menu-item-icon {position: absolute; left: -24px; top: 3px; margin: 0;}

then of course FF doesn't work (icons get placed to left of actual menu).
Seems to be the absolute vs relative positioning.
Haven't had a chance to try IE7 - maybe just an IE8 beta bug.

Sorry to bother you but how do I make a CSS rule conditional for different browsers?
Should I repost to another forum? TIA

[Condor]

IE8 isn't supported by Ext 2.2.

What changes did you make to make Ext 2.2 work on IE8 at all?

[excelsis]

Nothing. Works fine for me. Version is 8.0.6001.18241 beta2.
My app has many ExtJS features - grids, trees, accordions, editors etc.
What problems have you encountered or would you expect me to experience?
Hopefully I'm not missing something!

[Condor]

There are several layout issues in IE8 strict mode (see main IE8 issues thread).