Vänsterställda inputfält

11 svar · 599 visningar · startad av MickeA.com 30 jan. 2008

MickeA.comMedlem sedan feb. 20034 441 inlägg

Frågan30 jan. 2008 10:13#1

Morrn',
Jag har ett konstigt problem med ett formulär.
Det är så att varje fält ligger i p-element enl. följande:

<p class="float-left width-200px"><strong>E-mail:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="usermaila" /></p>

Problemet är att jag precis upptäckte att inputfälten blir centrerade i IE7.
I Firefox / Opera blir det rätt, se bilderna nedan.

När jag kollar vilken css som "hör" till objektet med hjälp av Firebug, får jag det här:

element.style {
	text-align:	left;
}
div#box-signup-form p, div#box-signup-form p input.form-field {style-default.css (line 328)
	line-height:	2em;
	text-align:	left;
}
	div#content p {style-default.css (line 238)
	line-height:	1.8em;
}
.width-200px {style-default.css (line 630)
	width:		200px;
}
.float-left {style-default.css (line 618)
	float:		left;
}

Jag har testat att sätta style direkt på <p>, men det blir ändå inte vänsterställt.

Vad kan det här bero på?

Har läst lite andra trådar om det här i forumet, men dessa rör centreringsproblem, där float: left har använts, som på så sätt "override'ar" centreringen.
Det är inte riktigt samma problem som jag upplever.

Tack!

@ndersMedlem sedan juni 200032 969 inlägg

30 jan. 2008 10:50#2

MickeA.com skrev:

I Firefox / Opera blir det rätt, se bilderna nedan.

Jag ser inga bilder.

Kan du inte ge oss en url?

MickeA.comMedlem sedan feb. 20034 441 inlägg

30 jan. 2008 11:41#3

@nders skrev:

Jag ser inga bilder.

Ojdå, glömde dom... Kolla här nedanför...

@nders skrev:

Kan du inte ge oss en url?

Nej tyvärr, sitter på en utvecklings server som inte är nåbar utifrån.

@ndersMedlem sedan juni 200032 969 inlägg

30 jan. 2008 11:49#4

Nej tyvärr, sitter på en utvecklings server som inte är nåbar utifrån.

Och det går inte att ladda upp en kopia av html-koden någonstans - till exempel på webForum?

MickeA.comMedlem sedan feb. 20034 441 inlägg

30 jan. 2008 11:59#5

Här är det kodblock det gäller:

<div class="clear-row height-null"><a name="signup-step-1">&nbsp;</a></div>
<div class="fpo-header"><p class="fpo-topic" style="margin-left: 40px;">Sign up as a new customer</p></div>
<div class="clear-row height-10px">&nbsp;</div>
<form id="signup-form" action="signup-adduser.php" method="post">
<div id="box-signup-form" style="margin: 30px 40px 0px 40px;">
<p class="float-left width-200px" style="text-align: left;"><strong>Username:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="username" /></p>
<p class="clear-row height-10px">&nbsp;</p><p class="float-left width-200px"><strong>E-mail:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="usermaila" /></p>

<p class="float-left width-200px"><strong>Confirm E-mail:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="usermailb" /></p>
<p class="clear-row height-10px">&nbsp;</p><p class="float-left width-200px"><strong>Password:</strong><sup class="reg-form">*</sup><br />
<input type="password" class="form-field" name="passwda" value="" /></p>
<p class="float-left width-200px"><strong>Repeat password:</strong><sup class="reg-form">*</sup><br />
<input type="password" class="form-field" name="passwdb" value="" /></p>
<p class="clear-row height-10px">&nbsp;</p><p class="float-left width-200px"><strong>Firstname:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="firstname" /></p>
<p class="float-left width-200px"><strong>Lastname:</strong><sup class="reg-form">*</sup><br />

<input type="text" class="form-field" name="lastname" /></p>
<p class="float-left width-200px"><strong>Phone:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="userphone" /></p>
<p class="clear-row height-10px">&nbsp;</p><p class="float-left width-200px"><strong>Address:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="addr" /></p>
<p class="float-left width-200px"><strong>Zipcode:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="postnum" /></p>
<p class="float-left width-200px"><strong>City:</strong><sup class="reg-form">*</sup><br />
<input type="text" class="form-field" name="postaddr" /></p>

<p class="clear-row height-10px">&nbsp;</p><p class="float-left width-200px"><strong>Country:</strong><sup class="reg-form">*</sup><br />
<select name="country">
<option value="">(Choose country)</option><option value="US">United States</option>
</select>
</p>
<p class="clear-row height-10px">&nbsp;</p><p class="float-left width-500px"><input type="checkbox" name="accept-tac" />&nbsp;&nbsp;&nbsp;Please accept our <a href="#" onclick="exec('terms', 'footer'); return false;">Terms and Conditions</a> and <a href="#" onclick="exec('privacy', 'footer'); return false;">Privacy Policy</a><sup class="reg-form">*</sup></p>
<p class="clear-row height-20px">&nbsp;</p><p class="float-left">
<input type="hidden" name="passthrough" value="false" />
<input type="hidden" name="step2" value="true" />
<input type="hidden" name="onerror" value="restartSignup" /><input type="hidden" name="regsite" value="false" /><input type="submit" class="form-button" value="Submit" /></p>
</div>
</form>

@ndersMedlem sedan juni 200032 969 inlägg

30 jan. 2008 12:01#6

Ok. Om du inte kan fixa något som går att se på, så kan iaf inte jag hjälpa dig. Hoppas någon annan kan.

MickeA.comMedlem sedan feb. 20034 441 inlägg

30 jan. 2008 12:54#7

@nders skrev:

Ok. Om du inte kan fixa något som går att se på, så kan iaf inte jag hjälpa dig. Hoppas någon annan kan.

Okej, här är den fullständiga signup-filen, eller all den HTML kod som genereras utifrån mina php filer.

rmn.signup.account.htm.txt (25 kB)

@ndersMedlem sedan juni 200032 969 inlägg

30 jan. 2008 13:00#8

Har du tittat på hur det där ser ut i en webbläsare?
Jag är helt enkelt ute efter html-kod som renderas som i din bild ovan. Om jag öppnar det där i webbläsare blir allt bara misär. :)

Men som sagt - det finns säkert andra som kan hjälpa dig - jag är på intet sätt proffs i detta ämne.

MickeA.comMedlem sedan feb. 20034 441 inlägg

30 jan. 2008 13:16#9

Okej, då testar vi igen:
http://www.rakemenot.com/rmn.signup.account.htm

Nu importeras CSS osv. precis som om det hade varit "på riktigt".

phredMedlem sedan nov. 2005314 inlägg

30 jan. 2008 15:19#10

{display:inline} på input ?

MickeA.comMedlem sedan feb. 20034 441 inlägg

30 jan. 2008 17:35#11

phred skrev:

{display:inline} på input ?

Nej tyvärr fungerade inte det, fler förslag?

Tack!

jarvkloMedlem sedan juli 20013 378 inlägg

30 jan. 2008 18:13#12

Hmm...

Om du vill ha råd från en gammal inbiten Gnagare så :e

Det verkar inte vara någon centrering du råkar ut för...
Fenomenet verkar uppkomma pga marginalen du sätter i containerdiven inuti formuläret - dvs

<div id="box-signup-form" style="[b]margin[/b]: 30px 40px 0px 40px;">

tydligen ärvs vänstermarginalen om 40px av<input> i MSIE (eller i varje fall "propagerar" ner till den när den ligger efter en <br />).

Byt ut margin mot padding i den divven så slipper du problemet

<div id="box-signup-form" style="[b]padding[/b]: 30px 40px 0px 40px;">

(det funkade i MSIE7 när jag testade lokalt ivf ;) )