Opera und input text-Felder height
Markus
- css
Hallo,
bei den Browsern:FF,NS und IE werden die input type="text"-Felder alle richtig angezeigt.
Nur bei Opera werden sie zu klein angezeigt.
<input type="text" name="username" style="width: 115px; height: 12px; font-size: 11px;" />
Was kann man da dagegen tun?
lg
Markus
Hallo Markus,
bei den Browsern:FF,NS und IE werden die input type="text"-Felder alle richtig angezeigt. Nur bei Opera werden sie zu klein angezeigt.
Bei mir wird das Feld in allen Browsern (einschließlich Opera) korrekt angezeigt. Nämlich mit 115 x 12 Pixel. Nur halt die Schriftgröße ist zu groß gewählt. Bei 9pt passts grade noch so rein. Leserlich isses dabei aber nicht mehr...
eumil
Hallo eumil,
Bei mir wird das Feld in allen Browsern (einschließlich Opera) korrekt angezeigt.
Bei mir nicht.
Was hast du anders gemacht als:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>
<body>
<input type="text" name="username" style="width: 115px; height: 12px; font-size: 11px;" />
</body>
</html>
Schau auch mals auf meinen Screenshot:
hi,
Was hast du anders gemacht als:
vielleicht hat er erst mal validen code erzeugt, da sonst eine fehlersuche sinnfrei ist.
<body>
<input type="text" name="username" style="width: 115px; height: 12px; font-size: 11px;" />
input als replaced inline element hat in XHTML als direktes kindelement nichts in body verloren.
gruß,
wahsaga
Hallo,
vielleicht hat er erst mal validen code erzeugt, da sonst eine fehlersuche sinnfrei ist.
Musst du den immer und über alles raunzen?
input als replaced inline element hat in XHTML als direktes kindelement nichts in body verloren.
Um das geht es aber jetzt wirklich nicht, da sogar der W3CValidator nicht mal darüber raunzt, oder hast du es vorher damit nicht ausprobiert.
Also bitte vorher testen und dann erst posten, ok?
Noch eine Frage an dich wahsaga:
Hast du es überhaupt getestet?
lg
Markus
hi,
Um das geht es aber jetzt wirklich nicht, da sogar der W3CValidator nicht mal darüber raunzt
sorry, mein fehler. das galt für strict, nicht für transitional.
gruß,
wahsaga
Hallo wahsaga,
sorry, mein fehler. das galt für strict, nicht für transitional.
sorry, dass ich gerade gebissen habe.
Danke für die Info, dies wusste ich zB nicht.
lg
Markus
Hi,
sorry, mein fehler. das galt für strict, nicht für transitional.
Ups, hätte doch erst alles lesen sollen.
cu,
Andreas
Hi,
ich hatte dieses Problem aber auch schon oft. Selbst wenn das input-Feld in einem <p> steckt weicht die Höhe doch erheblich ab. Habe das gerade so getestet wie Wahsaga vorgeschlagen hat. Keine Veränderung.
Ich habe das letztendlich so gelöst dass ich einen Opera-spezifischen Hack benutzt habe. Nicht schön. Bin deshalb gespannt ob es eine bessere Lösung gibt.
Hallo Mel,
habe das letztendlich so gelöst dass ich einen Opera-spezifischen Hack benutzt habe
Wie schaut dieser Hack aus?
Bitte poste den mal.
lg
Markus
Hier kommt der hack...
/*Hack Opera + Safari*/
html:first-child>b\ody .beispielklasse {
height: 1em;
}
/*Hack Opera*/
@media screen and (min-width: 0px){
.beispielklasse {
height: 1em;
}
}
Weiss nicht ob Du auch unter MAC OS testest. Deshalb hab ich mal beide Hackvarianten hingeschrieben. Funktionieren unter den jeweils neuesten Versionen bei den Versionen 7 + bei Opera habe ich nicht getestet. Habe die Hacks mal in den unendlichen WEiten des Internets gefunden, falls ich irgendwelche Copyright-Rechte jetzt nicht dazugeschrieben habe - sorry.
Hallo,
kannst du mir dies anhand eines Beispiels posten.
Leider check ich dies nicht so richtig
danke
Markus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<style type="text/css">
/*fuer mozilla, IE etc.*/
#deine_bezeichnung {
width: 115px;
height: 12px;
font-size: 11px;
}
/*Hack Opera*/
@media screen and (min-width: 0px){
#deine_bezeichnung {
height: 17px;
}
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
</head>
<body>
<input type="text" name="username" id="deine_bezeichnung" />
</body>
</html>
Besser wären relative Höhenanganbe, also in em.
vg melanie
Hi Melanie,
vielen Dank.
Jetzt hab ich es endlich hinbekommen.
lg
Markus
hallo Markus,
super das freut mich. Wie gesagt ich bin da auch dran verzweifelt bis ich auf diesen Hack gestossen bin. Zwar soll man diese nach Möglichkeit vermeiden aber es scheint für dieses Darstellungsproblem sonst keine Lösung zu geben.
lg melanie
Hallo Melanie,
ich hoffe ich kann dir auch mal helfen.
lg+Danke nochmals
Markus
Hallo Mel.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
Hat der Einsatz dieser speziellen DTD einen bestimmten Grund?
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)
Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
Hoi Ashura,
nö hat er nicht. Ich habe ihn nur kopiert, es ist der Code von Markus, der in der Antwort davor gepostet wurde.
Allerdings hat das wohl nix mit dem input-Problem zu tun weil ich wie gesagt dieses Problem schon ganz oft hatte....auch mit anderem doctype-- aber ich lasse mich gerne belehren ;)
vg mel
Hi,
input als replaced inline element hat in XHTML als direktes kindelement nichts in body verloren.
Nonsens.
Dies trifft auf XHTML 1.0 transitional nicht zu.
Und dem von Markus angegebenen Code ist klar und deutlich zu entnehmen, daß es sich um XHTML 1.0 transitional handelt.
cu,
Andreas
Hallo eumil,
Meine Seite: http://self.se.ohost.de/fremd/input.html.
So jetzt muss ich mal nachfragen welche Version du benutzt, da bei mir das input-Feld trotzdem kleiner als in allen anderen Browsern angezeigt wird.
Ich habe hier 8.01 Build 7642
lg
Markus
Hi Markus
So jetzt muss ich mal nachfragen welche Version du benutzt
Ich habe hier (leider noch) die Version 8.0 Build 7561 am Laufen. In der 8.01 wurde soweit ich weiß nur ein Sicherheitsloch gestopft, von daher hat das keinen (oder sollte das keinen) Einfluss auf die Größe der Input-Box nehmen. Kann mir ehrlich gesagt die falsche Darstellung bei dir nicht erklären, sorry.
eumil