Bizarre issue with form inputs

Form inputs, CSS class

[galahad2]

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):

<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

[SuzyUK]

galahad2, there must be more to it that what you've posted here, this code with the border given in CSS is showing the inputs just fine in IE.

There's a small coding error which I don't think should cause any rendering issues but might be worth noting.
You have closed the <select> element twice: once using the XHTML notation before the options and then using the closing tag after them you only need the second one

The select should appear OK as the input{} CSS will only affect the input element, not the select element

Are you using any CSS resets? can you strip just one of the forms into a separate page with all the CSS from the form that is affecting them and still reproduce what you're seeing, if so do post that, it sounds like a cascading issue, but from what, I can't guess

[galahad2]

I've just transplanted the form to a brand new page with nothing else on it, and pointed that page to the CSS file (I corrected the select issue). The same thing happens- the cursor in the inputs is tiny and I can't see anything I type.

I've managed to get borders showing in the CSS by including "solid" as below:

input {border:1px solid #000; color:#000; background-color:#FFF; line-height:0;}

input.noborder {color:#000; background-color:#FFF; line-height:0; border:none;}

.searchform input {border:1px solid #000; color:#000; background-color:#FFF; line-height:0;}

The page with just the form can be seen here (I've included spaces in the URL to make sure it's allowed and not an actual URL as pre forum rules)

<snip>

[edited by: swa66 at 5:19 pm (utc) on Aug. 14, 2009]
[edit reason] No working around the "no URLs rule" either :) [/edit]

[galahad2]

BTW this is the "parent" CSS, nothing obvious as far as I can tell that might be causing this:

* {
padding:0;
margin:0;
border:0;
line-height:0;
}

body {
margin: 0; /* zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
background: #ffffff;
font-family:Arial, Helvetica, sans-serif;
overflow:auto;
height:100%;
}

img {border:0;}

#container {
width: 1002px;
background: #ffffff;
margin: 0 auto;
text-align: left;
position:relative;
height:auto;
}

* html #container {height:100%}

[SuzyUK]

it's the reset CSS

* {
padding:0;
margin:0;
border:0;
line-height:0;
}

Your line-height should not be zero, at the very least it should be 1 but it's based on font size so it's not normally necessary to reset it, if you've already been setting your own required line-heights, padding etc on elements you will need to specify it on all form elements too, forms are actually one main reason people don't use the hard reset using the wildcard it's quite hard to unset them to get them to look like form elements, x-browser anyways, again

[galahad2]

Update: also copied the form in a new document, plus the CSS, to a complete different site ona different server and tested- and the same cursor / text issue occurred.

Then I deleted the stylesheet and tried filling the form again- now I can type the text fine and see it.

Obviously an issue with CSS file but what it is I have no idea.

[galahad2]

Okay, I've kept the line-height:0; in as I've manually specified a lot of other elements now, however I've set line-height:14px; on the input classes and that seems to have done the trick.

Thanks for all your help. :)

[SuzyUK]

You're Welcome!

are you aware that line-height is often best used WITHOUT units [meyerweb.com], Line-Height is based on font-size so if your font size is 14px and your line-height is 1 then it too will be 1 x 14px = 14px.

So rather than trouble with all the re-setting if you start with a base of 1 you would only need to reset if you wanted your line-height to be bigger than the actual font-size

there's nothing wrong with using explicit em or pixel values but as Eric Meyer explains in that link above there may be times it yields unexpected results if you try to get too precise with it

Glad to have helped narrow the issue though have a nice weekend!