Z-index conflict on overlapping divs
A bit of a 'sweat' - I have come across a first issue with Z-index that only affects FF and works fine in IE. I have 2 horizontal divs that overlap each other and take almost 100% width both. There is a side bar on the left in one div and a scrollbar on the right in a second div. Both have the same Z-index and when I press on othe left bar in IE it activates the links and when I press the scrollbar on the right it works fine. BUT in FF - it's not working. So either I have to set higher index on a left div and then I won't access the right or the other way round. I need to use both and thing is I cannot really change the divs. Is there any resolution to this ? I've tried javascript Z-index shifting but doesn't work smooth...Thanks.
#left_bar {
position: relative;
margin-top:-112p开发者_JS百科x;
margin-left:auto;
margin-right:auto;
}
#post_table { // THE SCROLL on the right
position: relative;
margin-top:-800px;
margin-left:auto;
margin-right:auto;
padding-left:182px;
left:-12px;
}
#bar_links {
// THE LINKS on the left
position: relative;
margin-left:18px;
margin-right: auto;
padding-right:700px;
width: auto;
top:180px;
}
HTML:
<div align="center" id="left_bar" style="white-space:nowrap">
<img src="images/posting.png"/></div>
<div align="center" id="bar_links">
<a href="javascript:;" onmouseout="MM_swapImgRestore();"
onmouseover="MM_swapImage('images/slices/lipstick1','','images/slices/lipstick2.png',1);">
<img name="images/slices/lipstick1"src="images/slices/lipstick1.png"
width="132" height="56" border="0" id="lipstick" /></a>
</div>
<div align="center" id="post_table" style="height: 730px; width:644px; overflow: auto;overflow- x:hidden;">
<table width="640" id="table_main">
<tr>
<td>
<?php
echo "<table cellspacing='1' cellpadding='1' border='0' width='600' align='center'
id='inner_table'><tr><td>";
echo "<span style='font-size:11px;color:#dddddd;white-space:nowrap;background-
image: url(images/branches.png);float:left'> ".$post_date." </span> ";
echo "</td></tr><br/>";
echo "<tr><td align='left' id='post_style'>";
echo $posting;
echo "</tr></td>";
}; ?>
</td>
</tr>
</table>
</div>
What I can certainly say is that you are almost certain to have issue : Your HTML is not valid at all.
This line alone will do different thing in different browser :
echo "</td></tr><br/>";
Second, you speak about a z-index problem, but there is none in the code you supplied. How can we fix something that doesn't exist?
Your problem is certainly that $posting;
is not displayed in FF but it is in IE. The reason is quite simple : Your #post_table
is defined after #left_bar
and #bar_links
. It is why it appears under them.
I have no idea what is your idea, but I can confirm you that using lots of negatives margins will be hard to manage. Right now you define 2 box and move a third one over/under them...
Here's a jsFiddle using your somewhat corrected+adapted code that look similar in FF and IE.
精彩评论