Tekst etter "Input" mittstilling

xatic · 7. mars 2009

Heisann.

Dette fungerer fint i FireFox og Chrome men IE7 (og under?) liker det ikke. Teksten blir ikke "mittstilt i høyden".

Se på dette bildet for en bedre forklaring,

Hvordan skal jeg mittstille denne på best mulig måte? Prøvde med margin-top: -2px; men funherte ikke så bra.

HTML

<body>
<div id="wrapper_center">
<div id="wrapper">
	<div id="meny">
		<ul class="meny">
			<li>Forsiden</li>
			<li>Informasjon</li>
			<li>Registrer</li>
			<li>Logg Inn</li>
		</ul>
	</div> <!-- End Meny -->
	<div id="content">
	<div id="feilmelding"> Beklager, det har skjedd noe feil ... </div>
		<div id="form">
		<form action="registrer.php" method="post">
			<input type="text" name="username" class="input" /> Brukernavn <br />
			<input type="text" name="mail" class="input" /> Mail <br />
			<input type="password" name="password1" class="input" /> Passord (1) <br />
			<input type="password" name="password2" class="input"/> Passord (2) <br /> 
			<input type="submit" name="submit" class="input" value="Registrer Meg" style="width: 162px;"/>
		</form>
		</div> <!-- End Form -->
	</div> <!-- End Content -->
	<div id="nye_brukere" style="text-align: center">
	<p> Her kommer en liste over nye brukere </p>
	</div> <!-- End Nye_Brukere -->
</div> <!-- End Wrapper -->
</div> <!-- End CenterWrapper -->
</body>

CSS

* {
margin: 0px;
padding: 0px;
font-family: Tahoma;
font-size: 12px;
color: black;
}

.input {
width: 150px;
padding: 5px;
margin-bottom: 5px;
border: 1px dashed #c9d2db;
background-color: #f0f3f6;
}

#wrapper_center{
margin-left: auto;
margin-right: auto;
width: 500px;
}

#wrapper {
width: 500px;
float: left;
margin-top: 10px;
}

#meny {
width: 490px;
padding: 5px;
float: left;
}

#content {
width: 488px;
padding: 5px;
float: left;
border: 1px dashed #c9d2db;
background-color: #f0f3f6;
}

#feilmelding {
width: 476px;
border: 1px solid #e43d3d;
background-color: #ffc2c2;
margin-bottom: 5px;
text-align: center;
padding: 5px;
}

#nye_brukere {
padding: 5px;
float: left;
width: 490px;
}

ul {
list-style: none;
}

ul.meny li {
float: left;
margin-right: 10px;
padding: 5px;
}

ul.meny li:hover {
text-decoration: underline;
}

Hjelp?

Haraldson · 8. mars 2009

Anbefaler deg å legge input-ene i en uordna liste (<ul>) i hver sitt listepunkt (<li>). Så legger du tekstene i hver sin label (<label>) og fjerner <br />. <label> gir du deretter et for-attributt som matcher tilhørende inputs id-attributt.

Eksempel:

<ul>
<li>
<input type="text" name="username" id="username" class="input" />
<label for="username">Brukernavn</label>
</li>
</ul>

Så stiler du sånn som dette:

form ul {
list-style: none;
/* og andre fine ting */
}

form ul li {
/* kanskje en padding-bottom her? */
}

form ul li label {
line-height: 20px; /* line-height tilsvarende total høyde (padding+border+height/font-størrelse) i piksler */
}

xatic · 8. mars 2009

Hm, jeg prøvde dette men det hjalp ikke noe? Prøvde også og kopiere det samme som du nevnte men teksten i IE detter forsatt "ned" i forhold til <input text>. Finnes det andre løsninger eller gjør jeg feil?

Haraldson · 8. mars 2009

float: left; på input-elementet burde vel løse det...

xatic · 8. mars 2009

Takker Haraldson, fungerte flott med en liten float der, takk for alle tips

:edit:

Tydeligvis så likte ikke firefox dette...

Endret 8. mars 2009 av xatic

Logg inn

Tekst etter "Input" mittstilling

Anbefalte innlegg

xatic

Videoannonse

Haraldson

xatic

Haraldson

xatic

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer