SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE div positioning (stacking issue)

    How can I make the #top div in this example properly overlay the #bottom div? At the moment, when I mouseover the box #top, the hover effect is only shown if your mouse enters the div without touching content of #bottom. You can prove this by mousing over from the bottom (no text, so it works) and then mousing over from the right (where you touch the text, and it doesn't work).

    What is the solution to make the #top overlay #bottom?

    Thanks for any tips!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	body
    	{
    		padding: 0;
    		margin: 0;
    	}
    	#bottom
    	{
    		padding: 0;
    		margin: 0;
    		position: relative;
    		width: 100px;
    		height: 60px;
    		background: red;
    		z-index: auto;
    	}
    	#top
    	{
    		width: 100px;
    		height: 60px;
    		position: absolute;
    		top: 0;
    		left: 0;
    		z-index: 20;
    	}
    		#top:hover
    		{
    			background: green;
    		}
    	</style>
    </head>
    <body>
    
    <div id="bottom">I am the bottom div</div>
    <div id="top"></div>
    
    </body>
    </html>

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    The box is overlaying the other box, it just so happens IE does a little spaz with the text.
    There is nothing you can do about that.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    The box is overlaying the other box, it just so happens IE does a little spaz with the text.
    Except, it isn't overlapping. This is a simplified example, but in the actual scenario there is an onclick handler on the #top div; but you can't get to it without trying to find a bleed with your mouse pointer.

    There is nothing you can do about that.
    Don't say that! There must be a way to make it overlap fully!

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Deak View Post
    Except, it isn't overlapping. This is a simplified example...
    Your simplified example is failing the real scenario then. It is working on my machine.
    Windows 7, IE 8 (tried in standard, compatibility, & quicks mode).

    The top box correctly covers the red box with green on hover.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    The top box correctly covers the red box with green on hover.
    Yes, it is, but it is dependent on where your mouse enters the first div. If you enter it from the bottom, it works. If you enter it from the right (say next to the m of bottom), it doesn't. I've got the same OS/browser setup as you.

    This is the problem, but I don't fully understand it or whether there is a solution.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •