I have this issue with a popup calendar and that I am once again, like an idiot, trying to put elements side-by-side on an web page using css. css hates that with a passion and fights you like a ninja.
.cbox {
margin: 0 auto;
position: relative;
text-align: left;
clear: both;
}
.cright {
float: right;
text-align: left;
clear: right;
}
/* IE hack for sp_addrept.php, calendarDateInput alignment */
#dateslot {
margin-left: -2px;
margin-top: -9px !important;
margin-top: -25px;
text-align: left;
z-index:100;
}
/* doctype is 4.01 strict */
<div class="cbox" style="width:330px; padding-top:17px;">
<div class="cright" style="width:150px; text-align:right; z-index:1;">
<select name=Hour class="flist" style="width:45px; margin-right:2px;">
/* options omitted for brevity */
</select>
<select name=Min class="flist" style="width:45px; margin-right:2px;">
/* options omitted for brevity */
</select>
</div>
<div id="dateslot" style="width:175px; clear:left; z-index:2">
<script>DateInput('Date',true,'YYYYMMDD','20050611')</script>
</div>
</div>
The DateInput() creates date input dropdown selections and on demand pops up a calender to the right. In Firefox the calendar is on top of the time inputs (and some buttons which I haven't shown), but in IE it is underneath them.
I have tried z-index with numbers as high as 100 with no effect. I have tried floating the left div and letting "text-align:right" align the right div. (Somewhere I got the impression that floats go on top of non-floats.) I tried negative z-indexes.
The popup is created by some javascript that is not enough comprehensible to me to put a z-index in it. (Besides, FF puts the calendar on top.) It isn't feasible to layout the format to leave a blank space to the right of the date for the popup calendar, so is there any other option?One thing you could do is shed a bit more light on the problem by showing us the page (a link).Let me think about how I can do that. It's a popup window which is displaying data from a database dependent on parameters, and is located within a screen which is itself also data dependent. I'll probably have to create some sort of dummy page containing the popup link with some dummy parameters and data for it to display. I'll see what I can do.The zIndex works but IE assigns drop down a zIndex of infinity so that it will always appear in front.I've got a page up for you to look at, but it's not behaving quite the same way. The calendar pops up in front when you view the page in Firefox. In IE I'm not certain what's happening, but I think it's popping up but is doing so behind everything including the background. On the site it was in front of the background but behind the other visible elements.
You can see the page here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/test.php">http://www.sonora-sw.com/test/test.php</a><!-- m -->), while css pages are here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/alignment.css">http://www.sonora-sw.com/test/alignment.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/pixelfont.css">http://www.sonora-sw.com/test/pixelfont.css</a><!-- m -->). The javascript is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/calendarDateInput.js">http://www.sonora-sw.com/test/calendarDateInput.js</a><!-- m -->).felgall has the right idea. IE-Win renders drop down boxes in the Window level of the OS. Drop down menus in IE seem to actually be a part of the operating system rather than an element on a Web page. No amount of z-indexing can fix this. When someone clicks on the popup calendar, you'll have to hide the dropdowns in IE-Win that will appear above the calendar.
Firefox renders dropdown menus, and all other form elements as inline elements.Okay, thanks. The same js was rendering the date inputs (independent of the popup) in a rather crappy way and I had patched it with less that completely satisfactory results. So I think it's time to dump this third-party product and move on.z-index doesn't really seem to work unless you also set the position property.While that's true, Ultimater, Jayhawk's problem stemmed from an absolutely-positioned element being overlapped by a select box in IE-Win. The select box existed in the normal document flow.I believe it only works in IE for absolutely positioned elements.
.cbox {
margin: 0 auto;
position: relative;
text-align: left;
clear: both;
}
.cright {
float: right;
text-align: left;
clear: right;
}
/* IE hack for sp_addrept.php, calendarDateInput alignment */
#dateslot {
margin-left: -2px;
margin-top: -9px !important;
margin-top: -25px;
text-align: left;
z-index:100;
}
/* doctype is 4.01 strict */
<div class="cbox" style="width:330px; padding-top:17px;">
<div class="cright" style="width:150px; text-align:right; z-index:1;">
<select name=Hour class="flist" style="width:45px; margin-right:2px;">
/* options omitted for brevity */
</select>
<select name=Min class="flist" style="width:45px; margin-right:2px;">
/* options omitted for brevity */
</select>
</div>
<div id="dateslot" style="width:175px; clear:left; z-index:2">
<script>DateInput('Date',true,'YYYYMMDD','20050611')</script>
</div>
</div>
The DateInput() creates date input dropdown selections and on demand pops up a calender to the right. In Firefox the calendar is on top of the time inputs (and some buttons which I haven't shown), but in IE it is underneath them.
I have tried z-index with numbers as high as 100 with no effect. I have tried floating the left div and letting "text-align:right" align the right div. (Somewhere I got the impression that floats go on top of non-floats.) I tried negative z-indexes.
The popup is created by some javascript that is not enough comprehensible to me to put a z-index in it. (Besides, FF puts the calendar on top.) It isn't feasible to layout the format to leave a blank space to the right of the date for the popup calendar, so is there any other option?One thing you could do is shed a bit more light on the problem by showing us the page (a link).Let me think about how I can do that. It's a popup window which is displaying data from a database dependent on parameters, and is located within a screen which is itself also data dependent. I'll probably have to create some sort of dummy page containing the popup link with some dummy parameters and data for it to display. I'll see what I can do.The zIndex works but IE assigns drop down a zIndex of infinity so that it will always appear in front.I've got a page up for you to look at, but it's not behaving quite the same way. The calendar pops up in front when you view the page in Firefox. In IE I'm not certain what's happening, but I think it's popping up but is doing so behind everything including the background. On the site it was in front of the background but behind the other visible elements.
You can see the page here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/test.php">http://www.sonora-sw.com/test/test.php</a><!-- m -->), while css pages are here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/alignment.css">http://www.sonora-sw.com/test/alignment.css</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/pixelfont.css">http://www.sonora-sw.com/test/pixelfont.css</a><!-- m -->). The javascript is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/test/calendarDateInput.js">http://www.sonora-sw.com/test/calendarDateInput.js</a><!-- m -->).felgall has the right idea. IE-Win renders drop down boxes in the Window level of the OS. Drop down menus in IE seem to actually be a part of the operating system rather than an element on a Web page. No amount of z-indexing can fix this. When someone clicks on the popup calendar, you'll have to hide the dropdowns in IE-Win that will appear above the calendar.
Firefox renders dropdown menus, and all other form elements as inline elements.Okay, thanks. The same js was rendering the date inputs (independent of the popup) in a rather crappy way and I had patched it with less that completely satisfactory results. So I think it's time to dump this third-party product and move on.z-index doesn't really seem to work unless you also set the position property.While that's true, Ultimater, Jayhawk's problem stemmed from an absolutely-positioned element being overlapped by a select box in IE-Win. The select box existed in the normal document flow.I believe it only works in IE for absolutely positioned elements.