Search code examples
htmlcsspositioningcss-positionresizable

HTML and CSS Positioning

Possible Duplicate:
Text input with z-index inaccessible by click in IE

If you follow this link you can see that i am trying to show a text-box inside a div on top of image which is draggable.

http://jsfiddle.net/N87CX/27/

I have 2 issues

  1. In IE 8 I am not able to click inside text-box.
  2. Also some problem with size of text-box when the div is re-sized it does go out of the parent div.

Can I restructre this peoperly so it solves both these issues ?

Thanks.

Solution

  • This is quite an interesting problem.

    The first part about IE8 appears to me to be an issue with the transparent background within the text area. If you apply a colour to the background then you are able to access the text area as expected. To make this a little more intriguing - when you add default text, you can access the text area only where this text already exists.

    So I would recommend investigating how IE 7 and IE 8 handles / creates transparent backgrounds. And maybe question whether it really needs to be transparent (if you want the easy way out).

    The second issue that you mention about the div extending over the parent div can be fixed by adding overflow: hidden to the parent div - which in this case, you should add it to the #dragDiv item within your css. This is often the case when using floating elements within a div - you should read more about floating elements and clearing them ( clear: both ) as they are the cause of so many problems if not handled correctly.

    I hope that helped a little and I would be interested to know if you find the cause of the first issue!