[html][css] Button, input submit Opcje

[styryl]

Witam,

Znacie może jakąś sprawdzoną (sprawdzoną(IMG:style_emoticons/default/exclamation.gif) ) technikę aby submit wyglądał tak samo w każdej przeglądarce? Poprzeglądałem googla odnośnie cross browser dla submit, button - owszem są rozwiązania ale to jest przerost formy nad treścią. Jak zapatrujecie sie na użycie <a> + js?

[pedro84]

CSS, nic więcej nie trzeba.

[styryl]

mogę prosić o przykład kodu?

[pedro84]

[CSS] pobierz, plaintext 
input.button {
    /* twój CSS tutaj*/
}
[CSS] pobierz, plaintext 

Nie rozumiem z czym masz problem.

[!*!]

Zamiast inputów stosuj button

[HTML] pobierz, plaintext 
<button type="submit">wyślij</button>
[HTML] pobierz, plaintext 

Lepiej dają się ostylować w CSS, zresztą po to powstały.

[CSS] pobierz, plaintext 
button {
    border:1px solid red
}
[CSS] pobierz, plaintext 

[pedro84]

Uważaj tylko na <button> w IE6, jeśli jeszcze wspierasz/musisz wspierać.

[styryl]

[CSS] pobierz, plaintext 
input.button {
    /* twój CSS tutaj*/
}
[CSS] pobierz, plaintext 

Nie rozumiem z czym masz problem.

[PHP] pobierz, plaintext 
 
.button-blue {
	border: 1px solid #0d64b1;
	color: #fff;
	background: #0d64b1;
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0d64b1',endColorstr='#1873b9');
	background: -webkit-gradient(linear,center top,center bottom,from(#0d64b1), to(#1873b9));
	background: -moz-linear-gradient(center top,#0d64b1,#247ac0);
	cursor: pointer;
	padding: 0.25em 0.8em;
	height: 23px;
	font-size:11px;
	min-width:70px;  
}
 
.button-blue:hover {
	box-shadow: 0 0 3px #004;
	-moz-box-shadow: 0 0 2px #004;
	-webkit-box-shadow: 0 0 3px #004;
}
[PHP] pobierz, plaintext 

Już mniejsza o efekty z hover itd. W ff wysokość 23px, w IE 24px w chrome 24 px? I tutaj jest problem. W przypadku ff dochodzi jeszcze bóg wie czemu 1px nie widzialnej przestrzeni pod submit.... (żeby ku__a nie można było wprowadzić jednego standardu...)

Ten post edytował styryl 23.08.2011, 19:03:42

[!*!]

Nie widzę tu żadnego problemu http://fiddle.jshell.net/wLGqF/1/

Standard jest jeden, Ty źle to robisz. Pomijam interpretacje przeglądarek choć te nowsze i IE8/9 radzą sobie bez problemu tak samo.

Ten post edytował !*! 23.08.2011, 19:05:43

[styryl]

Dobra, poradziłem sobie, dzięki za pomoc. Pzdr

[webfreak]

[HTML] pobierz, plaintext 
input[type="submit"], input[type="reset"] { ... }
[HTML] pobierz, plaintext