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
MickeA.com skrev:
I Firefox / Opera blir det rätt, se bilderna nedan.
Jag ser inga bilder.
Kan du inte ge oss en url?
@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
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?
Här är det kodblock det gäller:
<div class="clear-row height-null"><a name="signup-step-1"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </p><p class="float-left width-500px"><input type="checkbox" name="accept-tac" /> 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"> </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 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.
@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.
@ndersMedlem sedan juni 200032 969 inlägg 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.
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 {display:inline} på input ?
phred skrev:
{display:inline} på input ?
Nej tyvärr fungerade inte det, fler förslag?
Tack!
jarvkloMedlem sedan juli 20013 378 inlägg 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 ;) )
