Tableless form problem in IE7 and FF 3.5

[fantasma]

Greetings once again

I have this form created in my page, and I pretend it to be fully tableless however, margins in IE7 aren't equal to the ones in other browsers. Also, adding another problem to the party, Firefox 3.5 (the only one different from 3.6, which renders correctly, that i've tested the page on) cuts the font in the input fields, being able to see just half of it.

You can see the page in the following link:

http://fantasma98.byethost12.com/restaurante/encomendas.php

here's the CSS for the form

form
{
	margin:0;
	padding:0;
}
.form_enc
{
	width:375px;
	height:365px;
	float:left;
	border: 20px solid #FFFFFF;
}
.form_enc input, .form_enc textarea
{
	font-family:'aller_i';
	font-size:13px;
	overflow:hidden;
	resize: none;
	
	
}
.form_enc_nome input,.form_enc_ent input
{

	box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;
	width:362px;
	height:10px;
	border:none;
	background-color:#e0e2e1;
	margin:1px;
	font-family:'aller_bi';
	font-size:13px;
	overflow:hidden;
	color:#48554c;
	
	
	
}
.form_enc_loc input,.form_enc_email input, .form_enc_data input, .form_enc_telf input
{
	
box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;
	width:175px;
	
	height:10px;
	
	float:left;
	background-color:#e0e2e1;
	border:none;
	margin:1px;
	
	font-family:'aller_bi';
	font-size:13px;
	
	overflow:hidden;
	color:#48554c;
	
}
.form_enc_coments textarea
{
	box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;
	
	width:362px;
	height:250px;
	border:1px solid #FFFFFF;
	
	background-color:#e0e2e1;
	
	font-family:'aller_bi';
	color:#48554c;
	font-size:13px;
	overflow:hidden;
	resize:none;
	
}

[ko ko]

You should together two floated input boxes within one div. The input are inline element and you can simply position line by line.

<div><input type="text" /><input type="text" /></div>

Attach margin property for a littler far from the two input box. Put 'overflow:hidden' to the div which held the input box. It may hide the white space in IE and may got the same effect in cross browser.

[fantasma]

Thank you for your reply, but, unfortunately, no luck. didn't altered a thing :(

[fantasma]

Can anyone help me please? I really really need this working

[ko ko]

Put this line into your style

.form_enc div {
	
	overflow: hidden;
	
	margin-bottom: 4px;
}

.form_enc div input {
	
	float: left;

}

Set margin for the two input within 'form_enc_loc' and 'form_enc_data' for staying a little far from each.

.form_enc_loc input, .form_enc_data input {	
	
	margin-right: 3px;
}

You have one things to solve, 'enviar' link is not properly showing within the form and it is hidden by it's parent 'overflow:hidden' declaration.
Do you really need to set the static height for 'form_enc' ? Remove 'height' declaration or use 'min-height' for flowing the content normally inside it.
DIV is block-level and it takes 100% from its parent width and you always do not need to set the width for all block-level elements.

[fantasma]

Thank you so much. It doesn't displays 100% perfect in ie7, but it surely does the job by 99,9%.

However, at the moment I don't have any means to test it on firefox 3.5 (my installed version is 3.6) but, I will in a few minutes be available to give some feedback on that too.

Thank you... Icreased your rank ;)