Recently I’ve discovered that in IE8 if you have an input field element on top of an image, you will not be able to get focus inside on the input field.

Check out the demo below and view it with Firefox (latest), Safari (latest), Chrome (latest), Opera (latest), IE6 (ignore the element positions), and IE7. You will see that you ARE able to click inside the input field. Now open up your IE8 and see what happens. You are denied!

CLICK TO VIEW DEMO

Here is the setup code we have so far.

HTML:

  <div id="wrapper">
  	<div id="header">
    	 <img src="images/bg.jpg" width="690" height="180" alt="Header Background" />
          <form action="" method="post">
              <fieldset>
                  <label for="input" value="" name="input"></label>
                      <p><input type="text" /></p>
              </fieldset>
          </form>
    </div><!--close header-->
  </div><!--close wrapper-->

CSS:

html, body {
	padding:0;
	margin:0;
}
#wrapper {
	margin:0 auto;
	width:960px;
}
div#header {
	width:690px;
	height:180px;
	position:relative;
	margin:0 auto;
}
form {
	position:absolute;
	top:30px;
	left:150px;
}
form fieldset {
	border:none;
}
form p {
	background:url(../images/inputbg.png) no-repeat scroll top left;
	width:386px;
	height:71px;
	clear:both;
	display:block;
	position:relative;
}
input {
	border:none;
	background:none;
	color:#444444;
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	position:absolute;
	top:15px;
	left:10px;
	font-size:40px;
	width:350px;
	padding:0 10px;
}

Ok after you realized that you have been ultimately denied of being able to click into the input field in IE8 you are probably saying “oh this is an easy fix, just add in z-index to place input element above the image tag”. You will quickly find out that it doesn’t work. The image is not “actually” on top of the input field or else you will not even see the input field at all.

Now check out this demo (fixed):

CLICK TO VIEW DEMO

Here is the corrected code. I simply took out the img tag from the HTML markup and added the image as a background image in the header of the CSS.

HTML:

  <div id="wrapper">
  	<div id="header">
          <form action="" method="post">
              <fieldset>
                  <label for="input" value="" name="input"></label>
                      <p><input type="text" /></p>
              </fieldset>
          </form>
    </div><!--close header-->
  </div><!--close wrapper-->

CSS:

html, body {
	padding:0;
	margin:0;
}
#wrapper {
	margin:0 auto;
	width:960px;
}
div#header {
	width:690px;
	height:180px;
	position:relative;
	margin:0 auto;
        background:url(../images/bg.jpg) no-repeat;
}
form {
	position:absolute;
	top:30px;
	left:150px;
}
form fieldset {
	border:none;
}
form p {
	background:url(../images/inputbg.png) no-repeat scroll top left;
	width:386px;
	height:71px;
	clear:both;
	display:block;
	position:relative;
}
input {
	border:none;
	background:none;
	color:#444444;
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	position:absolute;
	top:15px;
	left:10px;
	font-size:40px;
	width:350px;
	padding:0 10px;
}

Now you’re probably thinking how come I didn’t just put the image as a background image in the first place. Although at the surface it may seem obvious but imagine if you had multiple images that were all layered on top of each other–one image as background image, another image on top of that as a watermark, and finally another image as the input field. You could have easily made the background image as a background image style and then put the watermark image with the img tag and lastly the form input tag on top. Obviously this is more to point out that IE8 reacts differently in this regards compared to all the other browsers I’ve tested which is kind of strange behavior if you ask me.