BoxOver Not at Front

[Access]

Hi people,

I am currently developing a project that uses Tabs from the DHTML Kitchen (http://dhtmlkitchen.com/scripts/tabs/index.jsp) and the problem is that the BoxOver script actually sits behind the Tab's so aren't visible. Is there any way to guarantee that BoxOver always be brought to front?

Thanks Access

[Access]

Does anyone use this forum?

[ayryq]

You can specify an external stylesheet with

<foo title="header=[myheader] body=[mybody] cssheader=[popupheaderstyle] cssbody=[popupbodystyle]" />

and then adding a style to your document:

<style>
.popupheaderstyle{
font-weight:bold;
width:150px;
font-family:arial;
border:1px solid #A5CFE9;
padding:3;
font-size:11;
color:#4B7A98;
background:#D5EBF9;
}
.popupbodystyle{
border-bottom:1px solid #A5CFE9;
border-left:1px solid #A5CFE9;
border-right:1px solid #A5CFE9;
width:150px;
fontFamily:arial;
fontSize:11;
padding:3;
color:#1B4966;
background:#FFFFFF;

}
</style>

Then you can add a z-index with a high value to the css to make the boxover div come to the front.

z-index: 5;

Eric

[Access]

It's actually quite interesting, I have set all the z-index values in the CSS for the tabs to 0, and have set the CSS for the BoxOver to 500 and they still fall behind.

The tabs are all set to absolute so its not a Rel/Ab problem...

Odd... : /

Any advice?

Also when I use a fixed BoxOver such as when using the following code

title="header=[Fixed tooltip] body=[Doesnt move with the mouse.] fixedrelx=[1000] fixedrely=[500]"

It stays in the same location no matter what I set fixedrelx and fixedrely... interesting...

[garryhs]

Hi,

I have the same problem using in a Form.

The BoxOver shows behind fields within a form.

Any Ideas ?

Garry

[ayryq]

The form fields problem exists only in IE, and is the reason the hideselects option exists. I've had success with adding blank iframes behind other divs to cover up form fields (mainly selects) in IE, but I've been struggling to make this work with the complex positioning used by BoxOver. I'll post here if I get this working--it seems like the way to go.

Eric
http://www.ericandchar.com/xsltvgrid

[jdwmk]

Hi,

I was looking at why this wasn't working in IE 6 but no problem in Mozilla.
The way I solved it was with the use of z-index. Not in the CSS as I spent a while trying, but in the init() section of the javascript library.
This is because of the way IE treats the z-index properties and the fact that the tooltip is not actually a part of the page until the loading process is completed. So, initialising the z-index at this point is the critical part.
I have highlighted the resolution I found below.

CSS - as used on the example page.

.dvhdr1 {
background:#F3F0E7;
font-family:arial;
font-size:12px;
font-weight:bold;
border:1px solid #C8BA92;
padding:5px;
width:150px;
}

.dvbdy1 {
background:#FFFFFF;
font-family:arial;
font-size:12px;
border-left:1px solid #C8BA92;
border-right:1px solid #C8BA92;
border-bottom:1px solid #C8BA92;
padding:5px;
width:150px;
}

javascript:

function init() {
oDv.appendChild(dvHdr);
oDv.appendChild(dvBdy);
oDv.style.position="absolute";
oDv.style.visibility='hidden';
oDv.style.zIndex='100';
document.body.appendChild(oDv);
}


I hope this helps out anyone else with this problem.

Jeff

[Duffdaddy]

very handy Jeff, thanks, I was having exactly the same problem and wouldn't have solved it myself. Don't know javascript so... thanks!

[MilanJ]

I have a form without DIV and I tried jdwmk solution, but it doesn't work, I have still the same...part of my form (SELECT tags) are ahead of BoxOver.

My link with short part of page: boxover.htm