CSS and Z-Index

[computerservices]

Morning all,

Having a massive problem on a website I'm building. Basically the drop down menu drops down under the Java applet which provides a virtual tour... i.e. it hides it. So I've read that the way to solve this is by setting the CSS drop down menu to have a z-index higher than the java applet... But it doesn't want to work!

Any clues?

The actual applet html output...

<div class="entry">
				<div class="ptviewer" z-index="0"><applet archive="http://www.final.orlandoskyvilla.co.uk/wp-content/plugins/wp-ptviewer/applets/ptviewer.jar" code="ptviewer.class" width="500" height="300"><param name="roi0" value="i'http://www.final.orlandoskyvilla.co.uk/wp-content/uploads/bed3.jpg' x0 y65"><param name="pwidth" value="1262"><param name="pheight" value="631"><param name="panmin" value="-180"><param name="panmax" value="180"><param name="tiltmin" value="-71"><param name="tiltmax" value="71"></applet><div class="caption"> </div></div>

The Java applet CSS file...

.ptviewer {
    margin: 5px;
    padding: 5px;
    border: 0px solid black;
    text-align: center;
    z-index: 0;
}

The drop down menu CSS code section

#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; width:100%; background:#fff; font-weight:bold; z-index:300;}

Link so you can see whats going on:
http://www.final.orlandoskyvilla.co.uk/?page_id=171

Would really appreciate any help!!!

Cheers!
Liam

 

[C.Pearse]

Hi Liam

Because a Java applet is not rendered by your browser but drawn by the OS, z-index on the applet alone will not work.

There is a work-around though. The trick is to draw an IFrame [also drawn by the OS] using JavaScript on mouseover and position it in exactly the same place as the mouseover menu with a lower z-index than the mouseover menu. Set the IFrame src to...

javascript:false;

... so the IFrame won't show, you'll just get the mouseover menu showing above the applet because it has a higher z-index than the IFrame and the IFrame is drawn on top of the applet.

Search Google for IFrame Shim - I think that's the term.

Cheers
Chris

 

[NuBlue]

The z-index should work but you will need to apply a z-index value to the drop down navigation and to the element which you are trying to move to the background.

Like C.Pearse has said, this will not work directly on the javascript but if you put the Java applet in a containing DIV and apply the z-index value to this DIV then the menu should clear the DIV and everything inside it... job done.

Hope that helps.

 

[computerservices]

Cheers for those guys. Maybe this is me being stupid but I have the code as...

 <div id="navbase">
<ul id="dropmenu">

<div class="ptviewer"><applet archive="http://www.final.orlandoskyvilla.co.uk/wp-content/plugins/wp-ptviewer/applets/ptviewer.jar" width="500" height="300" code="ptviewer.class" ><param name="roi0"    value="i'http://www.final.orlandoskyvilla.co.uk/wp-content/uploads/bed1.jpg' x0 y65"></param><param name="pwidth"  value="1262"></param><param name="pheight" value="631"></param><param name="panmin"  value="-180"></param><param name="panmax"  value="180"></param><param name="tiltmin" value="-71"></param><param name="tiltmax" value="71"></param></applet><div class='caption'> </div>

And the CSS as:

#navbase {
    z-index: 80;
}

.ptviewer {
    margin: 5px;
    padding: 5px;
    border: 2px solid black;
    text-align: center;
    z-index: 20;
}

Yet it isn't working... Am I being horribly stupid and missing something simple? And I couldn't get the IFrame shim to work no matter what I tried!

Would appreciate any help on this at all guys!
Cheers

 

[justfigures]

Hi computerservices

I did write something on this for a snippet I did on z-indexes in CSS and it went:

"Creating layers with the z-index:
Elements must be positioned absolutely or be a descendant of that positioned element.
An element with a higher z-index appears in front of an element with a lower z-index."

I believe that you have not done the first bit ie. positioned the box div container absolutely. The page I created to show this is at;
http://www.justfigures.co.uk/xhtmlcsslayout/xhtmlcsslayoutsnippets8.php

Hopes this helps.


Cheers
justfigures
http://www.justfigures.co.uk

 

[computerservices]

Well... I've tried all sorts.

Anyone fancy doing this for me? Paid of course.

Cheers

 

[C.Pearse]

I notice you're using the IFrame method? It's working for me in Firefox!

Cheers
Chris

 

[FireFleur]

I come across this problem quite a lot when it relates to flash content.

I am not running java applets in a browser so I cannot check to see if this works, but I think there is another solution apart from iframes.

The problem is the plugin takes control of the browser and can force z-index at a lower level.

If you like try out the cyber visor on the page. Just drag the concept visor link to your bookmark toolbar.

Then click the concept visor book mark on your page, and that should open a 'window', if that is above the applet PM me, if you like, and I will explain the z-index trick I used to achieve that. The concept visor is a division really, and it includes itself onto any page, if you click the bookmark.

 

[AllITServices]

Hi, I can provide web development services and would be happy to take a look at this piece of work for you. If you are interested in this, please let me know (01749 813955).

Kind regards,
Ben

 

[dan_r]

My initial feeling on this when I read it is that it's a browser issue. Someone's already mentioned that they've seen similar effects with Flash. I've seen this quite often over the years I've been working in web development.

In a nutshell some browsers will implement elements like Flash or Java as if they were above the CSS level and there's little you can do about it.

The best work around is to redesign the site. Either reposition the elements so they avoid the java applet or remove one or the other altogether.

Drop me a PM if you want me to take a look at it in a professional capacity.