Why do I need the background color set?

Question

I am quite confused in this matter. I am trying to get a textarea inside a div to work in IE7, IE8 and IE9 and by accident I changed the styling background from none to a color. That made it work.

Can anyone explain this?

I am sorry for the messy setup. Will lift all styling to a css-file after I understand the background issue.

Doesn't work

<textarea id="chatWindowMessageArea" style="position: absolute; display: block; margin: 0;
                    padding: 0; border: none; float: none; clear: none; left: 35px; top: 302px; width: 315px;
                    max-width: 315px; min-width: 315px; height: 63px; max-height: 63px; min-height: 63px;
                    z-index: 2; background-color: transparent; background: none; font-style: normal;
                    font-weight: normal; font-size: 100%; line-height: normal; text-shadow: none;
                    list-style: none; text-align: left; outline: none; text-indent: 0px; -moz-box-shadow: none;
                    -webkit-box-shadow: none; font-family: arial,sans-serif; font-size: 12px; font-weight: normal;
                    color: black; vertical-align: top; resize: none; overflow: auto;" type="text"
                    name="chat">
                </textarea>

Works!

<textarea id="chatWindowMessageArea" style="position: absolute; display: block; margin: 0;
                    padding: 0; border: none; float: none; clear: none; left: 35px; top: 302px; width: 315px;
                    max-width: 315px; min-width: 315px; height: 63px; max-height: 63px; min-height: 63px;
                    z-index: 2; background-color: transparent; background: #FFFFFF; font-style: normal;
                    font-weight: normal; font-size: 100%; line-height: normal; text-shadow: none;
                    list-style: none; text-align: left; outline: none; text-indent: 0px; -moz-box-shadow: none;
                    -webkit-box-shadow: none; font-family: arial,sans-serif; font-size: 12px; font-weight: normal;
                    color: black; vertical-align: top; resize: none; overflow: auto;" type="text"
                    name="chat">
                </textarea>

Answer 1

background: none means that your background will be fully transparent.

Therefore, there isn't anything to click on; you're actually clicking on whatever is behind the invisible box.