Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

<input> width [CSS]

Anoniem
redmar
4 antwoorden
  • Ik ben een formulier op m'n website aan het plaatsen om in te loggen.
    De width van de input bepaal ik dmv. CSS. Dit deed ik altijd al, en dit werkte altijd prima. Echter nu gebeurd er iets dat ik niet helemaal snap :-? … namelijk:
    Ik geef alle 3 de inputs met CSS (width:50px) een breedte van 50 px.
    De button neemt wel de juiste breedte aan, maar de 2 andere inputs (text en password) nemen een breedte van 54px aan. (als ik er bijv. 40 van maakt wordt dit 44).

    De code (die vreemd genoeg zich wel gewoon gedraagd als alleen deze code in een html file geplaatst wordt).
    Wat veroorzaakt zo'n fenomeen en hoe is het op te lossen… alvast bedankt!
    [code:1:84852e3ff2]
    <style>
    input.toplogin
    {
    width: 50px;
    background-color: #B22222;
    color: #FFD700;
    font-family: Trebuchet MS, Courier New, Courier;
    font-size: 8pt;
    border-color: #EEAD0E;
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    }
    td.toplogin1
    {
    width: 75px;
    height: 26px;
    color: #FFD700;
    font-family: Trebuchet MS, Courier New, Courier;
    font-size: 8pt;
    }
    td.toplogin2
    {
    width: 85px;
    height: 26px;
    }
    </style>


    <form>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="inhoudside">
    </td>
    <td class="toplogin1" bgcolor="#FF0000">
    E-mail:
    </td>
    <td class="toplogin2">
    <input class="toplogin" type="text" name="email" style="width:50px;>
    </td>
    <td class="inhoudside">
    </td>
    </tr>
    <tr>
    <td class="inhoudside">
    </td>
    <td class="toplogin1">
    Wachtwoord:
    </td>
    <td class="toplogin2">
    <input class="toplogin" type="password" name="wachtwoord" style="width:50px;>
    </td>
    <td class="inhoudside">
    </td>
    </tr>
    <tr>
    <td class="inhoudside">
    </td>
    <td class="toplogin1">
    </td>
    <td class="toplogin2">
    <input class="toplogin" type="submit" name="submit" value="Inloggen" style="width:50px;>
    </td>
    <td class="inhoudside">
    </td>
    </tr>
    </table>
    </form>
    [/code:1:84852e3ff2]
  • Heeft het wellicht ook met die border instellingen bij input.toplogin te maken? Overigens ziet je pagina er verschillend uit in firefox en msie.
  • Kan ik me haast niet voorstellen dat het met de border te maken heeft, omdat als ik dit stukje code alleen in een html bestand zet het WEL goed werkt. Pas als ik het in de rest van de code plaats hebben de inputs een verschillende width…

    En wat is het verschil in weergave tussen msie en firefox?
    M'n pagina is HTML 4.01 strict en CSS gevalideerd (afgezien van dat bgcolor="#FF0000" dat er niet in hoort en alleen even voor testgebruik erin zat). Is dat nog niet voldoende :o … ik gebruik zelf geen firefox maar zulke tips hoor ik graag, kan ik er zo mogelijk rekening mee houden.
  • Dat jij volgens de standaards werkt is heel leuk, maar de grap is dat browsers dat dus NIET doen…

    In MSIE zie ik een randje rond de knop, in Firefox niet.
    http://www.firefox.com/

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.