Forum PHP.pl > input type=email

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: input type=email - inny width

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

r4xz

17.12.2010, 18:32:41

prosty przykład:

[HTML] pobierz, plaintext 
<form action="" method="post">
 
   <input type="email" />
   <input type="text" />
 
</form>
[HTML] pobierz, plaintext

czemu mają różne szerokości pod:

Kod

Version 10.63

Build 6450

Platform Linux

System i686, 2.6.35-23-generic

i jak to zwalczać?

PS "bug się rodzi... moc truchleje..." gr8!

Crozin

17.12.2010, 18:44:40

Bo w jakiś tam wbudowanych stylach Opery jest gdzieś ustawione by pole na email miało szerokość równą XXX px?

Cytat

i jak to zwalczać?

[CSS] pobierz, plaintext 
input[type=text], input[type=email] {
    width: 100px;
}
[CSS] pobierz, plaintext

r4xz

17.12.2010, 18:54:22

Cytat(Crozin @ 17.12.2010, 18:44:40 )

Bo w jakiś tam wbudowanych stylach Opery jest gdzieś ustawione by pole na email miało szerokość równą XXX px?

prawda

Cytat(Crozin @ 17.12.2010, 18:44:40 )

[CSS] pobierz, plaintext 
input[type=text], input[type=email] {
    width: 100px;
}
[CSS] pobierz, plaintext

jednak tego już próbowałem i nadal są o ileś tam większe.
z początku myślałem, że może jakieś wartości w css nadpisuje - dobra, nowy arkusz i nadal to samo.
a z kolei jak nastawię

[CSS] pobierz, plaintext 
input[type=text] {
    width: 100px;
}
input[type=email] {
    width: 70px; /* tak na oko równe */
}
[CSS] pobierz, plaintext

to w operze jest poprawnie, ale w FF, chromie etc. jest pole email mniejsze

Crozin

17.12.2010, 19:30:30

Sprwadź jeszcze margin oraz padding.

r4xz

17.12.2010, 20:15:31

* { margin: 0; padding: 0; } - zawsze dodaje

hmm.. pozostaje mi czekać aż
1. wszystkie przeglądarki będą wspierać type=email (oraz będą tak samo go wyświetlać)
2. poprawią ten "mały" drobiazg

--edit--
choć niewątpliwe zależy to w pewnym stopniu od paddinga, ponieważ przy 0 jest ~3 drażniące px, ale przy padding > 5 to już totalna masakra

Crozin

17.12.2010, 20:19:23

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Tytuł</title>
 
	<style type="text/css">
	    input[type=text], input[type=email] {
	        width: 100px;
	        margin: 2px;
	        padding: 0;
 
	        color: red;
	    }
	</style>
</head>
<body>
	<div><input type="text" /></div>
	<div><input type="email" /></div>
</body>
</html>
[HTML] pobierz, plaintext

Opera/Firefox/Chrome - wszędzie dokładnie tak samo.

Cytat

(oraz będą tak samo go wyświetlać)

W przypadku kontroler formularzy możemy się tego nigdy nie doczekać.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.