Home/ Questions/Q 6004289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T01:14:33+00:00

A bit of a ‘sweat’ – I have come across a first issue with

  • 0

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:-112px;
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'>&nbsp;".$post_date."&nbsp;</span>&nbsp;";
    echo "</td></tr><br/>";
    echo "<tr><td align='left' id='post_style'>";
    echo  $posting;
    echo "</tr></td>";
    }; ?>

</td>
</tr>
</table>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    You should start by rethinking your layout… And learning proper HTML and CSS.

    • 0