Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-10-2012, 03:35 AM   PM User | #1
jarofpants
New to the CF scene

 
Join Date: Mar 2012
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
jarofpants is an unknown quantity at this point
Text buffer in form field works in Moz but not IE

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;
}
jarofpants is offline   Reply With Quote
Reply

Bookmarks

Tags
buffer, css, form, input, text

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 03:22 AM.


Advertisement
Log in to turn off these ads.