/    Sign up×
Community /Pin to ProfileBookmark

Floating div areas being overlapped by input controls

Copy linkTweet thisAlerts:
Jan 05.2006

I’ve got a problem where I use a div tag to display a popup calendar. It works fine, however I’m experiencing a problem in IE where input controls underneath the div tag are displaying over it (however the iframe inside is fine).

Please [URL=http://www.geocities.com/gavinharriss/FMEasyPopupProb.jpg]click here[/URL] to see the screenshot showing the problem – you’ll notice to the left of the popup calendar that input controls are showing through the div (before being hidden by the iframe).

Any suggestions would be greatly appreciated ?

Cheers ?

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@scojo1Jan 05.2006 — I don't know if this is the answer you want or not...

I ran into this problem a while back, and everything I could find said that there was no elegant way to solve the problem. So I used some javascript to change the style of the element I wanted to hide.

[CODE]
if (navigator.appName == "Microsoft Internet Explorer"){
document.getElementById('thing_to_hide').className = "hide";
}
[/CODE]

then in the CSS

[CODE]
.hide{
display: none;
}
[/CODE]


I hope this helps you out in some way
Copy linkTweet thisAlerts:
@gavharrissauthorJan 05.2006 — Hi scojo1,

Thanks for the tip, however since I posted my problem I've encountered something quite peculiar...

I've added my popup calendar to another page of the application and have found that the same problem doesn't occur on the second page?!?

I'm going to try and work out why the problem occurs in some places and not in others. The only real difference behind the scenes of the second page is that 2 forms exists rather than one - I wonder if this has anything to do with it?!? I'll experiment and hopefully find the reason behind the phenomena.
Copy linkTweet thisAlerts:
@scojo1Jan 05.2006 — You're welcome.


very weird about the second page. good luck in your hunt!
Copy linkTweet thisAlerts:
@UbikJan 05.2006 — I am not sure if this helps but:

The select element seems to be controlled by the OS instead of the browser, so it will stay on top of everything else.

I fixed this problem, once, long ago, when I was developing some system somewhere that only used ie:

javascript:

var oStyleSheet=document.styleSheets[0];

function somefunctionCalledWhenUserClickedSomething()

{

oStyleSheet.addRule("select","visibility:hidden;");

}

function somefunctionCalledWhenUserLetGoOfSomethingClicked()

{

oStyleSheet.addRule("select","visibility:visible;");

}
Copy linkTweet thisAlerts:
@gavharrissauthorJan 06.2006 — Hi Ubik,

Cheers for the tip, you're indeed right - it's only select elements that are causing the problem.

Much appreciated ?
Copy linkTweet thisAlerts:
@ccoderJan 06.2006 — Hi Ubik,

Cheers for the tip, you're indeed right - it's only select elements that are causing the problem.

Much appreciated ?[/QUOTE]
Be aware that there are other objects that can cause problems.

One that I have to deal with is my Java applets. In one of my pages (which is embedded in a corporate web page that I have no control over) , a chart applet covers the bottom 60% of my form. There are some long dropdown menues in the corporate page that have their bottoms hidden by the applet.

I have a link in my Favorites list that does/did a nice job of explaining the problem. Unfortunately that site appears to have been taken down. I did find [url="http://support.microsoft.com/default.aspx?scid=kb;EN-US;q177378"]this[/url] at MS that sort of explains the problem while explaining z-order. However, it won't help you with your problem.

The trick of hidding the offending objects seems to be the best option around the problem. I found & bookmarked [url="http://yxscripts.com/menuG5/examples/form.html"]another[/url] site when I was exploring the problem. I never tried using the techniques, but I seem to recall being impressed with the examples.
Copy linkTweet thisAlerts:
@gavharrissauthorJan 09.2006 — Thanks ccoder, much appreciated! I'll have a go at an iframe workaround as described in the link you gave ?
×

Success!

Help @gavharriss spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...