Padding-left bij text input werkt niet in Opera

[Mei]

Ik heb een tweetal text inputs voor een inlogformulier waar ik een padding-left aan heb meegegeven. FF en IE doen precies wat ik verwacht, maar Opera geeft geen sjoege. Linkje. Het gaat om het formulier rechtsboven. De tekst die er nu in lijkt te staan komt van de labels die er met position:absolute; 'in zijn geplaatst'.

CSS is valid, HTML op één klein dingetje na niet. Daarvoor moet ik even het CMS in duiken om iets te veranderen.

[crisp]

Waarom los je dat op met padding en absolute positioning? Dit lijkt me een logischere aanpak:

Username: Password:

HTML:

<form action="#" method="POST" style="margin: 0; overflow:hidden">
  <label style="border: 1px solid black; float:left; margin-right:3px">Username: <input type="text" style="border: none"></label>
  <label style="border: 1px solid black; float:left">Password: <input type="text" style="border: none"></label>
</form>

[Mei]

Ik ben toevallig achter die mogelijkheid gekomen toen ik wat met de posities van die elementen aan het spelen was. Ik had er helemaal niet aan gedacht om het anders te doen.

Bedankt voor de hulp. Ik ben trouwens nog wel nieuwsgierig of dit gewoon een onvolkomenheid van Opera is of dat ik iets fout heb gedaan.

[ Voor 1% gewijzigd door Mei op 21-05-2006 19:25 . Reden: typo ]

[Mei]

Ik heb ook een :focus pseudo-class op de inputs gezet dat de border iets oplicht zodra je in dat veld gaat typen. Helaas werkt dit niet bij jouw oplossing. De ideale oplossing zou dus wel met een border rondom de inputs moeten werken...

Me gaat nog ffies klussen

[Mei]

Kick

[Verwijderd]

Mei schreef op zondag 21 mei 2006 @ 20:59:
Ik heb ook een :focus pseudo-class op de inputs gezet dat de border iets oplicht zodra je in dat veld gaat typen. Helaas werkt dit niet bij jouw oplossing. De ideale oplossing zou dus wel met een border rondom de inputs moeten werken...

Me gaat nog ffies klussen

Hoezo werkt dat niet? Geef eens een voorbeeldje dan..

[Mei]

<style type="text/css"> .klasje:focus { border:1px red solid; } </style> <form action="#" method="POST" style="margin: 0; overflow:hidden"> <label class="klasje" style="border: 1px solid black; float:left; margin-right:3px">Username: <input type="text" style="border: none"></label> <label class="klasje" style="border: 1px solid black; float:left">Password: <input type="text" style="border: none"></label> </form>

HTML:

<style type="text/css">
.klasje:focus
{
border:1px red solid;
}
</style>
<form action="#" method="POST" style="margin: 0; overflow:hidden">
  <label class="klasje" style="border: 1px solid black; float:left; margin-right:3px">Username: <input type="text" style="border: none"></label>
  <label class="klasje" style="border: 1px solid black; float:left">Password: <input type="text" style="border: none"></label>
</form>

edit:
Waarom werken die nobr tags hierboven wel en bij mij niet...?

[ Voor 52% gewijzigd door Mei op 28-05-2006 20:35 ]

[crisp]

Mei schreef op zondag 28 mei 2006 @ 20:31:
[...]

edit:
Waarom werken die nobr tags hierboven wel en bij mij niet...?

In mijn post hebben ze nut; ik heb immers HTML rechten en jij niet nobr voorkomt enkel dat newlines worden omgezet naar <br> waardoor ik niet alle HTML code op 1 regel hoef neer te plempen

[ Voor 10% gewijzigd door crisp op 28-05-2006 22:25 ]

[Blaise]

crisp schreef op zondag 21 mei 2006 @ 13:07:
Waarom los je dat op met padding en absolute positioning? Dit lijkt me een logischere aanpak:
(...)

In IE kan je niet op de label klikken bij een input die in een label staat. Dat is wel jammer.