Trouble with Inputs in IE - Webmaster Forum - Web Design, Programming and SEO forums

02-16-2007, 07:13 AM

aLx

Status: Senior Member
Join date: Jan 2006
Location: USA
Expertise:
Software:

Posts: 922

iTrader: 13 / 100%

aLx is on a distinguished road

Trouble with Inputs in IE

Hey everyone! Im having a little trouble styling input fields in IE take a look please. It looks fine in FF but in IE the submit button is dropped down below the field. If you need me to post a live preview let me know.

Code:

			
<form action="#" method="get" >
<input type="text" name="rssfeed" value="Value" class="rss" />
<input type="submit" value="" class="submit2" />
</form>

Code:

input.rss {
	background:url(images/input.jpg) no-repeat;
	height:45px;
	width:290px;
	border:none;
	padding:10px;
	font-size:18px;
	margin:10px 0 0 0;;
	color:#2876c1;
	}
	
input.submit2 {
	background:url(images/submit.jpg) no-repeat top;
	height:45px;
	width:60px;
	border:none;
	margin:-10px 0 0 -4px;
	}

Edit Heres A Live www.postreader.com

02-16-2007, 03:52 PM

Andrew R

Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:

Posts: 5,200

iTrader: 17 / 95%

Andrew R is on a distinguished road

Did you try using float: left?

Also use: "cursor: pointer; cursor: hand;" on the submit2 class so it will show up as clickable (this is cross-browser compatible).

02-16-2007, 08:56 PM

aLx

Status: Senior Member
Join date: Jan 2006
Location: USA
Expertise:
Software:

Posts: 922

iTrader: 13 / 100%

aLx is on a distinguished road

A float on the button correct? Ill try it.

02-17-2007, 01:01 AM

Andrew R

Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:

Posts: 5,200

iTrader: 17 / 95%

Andrew R is on a distinguished road

Yes, and post back.

Ah, noticed you fixed it.

02-19-2007, 05:50 PM

aLx

Status: Senior Member
Join date: Jan 2006
Location: USA
Expertise:
Software:

Posts: 922

iTrader: 13 / 100%

aLx is on a distinguished road

Its still not fixed in IE and the float didnt help. Any other sugestions?

02-19-2007, 06:08 PM

RaZoR^

Status: Member
Join date: Feb 2006
Location:
Expertise:
Software:

Posts: 191

iTrader: 1 / 100%

RaZoR^ is on a distinguished road

float:left on the text input, float:right on the submit input, then if that plays up a bit, put the 2 inputs in a divider and set a width on it.

02-19-2007, 06:59 PM

aLx

Status: Senior Member
Join date: Jan 2006
Location: USA
Expertise:
Software:

Posts: 922

iTrader: 13 / 100%

aLx is on a distinguished road

Ill give it a try thanks!

02-19-2007, 11:59 PM

RaZoR^

Status: Member
Join date: Feb 2006
Location:
Expertise:
Software:

Posts: 191

iTrader: 1 / 100%

RaZoR^ is on a distinguished road

Yeah, pretty bored at the moment and trying to find things to do; my idea worked, as I will show

CSS (snippet):

Code:

input.rss{
	background:url('images/input.jpg') no-repeat;
	height:45px;
	width:290px;
	border:none;
	padding:10px;
	font-size:18px;
	margin:0;
	color:#2876c1;
	float:left;
}

input.submit2{
	background:url('images/submit.jpg') no-repeat top;
	height:45px;
	width:60px;
	border:none;
	float:right;
}

HTML (snippet):

Code:

<div style="width:370px;padding:0;">
	<form action="#" method="get">
		<input type="text" id="rssfeed" name="rssfeed" value="Value" class="rss" />
		<input type="submit" value="" class="submit2" />
	</form>
</div>
<div style="clear:both;"></div>

Firstly, there were no need for margins on either of the input elements. If you want a bit of space left above them, just use the divider in my example above to have a top-padding set, that way the gap is the same for both input elements. This fixed a little bug that was occurring after I got the floats working.

The text input is floated left, and the submit input is floated right. These are 'floated' to the left and the right of the divider they're in

.

This works for me, although I haven't tried it with the rest of your HTML and CSS coding, but looking at it there shouldn't be any troubles.