chrome drop down allowing text underneath to be selected in ie

[chrisburke]

http://www.sixplusonemedia.com.au/stillspirits/

I'm using the Chrome drop down on a website for a client and am having a wierd issue in IE 6+7. FF, Safari and IE 8 are fine.

My problem is that the text and links underneath the dropdown are being selected and causing the dropdown to dissappear! I've found I can avoid it by putting the menu contents into an iframe, but would rather avoid such an ugly way of getting around this problem.

My thinking is that it has something to do with IE and floats, but I'm not sure. There are 3 drop down menus, two are simple lists while the third contains five divs. The problem happens in all the drop downs but is most noticeable in the thrid drop down as it covers the width of the website.

Can anyone shed some light here? Any help would be greatly appreciated as this has me stumped!

Thanks

[CCH]

The link you posted doesn't seem to work for me...

[chrisburke]

Sorry, it was linking to the wrong db. Fixed now! :)

[jscheuer1]

I think the problem is that the:


<div class="dropmenudiv" id="dropmenu2"

and similar have no background. Considering your markup and its appearance, an all but transparent .png image would be good for this, however, without some kind of 'pngfix' and even with it, this may not be suitable for IE 6. A fully transparent .gif might work, though it might not.

Iframes may be made transparent in IE, though this might give rise to the same issues. But if that works out, the code for the iframe could be made specific to IE or to just those versions of it that require it.

[chrisburke]

fantastic! yep that was it. Transparent gif worked for both ie6 & 7!

Thanks for your help on this, greatly appreciated!