Problem med top-formular
Hej.Jeg sidder med noget CSS som driller mig afsindig meget. Jeg er ved at lave en "top bar", som skal fungere som loginformular. Dvs. alle inputs, en submit og to buttons skal stå på linje.
HTML:
<div id="slideDiv">
<center>
<?php
if(isset($_SESSION['brugernavn']) AND isset($_SESSION['kodeord'])) {
include("brugere/accessbar.php");
} else {
?>
<div id="barlogin">
<form action="?side=brugere/login&ac=ok" method="POST">
<label>Email:</label>
<input type="text" class="logininput" name="brugernavn" value="Brugernavn" onclick="this.value=''">
<label>Kodeord:</label>
<input type="password" class="logininput" name="kodeord" value="Kodeord" onclick="this.value=''">
<button type="submit" name="logon" class="logpa"></button>
<button type="button" class="glemtkode" onclick="location.href='?side=glemtkode'"></button>
<button type="button" class="opretbruger" onclick="location.href='?side=brugere/opret_bruger'"></button>
</form>
</div>
</center>
</div>
CSS koden er:
#slideDiv {
background-image: url('../images/topbarbg.png');
background-repeat: repeat-x;
width: 100%;
height: 36px;
position: absolute;
display: inline;
}
#barlogin {
color:#202020;
font-size:11px;
height: 36px;
width: 100%;
}
.logininput {
background-color:#fff !important;
border:1px solid #d5e3e9;
color:#202020;
width:140px;
font-size:11px;
height: auto;
}
.logpa {
background-image: url('../images/logpa.gif');
width: 61px;
height: 23px;
border: 0px;
}
.logpa:hover {
background-image: url('../images/logpa_aktiv.gif');
width: 61px;
height: 23px;
border: 0px;
}
.glemtkode {
background-image: url('../images/glemtkode.gif');
width: 75px;
height: 23px;
border: 0px;
}
.glemtkode:hover {
background-image: url('../images/glemtkode_aktiv.gif');
width: 75px;
height: 23px;
border: 0px;
}
.opretbruger {
background-image: url('../images/opretbruger.gif');
width: 90px;
height: 23px;
border: 0px;
}
.opretbruger:hover {
background-image: url('../images/opretbruger_aktiv.gif');
width: 90px;
height: 23px;
border: 0px;
}
Problemet er at det ikke står på linje. Knapperne skal være button for at de står på linje. Hvis jeg ændre submit knappen til <input type="submit">... så står de ikke længere på linje. Jeg har fået det til at se godt ud i Safari og Chrome, men det ser skidt ud i IE og heller ikke for godt i Firefox. Hvordan får jeg dog det til at fungere?
Se evt. på http://tinyurl.com/bu5gbbs
// Henrik
