[jQuery] Re: BlockUI overlapping issue with element negative margin
Hi Mike, I just found out that exactly this behavior (changing the display from static to relative) messes up my page too, only in IE: a known issue with the IE's z-index stacks (well described at http://mahzeh.org/?p=19). Could you consider, if possible, reverting the blocking element's display attribute back to static after unblocking? Thanks a ton in advance, snobo On Jun 19, 7:36 pm, Mike Alsup mal...@gmail.com wrote: Yes it is modified, because the div itself (not the blocking overlay) comes over the ul/li elements when calling blockUI on it. To clarify, the zIndex of the div is not modified. The only thing modified on the blocked element (the div in your case) is the position style, and only if it is currently 'static'. The position is set the 'relative' so that the overlay can be absolutely positioned within. Mike
[jQuery] Re: BlockUI overlapping issue with element negative margin
Could you consider, if possible, reverting the blocking element's display attribute back to static after unblocking? The plugin already does that.
[jQuery] Re: BlockUI overlapping issue with element negative margin
The issue is that, when calling blockUI on that DIV, it makes the div go above the UL/LI elements. I tried to change the zindex values everywhere, with no effect. I do not understand why the DIV is modified by blockUI ? The div is not modified, it's the blocking overlay that has a higher zIndex. Did you try adjusting the baseZ option? Mike
[jQuery] Re: BlockUI overlapping issue with element negative margin
Hi,
Yes it is modified, because the div itself (not the blocking overlay) comes
over the ul/li elements when calling blockUI on it.
And yep I tried to change the baseZ option. I set it to 1, 0... And I set my
ul/li zindex to 1 with no effect.
Here is some sample code, so that is easier to understand :
[code]
div id=content
div id=tabsList
ul id=homeTabs
li id=tab_publicationsPublications/li
li id=tab_favoritesFavorites/li
li id=tab_tasksTasks/li
li id=tab_planningPlanning/li
li id=tab_etcEtc/li
/ul
div class=clearnbsp;/div
/div
div id=tabContent/div
/div
[/code]
[code]
$('#homeTabs li').click(function()
{
var oThis = $(this);
var sTab = oThis.attr('id').split('_')[1];
SScreenWorkspace.showTab(sTab);
});
And in showTab I do (among other stuff that is not generating the bug) :
$('#tabContent').block();
[/code]
If I let this line, the bug appears. If I comment out this line, the bug
disappears.
[code]
#homeTabs
{
padding: 0;
margin: 0;
margin-bottom: -1px;
list-style: none;
overflow: hidden;
z-index: 10;
}
#homeTabs li
{
float: left;
display: block;
padding: 3px 16px;
margin: 2px;
margin-bottom: 0;
border: 1px solid gray;
-border-bottom: 0;
cursor: pointer;
background: #DD;
z-index: 10;
}
#tabContent
{
clear: both;
height: 200px;
border: 1px solid gray;
background: #FF;
padding: 10px;
z-index: 0;
}
[/code]
Thank you for your help !
malsup wrote:
The issue is that, when calling blockUI on that DIV, it makes the div go
above the UL/LI elements. I tried to change the zindex values everywhere,
with no effect. I do not understand why the DIV is modified by blockUI ?
The div is not modified, it's the blocking overlay that has a higher
zIndex. Did you try adjusting the baseZ option?
Mike
--
View this message in context:
http://www.nabble.com/BlockUI-overlapping-issue-with-element-negative-margin-tp24110660s27240p24113135.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: BlockUI overlapping issue with element negative margin
Yes it is modified, because the div itself (not the blocking overlay) comes over the ul/li elements when calling blockUI on it. To clarify, the zIndex of the div is not modified. The only thing modified on the blocked element (the div in your case) is the position style, and only if it is currently 'static'. The position is set the 'relative' so that the overlay can be absolutely positioned within. Mike
[jQuery] Re: BlockUI overlapping issue with element negative margin
So there is no way to fix/correct that behavior ? Like maybe modifying my ul or my li ? Thanks for your help Mike malsup wrote: Yes it is modified, because the div itself (not the blocking overlay) comes over the ul/li elements when calling blockUI on it. To clarify, the zIndex of the div is not modified. The only thing modified on the blocked element (the div in your case) is the position style, and only if it is currently 'static'. The position is set the 'relative' so that the overlay can be absolutely positioned within. Mike -- View this message in context: http://www.nabble.com/BlockUI-overlapping-issue-with-element-negative-margin-tp24110660s27240p24115239.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: BlockUI overlapping issue with element negative margin
So there is no way to fix/correct that behavior ? Like maybe modifying my ul or my li ? Is this only a problem on IE? IE does weird shit with the effetive z- index of relatively positioned elements. If your design allows it, try giving your UL position:relative and a very high z-index.
[jQuery] Re: BlockUI overlapping issue with element negative margin
Hi ! The bug occurs on IE and FF (I've not tested others). I already tried to give a high zindex but with no success. I haven't tried position:relative on my UL yet, I'll try it at work on monday, or maybe I'll reproduce the case at home and try it here. malsup wrote: So there is no way to fix/correct that behavior ? Like maybe modifying my ul or my li ? Is this only a problem on IE? IE does weird shit with the effetive z- index of relatively positioned elements. If your design allows it, try giving your UL position:relative and a very high z-index. -- View this message in context: http://www.nabble.com/BlockUI-overlapping-issue-with-element-negative-margin-tp24110660s27240p24118942.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
