CSS/HTML Inlogbalk Lengte Probleem

[Verwijderd]

Sinds kort heb ik een hier op Tweakers.net en laat ik nou sinds kort ook zijn begonnen met CSS/HTML/JS/PHP.

En nu heb ik een probleempje waar ik totaal niet uit kom en ik hoop stiekem dat iemand me hier kan vertellen waar hem de crux zit

Hier komt ie:

Ik heb een inlogformulier gemaakt, en deze uitgelijnd met behulp van een (onzichtbare) tabel.
Nou wil het geval dat FF4 wel netjes de tekstbalkjes dezelfde lengte geeft, maar IE8 doet dat niet.

En dat ziet er een beetje raar uit:

P.S. Let niet op het onderste groene veldje, dat heb ik enige uren geleden al opgelost.

Hier mijn formulier en daaronder bijbehorende CSS.
Ik weet niet of het genoeg is om mij te helpen, anders kan ik de bestanden ook wel even uploaden, maar mijn website is nog niet online.

HTML:

    <div class="login">
    <form action="http://www.example.com/login.asp" method="post">
        <table class="login">
            <tr>
                <td class="logintext">Naam:</td>
                <td class="logintext"><input type="text" name="frmNaam" size="20" maxlength="15" /></td>
            </tr>
            <tr>
                <td class="logintext">Wachtwoord:</td>
                <td class="logintext"><input type="password" name="pwdWachtwoord" size="20" maxlength="8" /></td>
            </tr>
            <tr>
                <td class="logintext"></td>
                <td class="logintext"><input type="submit" class="loginbutton" size="10" name="smtLogin" value="Log In"/></td>
            </tr>
        </table>
    </form>
    </div>

Cascading Stylesheet:

div.login {
    float:right;
    width:280px;
    padding:10px;
    background-color:#F00 }

table.login {
    width:280px; }
    
td.logintext {
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:bold;
    font-size:14px;
    text-align:right;
    color:#FFF;
    width:140px;
    padding-right:5px; }

Alvast bedankt!

Hugo.

[Cartman!]

Heb je wel iets geprobeerd ook? Zet eens een beedte op de input via CSS bijvoorbeeld.

[Arethusa]

Cascading Stylesheet:

background-color:#F00 }

Achter F00 mag wel een ; Maar daarmee ben je denk ik niet echt geholpen

[jbdeiman]

hoi Hugo,

Het is ook niet de beste oplossing om met tabellen zoiets op te maken. Het werkt, maar is niet optimaal.
Ik zie wel dat je je td een bepaalde breedte geeft, maar niet dat je iets stijlt aan het input veldje. Dit is wel de oplossing voor je probleem lijkt me. Misschien dat IE ook nog iets doet met het "maxlength" attribuut, waardoor de weergave wat krom is. Ik zou zeggen, probeer eens als dat gelijk staat.

Beste is, om zelf een breedte op te geven voor de knop, dan zit je altijd goed.

[Verwijderd]

@ Cartman: Ik weet niet precies wat je bedoelt met breedte op input via CSS.

@ Arethusa: Dank voor je scherpe opmerking

@jbdeiman: Kun je dat misschien wat uitgebreider uitleggen (met een voorbeeldje misschien?) want ik vraag me af hoe ik de tekstbalkjes anders netjes uitgelijnd krijg zonder een tabel.

[mcDavid]

Verwijderd schreef op donderdag 31 maart 2011 @ 23:09:
@ Cartman: Ik weet niet precies wat je bedoelt met breedte op input via CSS.

Je kunt die inputs gewoon in je css een breedte geven.
Trouwens als we toch algemene tips aan het geven zijn, haal al die classnames weg van die td's, is nergens goed voor als ze allemaal het zelfde zijn.-edit- ohnee we gingen de hele table skippen

@jbdeiman: Kun je dat misschien wat uitgebreider uitleggen (met een voorbeeldje misschien?) want ik vraag me af hoe ik de tekstbalkjes anders netjes uitgelijnd krijg zonder een tabel.

Heel makkelijk: geef de labels een vaste breedte.

[ Voor 3% gewijzigd door mcDavid op 31-03-2011 23:32 ]

[Verwijderd]

HAH !!!

Jeetje ik ben er uit maar daar was ik zelf nooooit op gekomen.

Er is niets mis met mijn CSS en HTML (ook al is het gebruik van een tabel voor de layout van het login formulier een beetje ouderwets).

Waar het nu aan lag?

Het font van beide tekstinvoervelden !

Omdat het onderste veld een <input type="password"> veld is, gebruikt deze bolletjes met een vaste tekengrootte. Het gewone text input veld daarboven gebruikt echter een ander font, met een andere tekengrootte.

De oplossing?

Hang aan beide input velden een klasse (ik heb hem class="loginput" genoemd) en geef deze klasse in CSS OF dezelfde "font-family" en "font-size" OF een grootte, bijv. width="12em".

Nu hebben beide tekens in de invoervelden dezelfde grootte (of de velden dezelfde grootte) en dus zullen de beide velden dezelfde lengte zijn !

Een ideetje van mijn vriendin hahahaha !!!

[ Voor 4% gewijzigd door Verwijderd op 01-04-2011 00:01 ]

[Phoenix1337]

Je probleem was ook opgelost door je input een width te geven. Daarnaast moet je zoals hierboven beschreven eens naar divjes en dergelijke kijken. Dan kan je stoppen met tabellen want dat is niet echt de netste manier. Tabellen zijn voor tabulaire data en niet om uit te lijnen

[Verwijderd]

@ mcdavid & phoenix1337:

Ik heb toch besloten om de tabel nog even te houden, omdat ik vooral lekker aan het experimenteren ben en de tabel tot nu toe wel het gemakkelijkst de layout geeft die ik wil.
Ik ga later nog wel de layout met behulp van labels maken, maar dat moet ik nog uitzoeken.

Wel erg bedankt voor jullie snelle en concrete hulp !

Hier de verbeterde code (HTML en CSS)

HTML:

    <div class="login">
    <form action="http://www.example.com/login.asp" method="post">
        <table class="login">
            <tr>
                <td>Naam:</td>
                <td><input class="loginput" type="text" name="frmNaam" size="20" maxlength="15" /></td>
            </tr>
            <tr>
                <td>Wachtwoord:</td>
                <td><input class="loginput" type="password" name="pwdWachtwoord" size="20" maxlength="8" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="loginbutton" size="10" name="smtLogin" value="Log In"/></td>
            </tr>
        </table>
    </form>
    </div>

Cascading Stylesheet:

div.login {
    float:right;
    width:280px;
    padding:10px;
    background-color:#F00; }

table.login {
    width:280px;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:bold;
    font-size:14px;
    text-align:right;
    color:#FFF;
    width:140px;
    padding-right:5px; }

input.loginput {
    width:12em; }

[jbdeiman]

Phoenix1337 schreef op donderdag 31 maart 2011 @ 23:37:
Je probleem was ook opgelost door je input een width te geven. Daarnaast moet je zoals hierboven beschreven eens naar divjes en dergelijke kijken. Dan kan je stoppen met tabellen want dat is niet echt de netste manier. Tabellen zijn voor tabulaire data en niet om uit te lijnen

Dat zegt hij ook wel in zijn post dat de grootte ook een oplossing zou zijn, maar hij heeft een andere oplossing gebruikt. Zijn vriendin kan ws beter uitleggen dan wij dat kunnen....

[Verwijderd]

Dank voor jullie hulp mensen!

Van mij mag er een slotje op.

Als ik opnieuw hulp nodig heb weet ik waar ik het zoeken kan!