Firefox und CSS

[Kumaro]

Hallo liebe PSD User.
Ich habe ein kleines Problem, und zwar arbeite ich zur zeit an einer seite wo ich einen Loginbereich programmiert habe wo die eingabefelder und der Button zum abschicken des formulars mit CSS gestalltet sind. Im IE sieht alles super aus nur im Firefox sind die Ränder (border) total dick und auch nicht farbig sondern schwarz. Woran liegt das das der FW die CSS angepassten Felder nicht korrekt anzeigt? Welche Möglichkeit habe ich damit die Felder iM FF auch so aussehen wie sie aussehen sollen?



Hier der CSS Code:


#login_name {
border-color:#75a634;
border:1px;
border:solid;
width:100px;
}

#login_passwort {
border-color:#75a634;
border:1px;
border:solid;
width:100px;
}

#login_schrift {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#75a634;
font-weight:bold;
}

#button {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#FFFFFF;
background-color:#f6950e;
border-color:#d96200;
border:1px;
border:solid;
width:60px;
}



Ich hoffe auf eure Hilfe.

Vielen Dank im voraus.

Gruß

 

[philbring]

AW: Firefox und CSS

Hallo,

deine Border-Eigenschaften überschreiben sich. Es wird immer nur der zuletzt angegebene Wert beachtet.

#login_name {
border-color:#75a634;
border:1px;
border:solid;
width:100px;
}

#login_passwort {
border-color:#75a634;
border:1px;
border:solid;
width:100px;
}

Um einen Rand mit 1px Dicke zu erhalten musst Du "border: 1px solid;" angeben.

BTW: Den Fehler macht nicht der FF. Die falsche Darstellung erzeugt der IE. In anderen Browsern (Chrome, Opera) ist der Rand auch dick.


Viele Grüße

Peter

 

[taffrot]

AW: Firefox und CSS

Wenn IE und FF die ränder anderst darstellen solltest du einen Blick hierdrauf werfen:

! important - CSS allgemein - CSS Hack - Browser Hack - Hacks für browserüberfreifendes CSS-Design

cheers

 

[Kumaro]

AW: Firefox und CSS

Guten Morgen,
danke für die schnellen Antworten. Werde ich heute abend mal ausprobieren.

@philbring Wo genau besteht denn der unterschied ob ich jetzt

border: 1px solid;

oder

border:1px;
border:solid;

schreibe? Ich dachte es ist im grunde das selbe nur eben nicht zusammengefasst?

Und womit hat es zu tun das der Rand nicht Grün sondern schwarz angezeigt wird? ? ?

viele Grüße

 

[philbring]

AW: Firefox und CSS

Hallo,

die Eigenschaften überschreiben sich in der Reihenfolge wie sie angegeben werden.

Im Fall border kommt noch hinzu das border eine Sammeleigenschaft für die einzelnen Eigenschaften border-color, border-style und border-width ist. Wenn due nur einen Wert angibst, z.B. width, werden die restlichen Werte durch die inherit-Werte gesetzt. Wenn du die Bordereigenschaften einzelnen setzten willst muss du die einzelnen Eigenschaften benutzen.

Also anstelle "border: 1px;" benutzt du "border-width: 1px;" und anstelle "border:solid;" benutzt du "border-style: solid;".

Die falsche Farbe (scharz anstelle Grün) kommt auch von der Sammeleigenschaft. Wenn du den Rahmen in Grün haben möchtest musst du die Eigenschaft "border-color: green;" benutzen.

Als Sammeleigenschaft sieht das dann so aus:

border: 1px solid green;

Das ist identischt mit der Einzelschreibweise:

border-color: green;
border-style: solid;
border-width: 1px;



Wobei "border" wieder eine Sammelbezeichnung für die einzelnen Eigenschaften "border-top", "border-right", "border-bottom" und "border-left" ist.

So kannst du z.B. für die Eigenschaften den unteren Randes

border-bottom-color: green;
border-bottom-style: solid;
border-bottom-width: 1px;

schreiben.


Eine schöne CSS Einführung findest du hier


Viele Grüße

Peter

 

[eytibi]

AW: Firefox und CSS

Hallo,

installiere dir mal das FF-Addon Firebug. Da kannst du dir die CSS-Eigenschaften zur laufzeit ansehen und auch bearebiten.

Firebug zeigt an, dass bei den Eingabefeldern "border: medium solid" definiert ist, deshalb die dicken Ränder. Die Angabe stammt aus der CSS Datei "dierichtigepflege.css" (Zeile 305)

Deine definierten Eigenschaften zu #login_name und #login_passwort werden gar nicht gefunden. Hast du die richtige CSS-Datei angegeben bzw- hochgeladen?

mfg Eytibi

 

[Frank_a_Potente]

AW: Firefox und CSS

Wenn Du dir mal ansehen möchtest, wie verschiedene Browser deine Seite darstellen, wirf mal einen Blick auf die Seite

Check Browser Compatibility, Cross Platform Browser Test - Browsershots

Dort kannst Du deine URL eingeben und bekommst dann Screenshots deiner Webseite in den ausgewählten Browsern geliefert. Ist zwar nicht die schnellste Seite, aber immerhin. Nicht jeder setzt sich lokal per VMWare verschiedene Systeme auf, nur um die Darstellung zu testen.

 

[Kumaro]

AW: Firefox und CSS

Hi super, vielen Dank Leute für die ganzen Antworten ihr seid die Besten Jetzt hab ich es verstanden, klingt irgendwie auch logisch ^^.

Werde ich mir die Links mal in Ruhe anschauen. Danke
Gruß