Vreemd gedrag Submit Button in IE8.

[yammaski]

De submit button reageert vreemd in Internet Explorer 8.
Als je de pagina laadt, staat er een boord rond de button die er niet mag staan.
Klik je eerst binnen de kader en dan buiten de kader (fieldset), dan verdwijnt hij en blijft er een dun kadertje over zoals het zou moeten zijn.
In IE9, FF en Chroome werkt alles normaal.

Testpage.


Yammaski.

 

[csshunter]

Ja, IE7 heeft het ook.
Het zit nogal ingebakken in IE/Windows, want de standaard systeem-button van IE doet het ook (die krijgt dan een blauw binnenrandje).

De manier om er van af te komen: de border van de <input> op nul zetten. Maar dan ben je ook je eigen 1px randje kwijt.
Om er toch een mooi randje om te krijgen: vervolgens een <span> met id om de <input> heen draperen, en die de 1px border geven.

List en bedrog!

Met vriendelijke groet,
CSShunter

 

[yammaski]

Dag csshunter,

Dat maakt geen verschil uit ... of doe ik het fout ?
Ik heb het rood gemaakt om beter te kunnen zien.

Testpage.


Yam.

 

[csshunter]

Ahoy!

... of doe ik het fout ?

Ja!

1. Je hebt een border gegeven aan:

#submit input {
	border: 1px solid #F00;
}

Dat is dus niet de span zelf, maar alsnog de <input>!
Die was via:

.submitButton {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

wel op nul gezet, maar wordt nu door de css-voorrangsregels (de meer specifieke #submit input) overruled.
Het moet dus worden:

#submit {
	border: 1px solid #F00;
}

=======
2. Verder is nu de <span> het parent-element van de <input> geworden, waar de <input> in moet passen; dus de positie-eigenschappen van de <input>:

.submitButton {
	...
	float: right;
	margin-top: 20px;
	margin-bottom: 5px;
}

moeten daaruit weggehaald worden, en toegevoegd worden aan de span:

#submit {
	float: right;
	margin-top: 20px;
	margin-bottom: 5px;
	border: 1px solid #666;
}

=======
Ik zou ook de button-kleuren bij een hover laten veranderen, zodat bezoekers met browsers die de css3-shadow niet kunnen toepassen, toch een visuele feedback krijgen.

Test: yamma-submit-nw.htm

Met vriendelijke groet,
CSShunter
___
PS: zaten nog wat kleine html-errors in (dubbele id).

 

[yammaski]

wow ! ... je moet het maat weten ... èn kunnen

bedankt nog maar is csshunter !:thumb:


Groeten,
Yammaski.

 

[yammaski]

hey csshunter ... bij Chrome merk ik nog een foutje op ... sorry

De kader staat iets open, van de button verwijderd als je goed ziet.
Was dit de bedoeling ?


Yam.

 

[csshunter]

Aha, nu zie ik ook iets afwijkends in Chrome.
Je bedoelt het witte bovenrandje en het onderrandje dat er zo'n beetje dubbel in zit?

Dat heeft inderdaad alleen Chrome, de rest niet; en het was niet de bedoeling.

Met wat vinkjes aan en uit zetten in de Chrome diagnose (> Extra > Hulpprogramma's voor ontwikkelaars > Elements > Styles ), handige dingen zijn dat toch! , kwam ik er snel achter dat Chrome er eigenzinnig transparante borders met de box-shadow op loslaat. Hier: ook bovenaan; dat is wit, maar valt niet zo op tegen het knop-grijs en het lichte groen bij hoveren.
Dus: boven en links: wit, en rechts en onder: donker.

Chrome zonder breedte/hoogte van submitknop​

Maar niet als er een opgegeven breedte en hoogte bij staat!
De breedte was er al (L/R gaat het al goed), en voor de hoogte kan in dit geval 1.8em opgegeven worden.
Aldus:

.submitButton {
    width: 120px;
    height: 1.8em;
    ...
    }

waarmee Chrome van z'n ballast ontdaan is.

• Test: yamma-submit-nw-2.htm

Met vriendelijke groet,
CSShunter

 

[yammaski]

bingo :thumb:

Groeten,
Yammaski.