Member Avatar for 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:

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;
	
}
  • 2 Contributors
  • 5 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fantasma

Dani AI

Generated

— the symptoms you described (IE7 horizontal spacing oddities and Firefox 3.5 clipping text inside inputs) are classic cross‑browser layout/metric problems. ’s float + container clearing idea moved you forward; here are targeted diagnostics and small fixes to try next, in order, without repeating the CSS you already posted.

  • Let the form flow naturally first. Remove any rigid heights from the form and inputs while debugging so you can see natural sizes. If floats are used, give the parent a reliable clearfix so it expands to contain them.
/* simple clearfix that works in IE7+ and modern browsers */
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* triggers layout in old IE */
  • Avoid forcing an input box smaller than the font metrics. Use padding and min-height (or a matching line-height) rather than a tiny fixed height; that prevents characters from being clipped in Firefox.
.form_enc input[type="text"],
.form_enc textarea {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
  padding: 4px 6px;
  min-height: 20px;
}

  • Normalize form-control box behavior across browsers. Consider switching to box-sizing: border-box for the form area so width calculations include padding/border consistently; see MDN for details on box-sizing and support.

  • Clean up defaults: explicitly set margin:0 on inputs and use small right margins on left-aligned inputs instead of relying on whitespace. If IE7 still misbehaves, zoom:1 on the parent or using display:inline-block for the inputs can help.

References: MDN on box-sizing, line-height, and a practical clearfix pattern. These steps make rendering differences easier to spot and fix without reworking the whole layout.

Recommended Answers

All 5 Replies

Member Avatar for 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.

Member Avatar for fantasma

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

Member Avatar for fantasma

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

Member Avatar for 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.

Member Avatar for 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 ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.