Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

css problem in internet explorer

TobiPAug 31 2012 — edited Sep 3 2012
Hi to all!

On my page as part of the page template I have build in a little drop-down user panel on the left top of the page.

html:
<div id="userpanel">
  <span><img src="'#APP_IMAGES#openSlidedown.png" />&nbsp;<a>logon: &APP_USER.</a>
  <div id="userpanel_hsreg"><p>Autorisiert für: &APP_CODES_DISP.</p>
  <p>|&nbsp;#NAVIGATION_BAR#</p>
  </div></span>
</div>
css:
#userpanel,
#userpanel * {
        position:relative;
	font-family:verdana; font-size:12px;
	margin:0; padding:1px; border:0;
	white-space:nowrap;
	}
#userpanel a,
#userpanel span { display:inline-block; }
#userpanel>span>a { color:#999; }
#userpanel span:hover div { display:block; }
#userpanel>span:hover > a { color:black; }
#userpanel_hsreg {
		display:none;
		position:absolute;
		left:+5px;
		top:+24px;
		background:#fff;
		padding:10px 18px;
		line-height:180%;
		border:1px solid silver;
		border-radius: 6px;
		box-shadow:1px 2px 5px #aaa;
		z-index:99;
		}
#userpanel>span>a {
		border-bottom:1px solid silver;
		margin-top: 5px;
		}
So what happens is this: if the user hovers over the "+logon: username+", a little box pops up with some further information (the item &APP_CODES_DISP.) and the logout-link. Below this link, the Navigation bar starts. So while the box pops up, it covers a part of the region below, what its meant to do.

The promlem is, that this doesnt work in Internet Explorer properly, when its launched from apex. Instead, the popup-box is displayed behind the region below. In Mozilla, as always, everything worls fine. This problem ocured already, when I opened the html-file from desktop, but I fixed that by putting the z-index-attribute in. Only now, in Apex, its still now working in IE. I am not that of an expert in css. I have tried different XHTML declarations in the header, all no difference.

The current one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This might be a bit of a tricky issue, so I dearly hope, someone can help me. (Similar problem like the other threat I started recently here where the round-corner attribute is not working in IE-Apex, but this time its a bit more vital. :) )

I have v 4.0.2.

Thanks and greetings,
tobi
Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Oct 1 2012
Added on Aug 31 2012
4 comments
215 views