Bizarre issue with form inputs

I have a very curious problem with the formatting of input fields in html forms which has me completely stumped.

Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???)

Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn’t show.

I’ve set a class for input:

input {border:1px #000; color:#000;}

I also tried setting this explicitly for inside the div holding a form where the input appears:

.searchform input {border:1px #000; color:#000;}

Neither of which work.

Here’s one of the forms where I’m trying to include the input (hashes at the moment for links as it’s in development): (Both forms below are included in my modX site as chunks)

<form action="#" method="POST" name="searchform">
<img src="/images/freecallback.gif" alt="Free Call Back">&nbsp;&nbsp;&nbsp;<a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a>
<input type="text" name="searchtext" value="" size="8" />
<input type="image" src="/images/searchbutton.gif" name="searchform" />
</form>

And here’s another form (same result though interestingly the SELECT appears ok):

<form action="#" name="bookahotel" method="post">
<label>Arrival</label>
<input name="date" size="6" type="text" />
<p class="text_normalblack">Arriving Today</p>
<input name="country" size="6" value="Country" type="text" />
<input name="towncity" size="6" value="Town/City" type="text" />
<select name="_EnquiryType" size="1" class="forminputs" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" />
</form>

Any ideas???

Thanks

Have you looked at them in Firebug? It will show you what CSS is controlling the various elements.

Thanks, I’ll take a look.

Have you validated the page with the forms on it? There’s something odd about the forms, but I can’t put my finger on it.

There are missing something in the CSS:


Should be:


Several of the browsers don’t like the missing border-type...

For me it seams like the select are missing the values:

Should be:


What doctype are you using - and are there any linked stylesheets - maybe its the result of the inherited properties?