hidding float problems

[Mooglegiant]

I only get this bug in IE6.

I have a floating hyperlink and when it floats over another hyperlink, the bottom hyperlink text is visible even with the other link floating over it.

The work around I found in firefox was to set the z-indexs, but I can't get that to work in IE6.

Any thoughts?

[jhardman]

Have you tried attaching the floating link (the one you always want to see, right?) to an image or a button rather than text?

[Mooglegiant]

Thats not going to really work. Let me try to explain.

I have a repeating table. One of the fields I need to display can be rather large.
So what I want to do is have a field in the table, with the words "See Detail" on it and when you hover over it, then a larger box is displayed with the full text.

I have tried a couple different ways. And the mouse properties are not what I want, because either I use the mouse over property that works in IE but not in Firefox, or the mouse property that works in Firefox, but causes flickering in IE when the mouse moves.

So What I was trying to do to keep browser compatiablity was to use <a> elements to work with hovering properties using CSS. So I have code like such.

<td>
<div class="Details">
<ul>
<li>
<a href="#">View Details
<!--[if IE 7]><!--></a><!--<![endif]-->
<ul>
<li runat="server" id="LiObject><a> Long text field </a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</td>
//repeat with each table line


and use the hover properties on the LI with CSS for Firefox, and with the <A> for IE.

But when the inner LI element is displayed the outer LI element of the rows above and below it are visible even under the floating LI / A element.

It works fine most browsers that I have tested. Just not IE 6, which is main browser this will be used in (for internal company reasons)

[AricC]

You could use Javascript to 'hide' the data and allow the user to click to see more is that more of what you are looking for?


Aric

[Mooglegiant]

Yeah, but I was hoping I could do that without Javascript. But since I am running into this problem of Hyperlinks always being set on the top of other elements in IE6.

I really wanted to just do this with hover over and not with on click events

[jhardman]

You should still be able to do it with javascript using onmouseover rather than click events. A hidden div would work nicely, but I'm not sure ie6 supports z-index (used to put one element in front of another).

Jared

[drhowarddrfine]

Using either method should work in Firefox just fine. Do you have a copy of the page with just the html and css? Otherwise I have to think and I just hate that.

This would be a lot easier without the tables, too.

And what's with you js guys? Everything's a javascript solution.
:)

[Mooglegiant]

Ok, well I have to use a table, because it works in part with asp 2.0.

So, I have a GridView table with a repeater control and some template data.

So in the middle of the table I have a <td> containing such

<div class="Details">
  <ul>
    <li>                                                                                    
     <a href="#">View Details
     <!--[if IE 7]><!--></a><!--<![endif]-->
      <ul>
     <li><a>Massivly Long data is inserted here</a></li>
      </ul>                                            
       <!--[if lte IE 6]></a><![endif]-->                                
     </li>
   </ul>
 </div>
 

and then I have some CSS markup so that if will hide the inner LI element except when the outer LI:hover, or outer A:hover (LI for firefox and such, A for IE)
and then I set a z-index on the outer li and A, and set a higer z-index on the inner LI and A. There is also some CSS to file in the elements

which works fine in firefox, but not IE.

And I am not using javascript, because mouseenter and mouseover only work right in one browser and not the other, either it does work in firefox at all (since its not supported) or causes flickering in IE.

so what I get is a floating hyperlink over a element that I am hovering over and what I get in IE now is the floating LI / A element. and within the element you can see the text of the hyperlink below it in all the table rows that it is over.

[jhardman]

And I am not using javascript, because mouseenter and mouseover only work right in one browser and not the other, either it does work in firefox at all (since its not supported) or causes flickering in IE.

so what I get is a floating hyperlink over a element that I am hovering over and what I get in IE now is the floating LI / A element. and within the element you can see the text of the hyperlink below it in all the table rows that it is over.

Have you set a background for the LI / A? That might cover the lower data.

If you set a position (absolute or relative) for the LI/A that might solve the flickering problem. (Is it flickering because it moves, or what?)

[Mooglegiant]

I did set a backgroud color to every object, but you can clearly see the underlaying text inside the top elements, and the top level has a relative position.

it flickers in IE if I use the mouseover event, i believe. Looks like every time the cursor moves it retriggers the event and hides and then shows the floating objects again.

[jhardman]

Ok, what about placing a solid color gif at z-index = +1 and the text at z-index = +2. That should hide the underlying text and show the data you want.

[Mooglegiant]

I still have not tried that. I was hoping I could do that without the use of underlaying image.