Problem mit Firefox CSS width/height input-field type text/submit in XHTML
 |
|
|
LinkBack | Themen-Optionen | Ansicht |
13.06.2006, 17:58
|
|||
|
|||
Problem mit Firefox CSS width/height input-field type text/submit in XHTML
Hallo,
ich habe bei der Entwicklung einer neuen Seite die für mich doch etwas überraschende Entdeckung gemacht, dass der Firefox im standardkonformen Modus die CSS Werte für width und height für die <input> Felder "text" und "submit" unterschiedlich interpretiert. Bei "text" zählt er die border nicht mit bei "submit" schon. Ein lauffähiges Beispiel ist unter: http://www.ned.univie.ac.at/Test/button.html zu finden. Der wichtigste Code Teil ist jener Code:
<form> <input type="text" style="width:150px;height:20px;border:1px solid #000;background-color:#f0f0f0;"> <input type="submit" style="width:150px;height:20px;border:1px solid #000;background-color:#cc00ff;"> </form> Gibt es dafür einen Workarround? Es ist zwar ein kleines Detail aber es wäre schon schöner wenn die Felder auch in Firefox gleich groß wären. Außerdem ist das eine dieser "Nüsse" die ich gerne knacken würde. Danke für die Hilfe im Voraus! P.S.: Als zweites mich zwar weniger beschäftigendes aber doch schon des öfteren störendes Problem ist der Versprung zwischen Textfeld und Button. Weiß jemand warum der Firefox den Button zwei Pixel höher anzeigt als das Textfeld? 
|
| Sponsored Links |
|
13.06.2006, 19:14
|
||||
|
||||
|
Zitat:
Zitat:
EDIT: Folgendermaßen geht's in Netscape 7, Firefox, Opera und IE 6 (IE 5.x benötigt dieselbe Anpassung wie Opera, geht aber separat per IE-Stylesheet) : Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Test</title> <link rel="stylesheet" type="text/css" href="css_standard.css" media="all" /> </head> <body> <form action="test.php"> <fieldset> <input id="field" type="text" /> <input id="button" type="submit" /> </fieldset> </form> </body> </html> Code:
* {
margin: 0;
padding: 0;
border: none; }
body {
background-color: white;
color: black;
margin: 10px; }
#field, #button {
height: 25px;
width: 200px;
float: left;
background-color: red;
color: black;
font-size: 12px;
line-height: 15px;
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
border: 1px solid black;
margin-right: 3px; }
#button {
height: 27px; }
html:first-child>b\ody #button {
height: 25px; }
Geändert von heiko_rs (13.06.2006 um 20:15 Uhr)
|
| Sponsored Links |
|
14.06.2006, 14:14
|
|||
|
|||
|
Hallo,
danke für die schnelle Antwort. Das mit dem float:left um den Versprung zwischen Inputfeld und Button zu entfernen klappt wunderbar. Auch die Lösung für das eigentliche Problem hat mir weitergeholfen. Aber auch eine neue Frage aufgeworfen. Die Lösung läuft im IE (6er) nur korrekt wenn ich am Dateianfang Code:
<?xml version="1.0" encoding="UTF-8" ?> Danke nochmal!
|
|
14.06.2006, 14:23
|
||||
|
||||
|
Zitat:
Zitat:
 Unabhängig davon mußt Du natürlich noch eine Anpassung für den IE 5.x machen, denn da sieht's ja logischerweise immer genauso aus wie derzeit im IE 6.
|
|
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Problem mit Firefox und CSS | Andre | CSS | 7 | 07.04.2005 11:50 |
| XHTML 1.0 transitional / Firefox CSS Probleme | SimonWpt | (X)HTML | 15 | 21.01.2005 17:11 |
| CSS Problem im FireFox aber nicht IE | fra232 | CSS | 1 | 29.11.2004 01:04 |
| CSS Problem im Firefox :-( | wildboy | CSS | 2 | 03.11.2004 00:41 |
| Problem mit Background-Color im FireFox | to.ni | CSS | 2 | 31.08.2004 12:13 |
Linear-Darstellung
