Custom input field, making it work in both IE & Firefox!

[MagSafe]

Hi again, well i've got another annoyance that i've been trying to get sorted for the past couple of hours now I haven't done anything like this before so was hoping someone folk out there could give me a hand?

As you can see from the screenshots below I'm making my own input field, so it doesn't look like the boring default view you always see on websites. I'm going to make the "Go" button rounded as well later on, but i've been spending ages on this so want the input field problem out the way first.

The input field has simply had the borders removed, a background image and padding assigned to it. It's working perfectly in Firefox and as always ... Microsoft have to always make life difficult and have the input field not working in IE.

Normal:

Firefox:

IE:

In IE the background will keep moving left and the padding will shift left with every extra letter that is typed. For the background I tried putting "fixed" into the css which sorts it in IE, but then the background image in Firefox doesn't show up at all

Has anyone got any suggestions or solutions? ... as I could really use a hand,

Thanks,

Steven.

					<div id="search"><!-- Start of #search -->
						<form action="index.asp?srch=1" method="post" name="search" class="searchform">
							<input type="text" name="search" value="Start new search" onfocus="javascript:clearDefault(this)" class="searchinput" />
							<input type="image" src="graphics/searchbutton.jpg" alt="Go" name="searchs" value="Go" id="Input1" class="searchsubmit" />
						</form>
					</div><!-- End of #search -->

#search
{
	margin: 0;
	padding: 0;
	height: 23px;
	background: #ffffff;
	color: #658dbd;
	font: normal 8pt arial, helvetica, san-serif;
}

.searchform
{
	margin: 0;
	padding: 0;
}

.searchinput
{
	margin: 0;
	padding: 4px 12px 1px 12px;
	border: 0;
	background: #ffffff url('graphics/searchinputbg2.jpg') no-repeat;
	width: 99px;
	height: 23px;
	position: relative;
	float: left;
}

.searchsubmit
{
	margin: 0;
	padding: 0;
	position: relative;
	float: right;
}

 

[MagSafe]

hmm, that might work, is there anything I can do to stop IE outdenting the padding when the text field becomes full? ... even when I did put fixed in IE was still pushing the padding to 0 when the text field got full, I think this is just the way it deals with forms so I guess I need a way of disabling it.

Thanks though

 

[MagSafe]

There are reasons I never try to make forms look pretty other than maybe a single pixel border....I'm afraid I may throw my PC out of the Window trying to make it look exactly the same in all browsers. Just don't bother, accept it won't be exactly the same, they're different browsers and certain things will never look the same

Well I got it working

I tried a few other methods of doing it by putting in seperate div's on either side, that sort of thing but after quickly trying Flanders method it's working in every browser ... and it's looking fantastic

IE still pushes the the text all the way to the left when loads of letters are entered but it actually doesn't look to bad, I'll get a fix for that eventually though.

I can see your point in saying it's better to keep things simple, but I don't want a boring old input button, I want something that look's brilliant and will look the same no matter what browser or OS your viewing it on. At the end of the day it's only a style sheet thats doing all the work so if an extremely old browser was to try and render it, it will still come out looking normal.

Besides, it's a challenge, there's no fun in doing things the easy way

 

[MagSafe]

Thanks

I've been trying to create a decent looking "Go" button for ages now, but it ain't happening

Going to give it a rest now and try something else.

 

[MagSafe]

Nice one

I've also started styling links to look like buttons in some cases. No point using a form button with an onclick to go somewhere when a proper link is actually accessible and can look exactly the same.

Yep, i think i'm going to change the ones i have though, i don't like how the type face comes out on Windows, so I might have to change them to whole images instead ... obviously with alternative tagging though.