2

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.

Community
  • 1
  • 1
Sonesh Dabhi
  • 23
  • 4

3 Answers3

0

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!

My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
0

IE has a bug with transparent backgrounds on inputs and textareas, to get around the best thing to do is use a transparent.gif for the background

then next I found that IE will not accept a 100% (or any percent) height on the textarea, even if the parent div has an explicit height, but if you set the height on the textarea all appears to be well

Example : HERE

I found it better to make the height at least twice the line height or the scroll looked untidy (slightly out of the box), and also I removed the positioning from the inDragDiv to let it default under header .. there is still a 1px difference in IE7 and below which I've corrected using a negative margin.. in IE7 the positioning was taking it, the textarea) way over to the tight.. if you still want to use absolute positioning you shouljd explicitly declare the left: 0; property

Community
  • 1
  • 1
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
0

Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375

Muthukumar Arumugam
  • 11
  • 1