Forum Moderators: open
Any ideas or am I screwed due to microsoft's ignorance?
[webreference.com...]
I find myself making more work arounds, so my web page functions right in IE, than I do any other browser.
I hope this helps.
Playing around with your iframe idea I found one neat side effect. If you set the iframe position to be to the right of the div by several pixels, the select list will appear to split through your div. The part of the select list that is covered by the iframe will be hidden as if it is behind the div, and the part that is not covered by the iframe still sits on top.
<html>
<head>
<title>Test01</title>
</head>
<body><div style="{position:absolute;background-color:#ff0000;left:50px;top:50px;width:200px;height:200px;z-index:1;}">
howdy
</div><div style="{position:absolute;left:70px;top:60px;z-index:2;}">
<select id="lstTest" name="lstTest">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
</select>
</div><div style="{position:absolute;background-color:#0000ff;left:90px;top:70px;width:200px;height:200px;z-index:4;}">
Howdy again
</div><iframe name="fTest" id="fTest" style="{position:absolute;left:100px;top:70px;width:190px;height:200px;z-index:3;}"></iframe>
</body>
</html>
(sorry about drifting off-topic, but I am very easily amused when in serious need of sleep)
I wonder what brainiac at Microsoft decided to make select
boxes different from every other element on a web page. I'd like
to hear the logic behind that decision.
I think it's more of a legacy issue than an intentional decision. Note this reference from the W3C's HTML 3.2 recommendation:
INPUT, SELECT and TEXTAREA are only allowed within FORM elements.[w3.org...]
In older browsers, form elements actually acted as if they were SENIOR to the document body - more like a part of the operating system in the way that scrollbars are. You could observe this "senior" quality in the way pages loaded and unloaded over a nice, slow dial-up modem on a nice slow Windows 3.2 system (but this is not the time or place for such nostalgia.)
So this quirky behavior put all form elements, including <select> lists, "on top" of the rest of the page. This legacy behavior of forms and their elements made for many oddities, including the slow, slow development of complete browser support for css in form elements. And some of it still hangs on in the spaghetti code we all know and love as IE6
In fact, I just had to run a validation test to assure myself that <select> will validate when it's not inside <form>. It does. I don't know exactly when that change happened, but given the reference I found above I assume it came in with html 4.
John K has it right. Here is a sample HTML document:
<html>
<head>
<script>
function ChangeVis(state)
{
var DivRef = document.getElementById('SomeDive');
var IfrRef = document.getElementById('SomeIframe');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>Some options....</option>
</select>
</form>
<div
id="SoemDiv"
style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="SomeIframe"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br>
<br>
<a href="#" onclick="ChangeVis(true)">Click to show DIV.</a>
<br>
<br>
<a href="#" onclick="ChangeVis(false)">Click to hide DIV.</a>
</body>
</html>
Other than that there is no other fix for this problem.
I'm using a Milonic menu that is call within a page call header.asp like this
<script language=JavaScript src="/T&DSchedule/menu_array.js" type=text/javascript></script>
<script language=JavaScript src="/T&DSchedule/mmenu.js" type=text/javascript></script>
then header.asp is called via an Include statement to every page within the site.
Some pages contain select boxes, that I can't re-position, and the menu is dropping out behind them.
Sorry I'm getting to the point.
How do I make this iFrame thing work when I hover over a milonic menu Item that has a drop out?
I'd appreciate any help.
