I am developing a blog for the company I work for. This is the most in-depth I have been into CSS before. Most issues I have been able to find answers for without posting, but this one has me stumped.

I am making a comment form for the blog, using Contact Form 7 with some prettier CSS. I have labels over the first part of the text boxes which in IE end up covering the first part of the text input. In Firefox I have used text-indent to move the text out from under the labels.
I may not be explaining this too well, so it's probably easier to visit the page. You can see the issue in IE when you try to populate the input fields.

http://www.bodysoul.ca/blog/contact

Code:
#contact{
	list-style-type:none;
	margin:0;
overflow:visible; padding:5px;
}
#contact li{
	color:#a00000;
	font-size: 12px;
	font-family:"Calibri",Georgia,Serif;
	list-style-type:none;
	float:left;
	height: 60px;
	margin:0 0 25px;
	position: relative;
	width: 588px;
}
#contact li .cap{
	margin:10px 30px 0 0;
}



#contact li .text{
	background: #333333;
	font-family:"Calibri",Georgia,Serif;
	color: #FFFFFF;
	font-size: 16px;
	float:left;
	padding:15px 10px 10px 0;
	position:absolute;
	z-index:100;
	min-width:85px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	text-indent: 115px;
}
#contact li .required{

	position:absolute;
	right:-5px;
	top:10px;
	z-index:100;
}
#contact li .wpcf7-form-control-wrap{
	position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
	background:#eeeeee;
	font-family:"Calibri",Georgia,Serif;
	font-size: 16px;
	float:left;
	border:solid 5px #333333;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:15px 10px 25px;
	width: 509px;
	text-indent:115px;
	z-index:100;
	margin:0;
}

#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
	background:#F0EFEF
	text-indent:115px;
}
#contact li .wpcf7-form-control-wrap textarea{
	line-height: 28px;
	padding: 10px;
	height:200px;
	text-indent:115px;
}
#contact li#message{
	min-height:220px;
}
#contact li#submit input{
	color:#fff;
	text-decoration:none;
	font-family:"Calibri",Georgia,Serif;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	margin:10px 30px 0 0;
	background:#777777;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#111111');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#777777), to(#111111));
	background: -moz-linear-gradient(top, #777777, #111111);
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-0-border-radius:3px;
	border-radius:3px;
	display:block;
	padding:5px 65px 5px 65px;
	text-align:center;
	text-shadow:0 1px 0 #777777;
	text-transform:uppercase;
}
#contact li#submit input:hover{
	background:#777777;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#333333');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#333333));
	background: -moz-linear-gradient(top, #eeeeee, #333333);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	font-family:"Calibri",Georgia,Serif;
	font-size: 18px;
	color:#FFFFFF;
	text-shadow:0 1px 0 #777777;
	text-transform:uppercase;
	cursor:pointer;
}

div.wpcf7-validation-errors {
    clear: left;
}