css Poblemchen

Rincewind_77

Moin!

Habe seit dem Update von 1.0 auf 1.0.1 ein Problem mit einem CSS.

Im css-File habe ich folgende Formatierung angelegt:

#marked { width: 124px; height : 22px; left: 0px; font: 12px arial, Sans-serif; text-decoration: none; text-align: center; border-right: red 1px dashed; padding-right: 10px; display: block; padding-left: 10px; border-left-width: 0px; background: #FFFF9C; border-bottom: #A84038 1px solid; padding-bottom: 3px; margin: 0px 0px 0px; color: #FF3300; padding-top: 3px; }

Im html-File steht z.B.:

<div id="marked" >Rundgang</div>

Bisher wurde das von iE und FF annähernd gleich dargestellt. Seit dem Update aus FF 1.0.1 wird der Bereich nicht mehr mit einer Breite von 124px sondern deutlich breiter angezeigt.

Hat jemand eine Idee woran das liegt?

ReinekeFux

Hm, komisch, ich kann mir eigentlich nicht vorstellen, dass hier ein Unterschied zwischen FF 1.0 und 1.0.1 vorliegen kann (zum IE sehr wohl), da er das CSS-Box-Model (border u. padding werden nach außen dazu gerechnet) schon immer richtig dargestellt hat.
Dem und deinen CSS-Angaben zufolge müsste deine Box eine Gesamtbreite von 145px haben:
padding-left + width + padding-right + border-right=Gesamtweite
Das nicht standardkonforme MS-Box-Model hingegen verhält sich wie eine Tabellenzelle (border u. padding werden nach innen gerechnet), daher ist die Box dort nur 124px breit.
(Das gleiche gilt natürlich auch für die Höhen)

Aber wie gesagt, einen Unterschied zw. 1.0 und 1.0.1 kann es eigentlich nicht geben, es sei denn, du hast zwischenzeitlich noch etwas an deinem CSS geändert.

Wenn du noch einen Hinweis erlaubst:
Höhen- und Weitenangaben in px sind in Fällen wie den vorliegenden keine so gute Idee. Dreh mal bei gedrückter STRG-Taste am Mausrad (oder drücke STRG-+)...

JonHa

Rincewind_77

Kannst du die Seite evtl. auf einen Webserver oder so hochladen, damit man sich das mal live ansehen kann?

caveman

ReinekeFux hat das BoxModel und die Abweichungen ja schon beschrieben.
Damit sich die Browser zumindest an die gleichen Render-Modes halten, füge mal einen DOCTYPE (z.B. XHTML Transitional) ganz vorne in Deine Seite ein und prüfe dann noch mal.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ReinekeFux

Zitat von caveman
Damit sich die Browser zumindest an die gleichen Render-Modes halten, füge mal einen DOCTYPE (z.B. XHTML Transitional) ganz vorne in Deine Seite ein und prüfe dann noch mal.
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ich kann dem nur zustimmen, einem HTML-Document grundsätzlich eine gültige DTD voranzustellen.
Allerdings halte ich eine Deklararion als XHTML für wenig sinnig, solange man sich nicht über die weiteren Konsequenzen im klaren ist, die das für den Auszeichnungscode mit sich bringt. Die XHTML-Anforderungen (auch wenn's "nur" transitional ist) sind doch etwas strenger und konsequenter als für HTML. Da kann man den Validator schön zum Rotieren bringen.

Brauchbare Übersichten, welche DTDs welchen Browser eine Seite in welchem Modus (Standard/Quirk) rendern lassen, kann man z.B. hier finden:

Aber nicht in die Irre leiten lassen:
"Quirk" bedeutet in jedem Browser etwas anderes, Mozillas Quirkmodus bspw. rendert das Box-Model noch immer richtig.
Und nur falls es jemanden interessiert ;):
Ich kann aus eigener Erfahrung eigentlich nur davon abraten, eine DTD zu wählen, die IE 6 in den Standardmodus schaltet.
Einfach aus dem Hintergrund, dass dieser nicht mehr funkioniert, wenn im Quellcode vor der DTD noch etwas steht, z.B. ein XML-Prolog á la <?xml version="1.0" encoding="iso-8859-1"?> für XHTML-Seiten. Auch ein einfacher Kommentar reicht hier schon aus, und das entzieht sich oftmals der eigenen Kontrolle, es gibt immer wieder Fälle, wo vor der Ausgabe im Browser zusätzlicher Code in die Seite eingefügt wird - als Beispiel seien hier nur mal Firmenproxies genannt.
Mal davon abgesehen, dass für IE 5.x/Win immer noch gehackt werden muss, da dieser absolut keinen Standardmodus kennt. Dann lieber gleich alle IEs in eine Tonne und mit gemeinsamen Extra-Definitionen versorgen (einfach mal nach Box-Model-Hacks oder CSS-Filtern googeln.)

bugcatcher

Alternativ hardcore nach quasi CSS3 greifen:
http://webfx.eae.net/dhtml/boxsizing/boxsizing.html

ReinekeFux

Zitat von bugcatcher

Alternativ hardcore nach quasi CSS3 greifen:
http://webfx.eae.net/dhtml/boxsizing/boxsizing.html

So Beispiele waren mir auch schon in den Sinn gekommen...
Aber wenn ich mir mein vorhergehendes Posting so ansehe, denke ich eh schon, dass ja geradezu furchterregend ist, wie schnell ein "CSS-Problemchen" zu einem ausgewachsenen Problem mutiert... :wink:
Aber was will man machen. So ist die bittere (Browser-)Realität.
Es ist schon schade, dass (-moz)-box-sizing noch keine praxisnahe Lösung darstellt, da KHTML (Konqueror/Safari) damit (noch) nichts anfangen kann (dass das Stylesheet, da CSS3, damit heutzutage noch nicht validiert, fände ich vernachlässigbar, da siegt Pragmatismus über Idealismus ;)).
Die korrekte Layoutdarstellung von JS abhängig zu machen, ist natürlich auch heikel (da waren wir doch schon mal bei NN4... ;)). Da bewege ich mindestens auf dem gleichen Glatteis wie bei der DTD-Chose... :roll:
Was leider auch für diese zugegebenermaßen originelle Lösung gilt: http://dean.edwards.name/IE7/

bugcatcher

Jo. Die IE7-Version ist eine mit der ich unbedingt mal spielen muss. Das mit dem boxsizing ärgert mich in bezug auf konqueror auch. irgendwo ist immer ein browser der rumbockt.

auch wenn das boxsizing eigendlich noch nicht w3c-valide ist, sag ich nix dagegen, den quasi-befehl von opera bzw. gecko (-moz, ist ja sogar valide! Gecko rockt!) für einen kommenden css3-befehl zu nutzen. Ist quasi hyper zukunftsorientiert und behebt damit das boxmodel-problem das der IE einem aufbrummt. Naja... wenn Konqueror nicht wäre... *seuftz*

Ich bin bei meinen gewerblichen arbeiten inzwischen davon abgegangen rumzutrixen. ich benutze da inzwischen einfach mehr container (<div>'s) und verschachtet die.... benutze aber jeweils nur width/height oder padding/border, damit sich IE und der rest nicht ins gehege kommen.... ist unhübsch gelöst, aber einheitlich.

Code

<div style="width:100px;">
 <div style="border:1px red solid; padding:10px;">
  Inhalt
 </div>
</div>

ReinekeFux

Zitat von bugcatcher

Jo. Die IE7-Version ist eine mit der ich unbedingt mal spielen muss.

Hab ich schon mal etwas damit rumgespielt, aber da muss man doch gehörig umdenken (was mir die Sache hinsichtlich o.g. Punkte nicht wert war). Aber interessant isses schon...

Zitat von bugcatcher

Das mit dem boxsizing ärgert mich in bezug auf konqueror auch. irgendwo ist immer ein browser der rumbockt.

Oh, wem sagst du das... :cry: IE/Mac fällt mir da noch so ein... :shock:

Weißt du zufällig, ob KHTML mittlerweile wenigstens min/max-height/width beherrscht? Auch so ein Ärgernis...

Zitat von bugcatcher

auch wenn das boxsizing eigendlich noch nicht w3c-valide ist, sag ich nix dagegen, den quasi-befehl von opera bzw. gecko (-moz, ist ja sogar valide! Gecko rockt!) für einen kommenden css3-befehl zu nutzen. Ist quasi hyper zukunftsorientiert und behebt damit das boxmodel-problem das der IE einem aufbrummt. Naja... wenn Konqueror nicht wäre... *seuftz*

Wenn ich's recht verstanden habe, ist das ja eigentlich eine Erfindung für IE/Mac, um Kompatibilität zu seinem unvermögenden Windows-Bruder herzustellen, oder? Und da T. Çelik auch im W3C tätig ist...
Macht aber auch so Sinn, ich denke da z.B. an Fälle wie {width:100%;padding10px;} - wie sollte man das sonst geschickt in den Griff kriegen?
Dass "-moz" validiert, war mir nicht bewusst. Echt? Muss ich noch mal testen...

Zitat von bugcatcher

Ich bin bei meinen gewerblichen arbeiten inzwischen davon abgegangen rumzutrixen. ich benutze da inzwischen einfach mehr container (<div>'s) und verschachtet die.... benutze aber jeweils nur width/height oder padding/border, damit sich IE und der rest nicht ins gehege kommen.... ist unhübsch gelöst, aber einheitlich.

Wenn man mit der Sache sein Geld verdienen will/muss, kommt man in der Tat leider um Zugeständnisse nicht herum.
Wobei das so die letzte Idealismus-Bastion ist, die ich mir noch zu bewahren suche. Wenn ich eine CSS-seitige Lösung einsetzen kann, ziehe ich die vor - flexibler, einfacher (nachträglich) einzusetzen und mehr im Geiste der Sache. Da bilden sich mit der Zeit auch brauchbare und zeitsparende Standardvorgehensweisen heraus...
Aber wie gesagt, dass muss jeder mit sich selber ausmachen.
Hauptsache, man verlässt nicht völlig den Pfad der Tugend und unterwirft sich kampf- und kritiklos der dominierenden M$-Arroganz und -Ignoranz, oder?

bugcatcher

Zitat von ReinekeFux

Oh, wem sagst du das... :cry: IE/Mac fällt mir da noch so ein... :shock:

Ich muss ehrlich sagen: einen toten Browser fütter ich nicht. Gibt schon genug Zombies. Auch wenn einem die MacOS9-User leid tun müssen, da ausser Mozilla1.3 bei denen ausser IE keine aktuellen alternative gibt.

Zitat von ReinekeFux

Weißt du zufällig, ob KHTML mittlerweile wenigstens min/max-height/width beherrscht? Auch so ein Ärgernis...

Ich benutze Cygwin um KDE zu emulieren. Hab daher nur eine 3.1er Konqueror zum Testen zur Verfügung.

Zitat von ReinekeFux

Wenn ich's recht verstanden habe, ist das ja eigentlich eine Erfindung für IE/Mac, um Kompatibilität zu seinem unvermögenden Windows-Bruder herzustellen, oder? Und da T. Çelik auch im W3C tätig ist...

MacIE muss ich mir immer von anderen Testen lassen. In deutschen Gefilden hat Mac sogut wie keine Verbreitung, weswegen ich anpassungen selten machen muss. Ich beschäftige mich daher mit der Leiche reichlich wenig.

Zitat von ReinekeFux

Macht aber auch so Sinn, ich denke da z.B. an Fälle wie {width:100%;padding10px;} - wie sollte man das sonst geschickt in den Griff kriegen?

Ich hab das IE-Boxmodel nicht für schlecht befunden. Darum empfinde ich das einführen des alternativen Boxmodels via css3 auch für sehr gut. Was mich an dem IE-Boxmodel stört ist schlicht und alleine der Fakt, dass sie gegen das W3C-Model arbeiten. IE hat einige gute Ideen, die für w3c wären. Aber einfach so durchdrücken? Teilwese sogar gegen bestehende Richtlinien? Nenene.

Zitat von ReinekeFux

Dass "-moz" validiert, war mir nicht bewusst. Echt? Muss ich noch mal testen...

Alle "-moz"-Styles sind valide, weil die w3c auch den einsatz von sonderstyles geregelt hat. solche müssen halt mit einem "-" anfangen.

Zitat von ReinekeFux

Wenn man mit der Sache sein Geld verdienen will/muss, kommt man in der Tat leider um Zugeständnisse nicht herum.

Naja. Solange meine variante nur zusätzliche <divs> braucht und sonst auf sonderregeln verzichten kann, kann ich damit leben. es ist ja nicht invalide und auch sind es keinerlei hacks. Daher kann ich mir auch nix vorwerfen. ; )