Forum Moderators: not2easy
I have a css styled drop down list.
Under that I have a small heading.
And under that I have an image which when clicked on will go to different pages.
How do I make the map image fall under the drop down list?
I just can't seem to work it out.
Thanks so much in advance.
[edited by: DrDoc at 5:29 am (utc) on Oct. 2, 2006]
[edit reason] No URLs, thanks. [/edit]
I assume you are using IE, as this is an issue which only rears its ugly head in IE. Luckily, IE7 fixes the problem. There is, however, not much you can do to fix the problem in IE6 and older.
So, the short answer is: sorry, that's a browser issue which you cannot do anything about. Redesign or live with it.
The long answer is, however, a little bit more encouraging. Yes, you can fix this problem, but it requires some tricky (and sometimes ugly) workarounds. Due to their nature, not every situation is suitable for such fixes. The reason why this is a problem is because IE treats dropdowns as pure "windowed elements". You don't need to know what this means, but that basically any windowed element is always rendered "on top". Luckily, there are certain HTML elements which are both windowed and non-windowed elements. Such an element is the <iframe>. What you need to do, therefore, is position an iframe between the image and the dropdown. In other words -- above the dropdown, below the image. That part itself isn't difficult. It can be handled easily with z-index. The tricky part is the actual positioning and sizing of the iframe. But that's something you just have to try and see what actually looks best.
Again, welcome to WebmasterWorld!
