LI showing thru div

henwolf · March 13th, 2006, 10:17 PM

Hi

I have the same problem encountered with select showing thru div but for my case, its LI showing thru div. For example, I have <UL> with 5 <LI>s. When i put mouse over an <A> in the first <LI>, i will show <DIV>(as tooltip) but the <DIV> will be block by the other <LI> in the <UL>.

It works OK on firefox but not IE.

Any ideas?

meow · March 13th, 2006, 10:28 PM

Hi! :)
Are all elements positioned? In that case you may need z-index, depending on in which order they come in the source.

Could you link to a sample page, please? It's much easer to figure out what's going on then.

--
http://yupapa.com

henwolf · March 15th, 2006, 03:24 AM

Thank you for ur reply ;)

I will try to give you a sample page soon. Right now, Im working on something else.

Thanks again.

henwolf · March 16th, 2006, 10:44 PM

Hi

I done up the sample page :)
How ever i dont have any personal homepage to put up the page.

Can someone please please recommend me a free site which i can load the sample page with css?

henwolf · March 17th, 2006, 07:33 AM

Hi everyone

I have posted my source code for the problem. Save the text to view.

Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>

</style>
<SCRIPT language=JavaScript>
function showTip(tip_id, id)
{
    var d = document.getElementById(id);
    d.style.backgroundColor = "#FFE7C4";
    var v = document.getElementById(tip_id);
    v.style.display = "";
}

function hideTip(tip_id, id)
{
    var d = document.getElementById(id);
    d.style.backgroundColor = "#eee";
    var v = document.getElementById(tip_id);
    v.style.display = "none";
}
</SCRIPT>
</head>
<body>
<UL class="time left_col" id=time_1>
  <LI> 1
  <LI> 2
  <LI>3
  <LI>4
  <LI>5</LI>
</UL>
<UL class="table box center" id=item_1>
  <LI id=37>
    <A
  href="#"
  onmouseover="showTip('tip_1_0', '37')" onmouseout="hideTip('tip_1_0', '37')"
  ><strong>Item 1 </strong></A>
    <DIV class=calinfo id=tip_1_0 style="DISPLAY: none; LEFT: 100px; TOP: 0px">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=23>
    <A
  onmouseover="showTip('tip_1_1', '23')" onmouseout="hideTip('tip_1_1', '23')"
  href="#"><STRONG
  class=summary_xxs>Item 2 </STRONG></A>
    <DIV class=calinfo id=tip_1_1 style="DISPLAY: none; LEFT: 100px; TOP: 0px">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=27>
    <A
  onmouseover="showTip('tip_1_2', '27')" onmouseout="hideTip('tip_1_2', '27')"
  href="#"><STRONG
  class=summary_xxs>Item 3</STRONG></A>
    <DIV class=calinfo id=tip_1_2 style="DISPLAY: none; LEFT: 100px; TOP: 0px">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=11>
  <A
  href="#"
  onmouseover="showTip('tip_1_3', '11')" onmouseout="hideTip('tip_1_3', '11')" ><strong>Item 4 </strong></A>
    <DIV class=calinfo id=tip_1_3 style="DISPLAY: none; LEFT: 100px; TOP: 0px">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=5>
  <A
  href="#"
  onmouseover="showTip('tip_1_4', '5')" onmouseout="hideTip('tip_1_4', '5')" ><strong>Item 5 </strong></A>
    <DIV class=calinfo id=tip_1_4 style="DISPLAY: none; LEFT: 100px; TOP: 0px">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  </LI>
</UL>
</body>
</html>

drhowarddrfine · March 21st, 2006, 08:58 PM

This is a bug in IE. I'm trying to find the answer but I just don't recall what it is. Stay tuned. (IE has many bugs with options)

drhowarddrfine · March 22nd, 2006, 12:26 AM

Now I remember. You had the right idea with position:relative but you have it in the wrong place. You (probably) don't need it here: UL.table LI { but you DO need it here:
<UL class="table box center" id=item_1 style="position:relative">
<LI id=37 >

and this fixes the IE bug.

henwolf · March 22nd, 2006, 05:29 AM

Thank you! Your method works.
Now i am able to see the div in front of the UL.

But i found another bug on this. I created a second UL menu and placed it below the first UL menu. When I mouseover the first UL's item 5, the tooltip appeared behind the second UL menu.

Any solutions for this?

I have attached the code for second UL, to be placed just directly after the first UL. Take note that I removed the TOP and LEFT style attribute for div.

<p style="clear:left ">
<UL class="time left_col" id=time_2>
  <LI> 1
  <LI> 2
  <LI>3
  <LI>4
  <LI>5</LI>
</UL>
<UL class="table box center" id=item_2 style="position:relative ">
  <LI id=2_37>
    <A
  href="#"
  onmouseover="showTip('tip_2_0', '2_37')" onmouseout="hideTip('tip_2_0', '2_37')"
  ><strong>Item 2_1 </strong></A>
    <DIV class=calinfo id=tip_2_0 style="DISPLAY: none">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item 37. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=2_23>
    <A
  onmouseover="showTip('tip_2_1', '2_23')" onmouseout="hideTip('tip_2_1', '2_23')"
  href="#"><STRONG
  class=summary_xxs>Item 2_2</STRONG></A>
    <DIV class=calinfo id=tip_2_1 style="DISPLAY: none">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item 23. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=2_27>
    <A
  onmouseover="showTip('tip_2_2', '2_27')" onmouseout="hideTip('tip_2_2', '2_27')"
  href="#"><STRONG
  class=summary_xxs>Item 2_3</STRONG></A>
    <DIV class=calinfo id=tip_2_2 style="DISPLAY: none">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item 27. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=2_11>
  <A
  href="#"
  onmouseover="showTip('tip_2_3', '2_11')" onmouseout="hideTip('tip_2_3', '2_11')" ><strong>Item 2_4 </strong></A>
    <DIV class=calinfo id=tip_2_3 style="DISPLAY: none">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item 11. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  <LI id=2_5>
  <A
  href="#"
  onmouseover="showTip('tip_2_4', '2_5')" onmouseout="hideTip('tip_2_4', '2_5')" ><strong>Item 2_5 </strong></A>
    <DIV class=calinfo id=tip_2_4 style="DISPLAY: none">
      <DIV class=inforow><B>Item Description:</B></DIV>
      <DIV>This is the description for item 5. As you can see, this tool tip is blocked by the other items in the list. The only get around i can think of is to put this div outside of the list. This problem only occurs in IE. This example shd be working fine in FireFox.</DIV>
    </DIV>
  </LI>
</UL>

drhowarddrfine · March 22nd, 2006, 09:05 AM

I don't see that problem.

henwolf · March 23rd, 2006, 03:04 AM

drhowarddrfine, thanks so much for your help.

I dont know why i have that problem, but i want to change my structure to make one div(tooltip) to cater for all LIs. And i also realised that i have to fix LI's position = relative.

We see how it goes from there. Thank you once again.