[CSS + IE] Submit button stylen geeft rare extra border

[UltimateB]

Ik heb een submit button gestyled (leuk woord ) maar loop tegen een raar probleempje op. Als ik de button style met de volgende code:

code:

input.submitButton {
    background-color:#FFFFFF;
    border:none;
    border-style: solid;
    border-width: 2px;
    border-color: #3c64a1;
    text-decoration:none;
    float:right;
}

En deze dan online zet, dan geeft IE automatisch om de geselecteerde submit button een zwart lijntje. Is hier omheen te werken? Ik kon helaas niets vinden @ google of antwoord hierop krijgen op IRC. Om even te demonstreren wat ik bedoel hieronder een klein paintje.



In Opera etc ziet het er wel normaal uit. Let ook niet op de inconcequenties van de borders, dit probleem heeft even prioriteit

[Blaise]

Dat is altijd zo als die form een focus krijgt.

Een oplossing is om er geen input type=submit maar een <button> van te maken en die een onclick-javascriptje mee te geven.

[UltimateB]

Mja, dat kan inderdaad, maar ik denk dat ik maar voor een <input type=image> van maak... bedank in ieder geval.

[Blaise]

Kan ook, maar een <button> ziet er hetzelfde uit als eventuele input=reset buttons met CSS.

[ Voor 10% gewijzigd door Blaise op 21-03-2004 22:43 ]

[r0bert]

iets met onfocus="return false;" weet ik veel, zijn wel scriptje voor .. ie bugje noemt men 't..

[Blaise]

Dat had ik ook eens geprobeerd, dat werkte niet in alle gevallen van focussen. Als je bijvoorbeeld klikt of met tab die knop benadert krijg je alsnog een randje.

[crisp]

Blaise schreef op 21 maart 2004 @ 22:50:
Dat had ik ook eens geprobeerd, dat werkte niet in alle gevallen van focussen. Als je bijvoorbeeld klikt of met tab die knop benadert krijg je alsnog een randje.

vanuit usability oogpunt gezien is dat natuurlijk helemaal niet verkeerd; anders weet je niet waar je op dat moment nu eigenlijk de focus op hebt...

[UltimateB]

Hehe ja is waar crisp. Ik houd het alleen graag concequent ;] Dus mijn buttons zijn nu gewoon:

code:

HTML:
<input type=image id="submitBestel"
src="("../plaatjes/buttons/buttonTransparant.gif" >


En css:

#submitBestel {
    float:right;
    background-image:url("../plaatjes/buttons/buttonBestelOff.gif");
    background-position:center;
    margin-top: -24px;
    z-index:9;
    position: relative;
}

#submitBestel:hover {
    background-image:url("../plaatjes/buttons/buttonBestelOn.gif");
}

[ Voor 28% gewijzigd door UltimateB op 22-03-2004 03:22 . Reden: Anti-layout vern*kend ]

[Bosmonster]

Dat vierkantje zit er niet voor de focus, maar is om aan te geven dat die knop de default actie is bij het formulier en dus met ENTER geactiveerd kan worden.

Niks IE-bugje dus, standaard functionaliteit en verdomd handige

[UltimateB]

Behalve dan dat als je op een van de andere knoppen drukt het randje op die
ander verschijnt...

[Bosmonster]

Ultimateb schreef op 22 maart 2004 @ 10:46:
Behalve dan dat als je op een van de andere knoppen drukt het randje op die
ander verschijnt...

Hij blijft aangeven welke knop met ENTER geactiveerd zal worden. Zit je in het formulier dan zal dit de submitknop zijn. Ga je met tab over de knoppen dan verschuift deze uiteraard mee met de focus (de focus zelf wordt aangegeven met het stippellijntje).

Ik zie hier geen problemen in.. om het maar niet te hebben over het proberen weg te krijgen ervan Wordt verdomd lastig met het toetsenbord navigeren anders...

[UltimateB]

Ja dat is wel waar. Maar hoe ik het nu heb gedaan is er geen randje te zien, tenzij je met TAB erheen gaat. Dus navigeren met het toetsenbord gaat nog steeds.