Form input text proving too tall in Safari and Chrome 1

[ralphonzo]

I ssem to have tried everything (and one thing worked in Safari but not in Chrome and I can't remember what I did) and I'm losing slep now!

The form text input box is pushing out of the available space in these two browsers and causing a mess up. see for yourself in Safari/Chrome:

http://wfpark.co.uk/testing/

what is fine in Firefox/IE (IE amazingly).

Here's a row example:

<tr>
<td width="74" height="29" class="cont0"><div align="right" style="padding:5px;">Name</div></td>
<td width="178" class="cont1"><div style="padding:5px;"><input name="rname" type="text" value="<%=rname%>" size="20" maxlength="45" class="noborder"></div></td>
</tr>

and the CSS:

.cont0{
	background-image:url('sitewise/contact_left.png');
	background-repeat: no-repeat;
}
.cont1{
	background-image:url('sitewise/contact_right.png');
	background-repeat: no-repeat;
	border: none;
	margin-left:5px;
}
.cont2{
	background-image:url('sitewise/contact_enqleft.png');
	background-repeat: no-repeat;
}
.cont3{
	background-image:url('sitewise/contact_enqright.png');
	background-repeat: no-repeat;
}
.noborder{
	border-style: solid;
	border-right:0px solid #FFA1F9;
	border-left:0px solid #FFA1F9;
	border-bottom:0px solid #FFA1F9;
	border-top:0px solid #FFA1F9;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #515154; text-decoration: none;
	overflow:auto;
	height:auto; 
}
.sarea {
	border-style: solid;
	border-right:0px solid #FFA1F9;
	border-left:0px solid #FFA1F9;
	border-bottom:0px solid #FFA1F9;
	border-top:0px solid #FFA1F9;
	padding:0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #515154; text-decoration: none;
	overflow:auto;
	width: 150px;
	margin-left:5px;
}
textarea.sarea {
	margin-top: 5px;
}

The last thing I tried was the 'form, input { margin:0; }' business, but that just mucked it up in another direction altogether!

Any clever folks out there on this one?

 

[feherke]

Hi

Why is that [tt]overflow: auto[/tt] there ? Remove it.

I suppose Chrome adjusts the element's size to fit the vertical scrollbar in case it will be necessary.


Feherke.

http://free.rootshell.be/~feherke/

 

[ralphonzo]

Ah. That was there for another reason, I can live without that.

Another star for Feherke, thank you for helping.