Div hiding behind srcolling div!

Hi,

I have a small problem with the behavior of the following code. When you click the link (run the code in your browser to see), a small div appears (the hover div). I need this div to appear in *front* of the scrolling area, not within it. In IE, that is possible if you remove the "position:relative;" from the first div. However, if I do that, another bug is produced (in IE only) on my site, so I need to keep that there. But either way, I can't get it to appear in front of the scrolling area in FF.

Any help would be extremely appreciated! Thanks!

Here's the complete code, from <html> to </html>:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>hover div bug test</title>

    </head>

<body style="FONT-FAMILY:Arial; color:#000; font-size:10pt;">
 
<script type="text/javascript">

    function toggleHover()

    {

        var h = document.getElementById("hover");

        var w = document.getElementById("wrapper");

        if(h.style.display == "none")

        {

            h.style.top = w.clientHeight + 5 + "px";

            h.style.display = "";

        }

        else h.style.display = "none";

    }

</script>
 
<div style="width:150px; height:150px; border:solid 5px #ccc; overflow-y:auto; overflow-x:hidden; padding:10px; margin:10px; z-index:0; position:relative;">
 
    <div id="wrapper" style="float:left; position:relative;">
 
        <a href="javascript:toggleHover()">Click Me</a>
 
        <div id="hover" style="background-color:#eee; border:solid 2px #000; position:absolute; top:0; left:0; z-index:9999; width:275px; padding:10px; FONT-FAMILY: Arial, Helvetica, Verdana sans; display:none;">

            Hover div with a set width and a long string of text.

        </div>
 
    </div>
 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
</div>
 
<br /><br /><br /><br /><br />
 
</html>

Jul 9 '07 #1

Subscribe Post Reply

2184

drhowarddrfine

7,435

Expert 4TB

I need this div to appear in *front* of the scrolling area, not within it. In IE, that is possible if you remove the "position:relative;" from the first div.

I believe this is occuring due to an IE bug. Elements are NOT to expand to contain absolutely positioned and floated elements. FF is performing correctly by not doing so.

Jul 9 '07 #2

allon

I believe this is occuring due to an IE bug. Elements are NOT to expand to contain absolutely positioned and floated elements. FF is performing correctly by not doing so.

I don't expect the scrolling div to expand. On the contrary, I would just like the div that appears to appear in front of the scrolling div. It's even got a higher z-index.

Jul 10 '07 #3

praveen2gupta

201

100+

Use following code, Pay attension on closing of div tags

<div style="width:150px; height:150px; border:solid 5px #ccc; overflow-y:auto; overflow-x:hidden; padding:10px; margin:10px; z-index:0; position:relative;"></div>

<div id="wrapper" style="float:left; position:relative;"></div>
<div id ="link"><a href="javascript:toggleHover()">Click Me</a> </div>

Now click me will come outside the textarea.

remove unwanted </div> tags from lower code.

Jul 10 '07 #4

by: Amber | last post by:

The DataGrid allows you to make columns visible or invisible on demand - even edit and other special columns. This article will show you how it is done. Some developers have reported problems...

ASP.NET

dynamic hiding/showing of template column

by: beccak | last post by:

Hi, I'm trying to hide a template column in a datagrid then later show it. I've tried setting the visibility to false, but this doesn't let me get to the underlying data in the column. I've tried...

ASP.NET

Send value to code behind sub procedure

by: Steven K | last post by:

Hello, I am trying to learn how to use Code Behind. Essentially, the example of Block 1 and Block 2 are the same. The difference is that in Block 1 I explicitly set the parameter value to...

ASP.NET

How to bring aspx code (in HTML view) to the aspx.vb code-behind?

by: Paolo Pignatelli | last post by:

I have an aspx code behind page that goes something like this in the HTML view: <asp:HyperLink id=HyperLink1 runat="server" NavigateUrl='<%#"mailto:" &...

ASP.NET

Hiding DIV tags based on id or title?

by: Kourosh | last post by:

I have a lot of DIV tags on an HTML page. I want to group some of them so that I can hide them all together at once if needed. What's a good way to do this? I want this to be compatible with at...

Javascript

Hiding Scrollbars

by: dd | last post by:

Does anyone have a cross-browser solution for hiding scrollbars and/or disabling scroll for the whole page? When the user clicks something, I want to display a DIV that fills the whole client...

Javascript

showing and hiding an element

by: rohitchawla | last post by:

i am trying to show and hide a div when onmouseover and onmouseover another div element. i am setting a setTimeout duration on onmouseout to delay the hiding of div for around two second The...

Javascript

Displaying hiding div on page load

by: emmanuelop | last post by:

Hello , I'm trying to show or hide a div tag based on whether a user is signed in or not.There is a value set to a logged in users name contained in a rails script tag and it is this value which I...

Javascript

How to display a child element while hiding a parent

by: dweeti | last post by:

Hi, I am trying to display the child element in the DOM, while hiding the parent using JS and CSS, however I cannot find a way to do this. So for example: <body> <div id="Parent"> <div...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Div hiding behind srcolling div!

Similar topics