input=text // background & padding-left // Markierung bei Chrome/Iron

Nippo · 16. März 2011, 18:29

Hallo,

ich habe ein Problem, und zwar macht das "padding-left" beim Iron/Chrome Probleme.
Am besten seht selbst.

[Blockierte Grafik: http://img705.imageshack.us/img705/8655/unbenannt1gu.png]

Der Wert ist - 30px - damit man das Icon sieht.
Nur leider sieht es unsexy aus.

Ich glaube der Code wird nicht benötigt, da es nichts spektakuläres ist und eher ein Schönheitsfehler ist. (Firefox macht keine Probleme)

rswhite · 16. März 2011, 19:32

Mich würde der Code (+ Bild) schon interessieren, dann wäre es möglich, einen Hack dafür zu entwickeln.

Nippo · 19. März 2011, 13:26

itchy.bplaced.net/test/

Firefox = OK
Chrome = NICHT OK

vince · 19. März 2011, 14:27

Wenn du dir das Ergebnis mit Hilfe vom Firebug im FF anschaust, dann siehst du, das dieser sich zu den anderen Browsern identisch verhält.

[Blockierte Grafik: http://i.imgur.com/gBkhb.png]

Ich würde padding aber auch nicht unbedingt in Formularelementen benutzen. Dafür gibt es kein einheitliches Verhalten.

Lieber ein Wrapper drumherum.

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
background-color:#333;
}
.search {
border:none;
width:150px;
height:15px;
color:#fff;
font-family:Tahoma;
font-size:11px;
margin:5px 30px;
background:#085259;
}
.search_wrapper{
width:193px;
height:29px;
background:url('http://itchy.bplaced.net/test/search_bg.png') no-repeat;
}
</style>
</head>
<body>
<div class="search_wrapper">
<input type="text" class="search" placeholder="Suchbegriff" />
</div>
</body>
</html>

Alles anzeigen

Nippo · 19. März 2011, 14:42

Uh uh uh!
I like you!

Schön von dem Placeholder zu hören, wenn man zuvor das ganze mit JS lösen musste ):!
Ich bedanke mich.

Nippel · 19. März 2011, 14:50

So nun auch mal registriert

Placeholder läuft leider nicht überall, schade eigentlich dachte es wäre ne Innovation

Torben Brodt · 19. März 2011, 15:14

"placeholder" ist übrigens ein HTML 5 Attribut. Damit du es auch in älteren Browsern nutzen kannst ist leider noch etwas Arbeit notwendig.
Mehr dazu hier im Beitrag Passwortfeld von innen Beschriften (Problem Maskierung)

und auch unter folgenden Quellen:

input=text // background & padding-left // Markierung bei Chrome/Iron

input=text // background & padding-left // Markierung bei Chrome/Iron

Quellcode

Teilen

Benutzer online 1

Tags