Problem with <input> in IE

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Regicollis
Forum Newbie
Posts: 8
Joined: Thu Nov 25, 2010 8:51 am

Problem with <input> in IE

Post by Regicollis »

I'm currently working on an email form on a website. Everything looks fine in Chrome but it looks terrible in IE. IE places the text inside the input fields about 20px over the line, so that you can only see the bottom of the text and not read it at all.

I can't figure out what the problem is or how to solve it.

The form can be found on http://rasmusk.wid.ots.dk/projekter/kog ... g_info.php, the stylesheet can be found on http://rasmusk.wid.ots.dk/projekter/kog ... /style.css.

The relevant styling for the form is:

Code: Select all

/* _________________________ MAILFORM _______________________ */

#mailform {
	float:right;
	width:310px;
	margin-left:10px;
	padding:0;
	font-size:10pt;
}

#mailform h2 {
	padding-top:0;
	margin-top:0;
}

form fieldset {
	margin:0;
	padding-left:2px;
}

#mailform table {
	white-space:nowrap;
	width:100%;
	}

input {
	line-height:0.5em;
}

form fieldset p, form fieldset input {
	line-height:0px;
	padding-top, padding-bottom, margin-top, margin-bottom:-5px;
}

input:hover, input:focus, textarea:hover, textarea:focus {
	background-color:#dee9f9;
}

input#navn, input#adresse, #email, #telefon, #emne, #besked {
	width:100%;
}

textarea, input, fieldset {
	border:1px #98cb81 solid;
}

.knap {
	background-color:#497ecc;
	color:#FFF;
	font-weight:bold;
	border:none;
	padding-top:0.8em;
	padding-bottom:0.4em;
	}

.knap:hover {
	background-color:#98cb81;
}

#postnr {
	position:relative;
	left:-2px;
}

#by {
	width:auto;
	padding-right:0;
	margin-right:0;
}

#mailform td{
	vertical-align:top;
}

#turing {
	visibility:hidden;
	display:none;
}
Last edited by Weirdan on Mon Nov 29, 2010 7:56 am, edited 1 time in total.
Reason: added syntax highlighting
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Problem with <input> in IE

Post by Christopher »

Two things: first you should look into the differences between the "box model" of IE and other browsers (http://en.wikipedia.org/wiki/Internet_E ... _model_bug) and second you might want to look into a "reset css"
(#10850)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Problem with <input> in IE

Post by Weirdan »

Works for me: Image
Post Reply