Farbunterschiede bei Border zwischen FF und IE7

[Frieder]

Hallo zusammen,

es ist zum Kotzen! Für jeden Browser muss man irgend wo "Extrawürste" braten, damit man eine einheitliche Darstellung erhält.

Ich habe Textboxen mit folgendem Rahmen:

border-style: outset; border-width: 3px; border-color: #FF6666;

Im IE7 wird dieser mit einem wie gewünschtem hellen rot oben und links dargestellt. Der FF stellt diesen Rahmen in einem hellen Rosa noch heller dar, was für meine zweck nicht mehr schön aussieht. Wie bekommt man das in den Griff? Muss ich da für jeden Browser eine extra Style definieren?

Für eure Hilfe schon mal vielen Dank.

[suit]

Im IE7 wird dieser mit einem wie gewünschtem hellen rot oben und links dargestellt. Der FF stellt diesen Rahmen in einem hellen Rosa noch heller dar, was für meine zweck nicht mehr schön aussieht. Wie bekommt man das in den Griff? Muss ich da für jeden Browser eine extra Style definieren?

mach den rahmen mal 50px dick um zu sehen was passiert

wenn du nur einen 3 px rahmen haben willst, ist outset oder inset unklug - hierfür eignen sich getrennte rahmenfarben für oben, unten, links und rechts um den effekt zu erzielen besser

[Frieder]

Hallo Suit,

mach den rahmen mal 50px dick um zu sehen was passiert

Ist ja interessant! Habe ich auf deinen Ratschlag hin gemacht. Ja, nun weiß ich zwar, warum die Unterschiede bestehen. Der FF hat sich's bei outset mal wieder ganz einfach gemacht und nur eine Farbstufe je links/oben und rechts/unten dargestellt, während der IE eine Farbabstufung vorgenemmen hat. Und weshalb bringt der FF andere Farbtöne, als der IE?

wenn du nur einen 3 px rahmen haben willst, ist outset oder inset unklug - hierfür eignen sich getrennte rahmenfarben für oben, unten, links und rechts um den effekt zu erzielen besser.

Ich möchte schon ein 3D-Effekt und habe nun ein bisschen experimentiert. Bin jedoch zu keiner zufriedenstellenden Lösung gekommen, oder muss mal wieder ganz aufwendige definitionsarbeit leisten. Wie würdest du dies machen?

Gruß Frieder

[suit]

Und weshalb bringt der FF andere Farbtöne, als der IE?

genausogut könnte man die fragen stellen, warum der ie "dotted" bei kleinen rahmendicken so darstellt, wie viele andere browser "dashed"

es ist leider nicht genau festgelegt, wie das ganze auszusehen hat
http://www.w3.org/TR/REC-CSS2/box.html#border-style-properties - sondern einfach nur "the border makes the entire box look as though it were coming out of the canvas." - also es soll plastisch hervortreten

die logik gebietet mir, dass die im "schatten" liegenden elemente in den hintergrund treten, die anderen in den vordergrund - rein von der interpretation her machts der ie also "falsch"

Ich möchte schon ein 3D-Effekt und habe nun ein bisschen experimentiert. Bin jedoch zu keiner zufriedenstellenden Lösung gekommen, oder muss mal wieder ganz aufwendige definitionsarbeit leisten. Wie würdest du dies machen?

ich würde auf diese 3-d-effekt-rahmen verzichten, besonders in 3 pixel dicke - das finde ich persönlich hässlich - ich steh auf 1-pixel-rahmen im 3-d-effekt (mit 4 verschiedenen farben auf jeder seite)

du kannst auch zwei elementen verschachteln und und jeweils mit rahmen versehen - somit erreichst du auch mit verschiedenen farben auf allen 4 seiten (jeweils 2x) einen effekt wie ihn der ie erzeugt

alternativ kannst du diverse "runde ecken"-techniken (4 verschachtelte elemente) missbrauchen um derartige rahmen zu erzeugen - die hintergrundbilder sorgen dann dafür, dass es überall gleich aussieht