Problem im IE7 und Border bei Submitbutton

[alexf812]

Hi,

ich habe einem Submitbutton ein Hintergrundbild hinzugefügt und wollte noch die border ändern. Gibt man 1px solid #f90 an, macht der IE7 eine border die größer als 1px ist und der ganze Button wird größer. Weiß jemand woran das liegt?

[maxi89]

Probier mal, explizit ein
border-width: 1px;
zu deiner Definition hinzuzufügen. Ich meine, dass der IE7 manchmal Probleme bei diesen kombinierten CSS-Anweisungen hat.

[alexf812]

Hi,

nee das bringt auch nix.
Versteh ich nicht. Ich sage 1px und 2px werden angezeigt. Ich habe ja das a-Tag und den input-tag gleich gestylt, aber beim normalen Link gehts und der Submit-Button sieht so komisch aus. Das is ja eigentlich nix aussergewöhnliches eine Border.

[threadi]

Der IE rechnet im Quirksmode Breite + Border + margin. Ist bekannt als Box modell bug. Prüfe, ob Du einen korrekten Doctype hast. Solltest du einen xhtml-Doctype haben verzichte auf den xml-Prolog.

[alexf812]

Hi,

habe ich alles gemacht und bringt nix.
Es scheint, als wenn das hintergrundbild 1 px nach unten rutscht. sobald borders eingeschaltet sind. dadurch sieht man die hintergrundfarbe und der rand ist dann 1px breiter, da bei mir hintergrundfarbe und rand gleich sind.

es sieht besser aus wenn ich folgendes angebe:

<!--[if IE 7]>
        <style type="text/css" media="screen">
            input.button{border: 1px solid transparent;}
        </style>
<![endif]-->

so richtig kann ich mir den effekt nicht erklären.

[hero-master]

Der IE rechnet im Quirksmode Breite + Border + margin. Ist bekannt als Box modell bug.

Eben gerade nicht!
Das Boxmodell rechnet width, margin, padding, border zusmamen und daraus resultiert die finale Breite des Objektes.

Solltest du einen xhtml-Doctype haben verzichte auf den xml-Prolog.

Auch nicht richtig. Der IE7 kapiert das xml-Prolog und bleibt im Standardmodus!

@alex: Kannst du bitte mal deinen Code zeigen oder noch besser ein Testcase hochladen, damit man sich einmal ein genuaes Bild von deinem Problem machen kann?

[threadi]

Verdammt, ist zu spät für mich :| Habs verwechselt.

Aber das der IE den xml-Prolog kennt ist mir neu? Naja, verwende ihn bisher selbst noch nicht.

Link auf die Seite wäre wirklich gut ..

[hero-master]

Verdammt, ist zu spät für mich

Um kurz nach 8 lass ich diese Ausrede nicht gelten!

[alexf812]

@hero-master,

ich hab es mal hochgeladen. Im IE7 sieht man die breitere Border.
Ich meine ganz oben den ersten Button. Die beiden darunter sind normale Links.
Link zum Button

[maxi89]

Ich habe in deiner CSS-Anweisung diese Zeilen gefunden:

input[type=submit]::-moz-focus-inner { border: 0; padding: 0; }

In den Entwicklertools sieht man, dass der IE das komplett ignoriert (siehe Anhang). Vermutlich zeichnet der IE7 um jeden Button einen 1px-Rahmen.
Es sollte also reichen, wenn du für das Element "button" in deinem CSS noch ein border: 0px; definierst.

[alexf812]

Es sollte also reichen, wenn du für das Element "button" in deinem CSS noch ein border: 0px; definierst.

Aber die border benötige ich ja, sonst ist sie ja ganz weg.
Die Anweisung für den Firefox habe ich mit aufgenommen, weil im FF immer ein zusätzliches padding in dem element button aufgetreten ist.

Was ich bisher habe ist folgendes:

<!--[if IE 7]>
        <style type="text/css" media="screen">
            input.button{border: 1px solid transparent; filter:chroma(color=#000000);}
        </style>
<![endif]-->

Die zweite Anweisung, damit man beim klicken auf den Button keinen schwarzen Rahmen sieht.
Wenn der Button keine Borders enthalten würde, wäre die ganze Sache viel einfacher :-)

Da muss es doch aber bessere Lösungen geben...