login  Naam:   Wachtwoord: 
Registreer je!
 Forum

submit button gedonder

Offline Emonk - 07/03/2012 18:53 (laatste wijziging 07/03/2012 18:55)
Avatar van EmonkLid Hallo allemaal,

Waarom gedraagt de submit button zich in alle browsers anders? In firefox staat hij iets hoger dan een normale input, en hij is ook iets hoger. Bij IE is de rand opeens dikker dan je aangeeft. Chrome en Safari doen wel gewoon normaal.
Hoe zorg je ervoor dat die submit input er gewoon uitziet, in alle browser?

Bij voorbaat dank!

PS het css stylesheet dat ik gebruik geeft aan:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. input {
  2. 	background-color: #fff;
  3. 	font-size: 12px;
  4. 	border: 1px solid #000;
  5. 	margin: 1px 0;
  6. 	padding: 1px;
  7. }

4 antwoorden

Gesponsorde links
Offline Pieter - 07/03/2012 19:13
Avatar van Pieter Gouden medaille

SEO guru		 Misschien eens proberen om het element een fixed height en line-height mee te geven voor dat hoogteverschil?

Voor Internet Explorer zet je rond de button best nog even een span element die geen border heeft, gezien Internet Explorer standaard een lijntje er rond zet.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. span.button{background: #fff;border: 1px solid #000;margin:1px 0;padding:1px;}
  2. span.button input{background:none;border:0;margin:0;padding:0;}


En de HTML:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <span class="button"><input type="button" name="blaat" value="Button"/></span>
Offline Emonk - 07/03/2012 19:25
Avatar van Emonk Lid Het gaat al beter, ik gebruik nu:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. input {
  2. 	background-color: #fff;
  3. 	font-size: 12px;
  4. 	border: 1px solid #000;
  5. 	margin: 1px 0;
  6. 	padding: 1px;
  7. 	height: 16px;
  8. 	line-height: 12px;
  9. }
  10. span.button {
  11. 	background: #fff;
  12. 	border: 1px solid #000;
  13. 	margin:1px 0;
  14. 	padding:1px;
  15. }
  16. span.button input {
  17. 	background:none;
  18. 	border:0;
  19. 	margin:0;
  20. 	padding:0;
  21. }


Maar zoals je kunt zien op http://home.camilstaps.nl/cstickets nog niet zoals gewenst..
Offline Pieter - 08/03/2012 15:29
Avatar van Pieter Gouden medaille

SEO guru		 Wat gebeurt er als je de span.button een fixed height meegeeft van 18px? Ik denk dat je vervolgens met margin/padding de knop wel goed kan aligneren.
Offline Emonk - 08/03/2012 15:39
Avatar van Emonk Lid Wat bedoel je precies met fixed height?
Gewoon height:18px; toevoegen? Want dat werkt ook nog niet, zie http://home.camilstaps.nl/cstickets
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s