CSS-Design Schwierigkeiten

Es erscheint mir allerdings komisch warum der IE den repeat nicht macht *grübel*. Da ich selbst mit repeat arbeite und es bei mir problemlos funktioniert.
Code:
#container{background: url(.../....gif) repeat-y color:fff ;}
Versuch es mal so evtl. kommt der IE bei mehreren background Anweisungen durcheinander "sollte er zwar nicht aber man weiss ja nie". Ansonsten sieht es bei mir im IE recht ordentlich aus.
 
simusch schrieb:
für jede sprache einen datenbankeintrag mit den passenden farben und daraus je nach sprache (die kannst du ja über den link übergeben und in einer session speichern) das passende stylesheet zusammenbauen lassen...
Das verstehe ich leider nicht ganz (In PHP bin ich leider noch recht unbewandert, da würde mir ein Freund helfen). Die Idee bisher sah so aus: Per PHP soll den jeweiligen Seiten ein externes Stylesheet zugewiesen werden. Was besagt Dein Vorschlag genau: Das Stylesheet "zusammenbauen" lassen? Heisst das, die CSS soll intern geschrieben werden und per PHP verändert werden, statt den Aufruf der externen CSS zu ändern? So liesse sich ein weiteres Stylesheet speziell für den IE6 vermeiden, richtig?
Am liebsten wäre mir, wie schon gesagt, das Modifizieren des Codes in der Art, das der IE6 einfach mitkommt. Wie's scheint, bin ich ja auch relativ nah dran...

kelli schrieb:
Es erscheint mir allerdings komisch warum der IE den repeat nicht macht *grübel*. Da ich selbst mit repeat arbeite und es bei mir problemlos funktioniert.
Code:
#container{background: url(.../....gif) repeat-y color:fff ;}
Versuch es mal so evtl. kommt der IE bei mehreren background Anweisungen durcheinander "sollte er zwar nicht aber man weiss ja nie".
Das kann ich mal probieren, ehrlich gesagt zweifle ich aber ein bisschen, dass der IE die eigentlichen Befehle verwechselt, die Kurzschreibweise aber nicht. Andererseits, wenn es bei Dir funktioniert... ich probiers aus, wenn ich wieder am Code sitze. Danke :)

kelli schrieb:
Ansonsten sieht es bei mir im IE recht ordentlich aus.
Ja? :) Wie genau? In Post #13 stehen kleine konkrete Fehler drin, an die ich mich erinnere. Ich habe es mit "!important" zu kitten versucht, sind die Fehler noch da?

Vielen Dank für eure Hilfe. godn
 
godn schrieb:
Opera 7 aber verschluckt die Seitenschatten

Was m.E. richtig ist. Ein Hintergrundbild wird in dem Bereich angezeigt, den das Element belegt. Dein DIV #links ist aber leer, also hat es die Höhe 0, das Hintergrundbild ist nicht sichtbar. Nach ein   rein, und du siehst, daß das soweit stimmt.

Warum ist aber die Höhe 0, wenn du doch für #links "height: 100%" angibst?

CSS2 sagt, daß eine Prozentangabe für eine Höhenangabe nur möglich ist, wenn die Höhe im Elternelement explizit angegeben ist.

Ist das nicht der Fall, wird die Prozentangabe durch "auto" ersetzt, und die natürliche Höhe ist in deinem Fall halt 0.

In CSS2.1 wurde eingeschränkt: "and this element is not absolutely positioned". Die Ersetzung findet also nicht statt.

Mozilla scheint sich an CSS2.1 zu halten, Opera an CSS2. Obwohl eigentlich Opera behauptet CSS2.1 umzusetzen.

Alles unter dem Vorbahalt, daß ich es richtig verstanden habe.

und Opera 6 sowie der IE/Mac haben noch schwerwiegendere Darstellungsprobleme.

Du mußt selbst wissen, wie viel Energie du dafür aufwenden willst, Darstellungsfehler in alten Browserversionen zu umgehen (so möglich). Kommt auf die speziellen Umstände an.

Mein Vorgehen: Nach W3C Vorgaben entwickeln. Dafür stehen mit dem Mozilla (DOM-Inspector) und Opera zwei gute Testwerkzeuge bereit. Dann für IE/Win anpassen (Marktanteilbedingt). Damit hat man den überwiegenden Teil der Browser erschlagen. Jedes weitere Verbiegen für andere Browser bedeutet immer mehr Aufwand für immer weniger zusätzlichen Nutzen.
 
godn schrieb:
Also die Idee mit der Browserweiche und dem separaten Stylesheet würde ich, glaube ich, inzwischen doch lieber ersetzen.

Du mußt beachten:

Der Style eines Elements ist die Gesamtheit aller Deklarationen. Spätere Deklarationen überschreiben frühere.

h1 {
font-size: 130%;
background-color: blue;
}

und

h1 {
font-size: 130%;
}

h1 {
background-color: blue;
}

sind in der Wirkung gleich.

Sie können auch in zwei Dateien stehen, die beide eingebunden werden.

Allgemein.css:

h1 {
font-size: 130%;
background-color: red;
}

Deutsch.css:

h1 {
background-color: blue;
}

Englisch.css:

h1 {
background-color: green;
}

Man muß nur die Angaben machen, die anders sind als zuvor deklariert.

Nun glaube ich allerdings auch nicht wirklich, dass der IE6 tatsächlich nicht in der Lage ist, Karteireitermenüs richtig dazustellen - ich müsste nur wissen, wie. Ich habe jetzt mal zum testen, die Fehler, an die ich mich erinnern kann (Weder zu Hause noch in weiten Teilen meines Freundeskreises gibts Windows-Rechner, VPC auch nicht) zu kitten versucht.

Und genauso machst du es mit Korrekturen für den IE/Win, statt da Hacks einzubauen, die auf Parserfehlern beruhen.

Alle.css:

p {
margin: 0px;
border: 1px solid black;
}

IE-fix.css:

p {
margin: 3px;
}

Es gibt nämlich eine elegante Möglichkeit, HTML Elemente nur für den IE/Win einzublenden, ggf versionsabhängig. Nennt sich "conditional comments". http://www.quirksmode.org/css/condcom.html
 
Zuletzt bearbeitet:
Hi Nogger.
Vielen Dank für Deine Antwort.
Was die Opera7-Seitenschatten anbelangt haut es leider auch mit " " im Auszeichnungscontainer nicht hin, ich habe es eben ausprobiert. Allerdings verändert sich etwas, die vorher gar nicht angezeigten Seitenschatten werden nun etwa (geschätzt) 30px hoch angezeigt... Leider nicht über die ganze Höhe, trotz "height: 100%" und "repeat-y"... Ich verstehe nicht warum. Überschrieben wird die Anweisung jedenfalls nicht, auch "!important"-setzen der Atrribute ändert die Höhe nicht. :confused:
<edit>EDIT: AHA! Es scheint an der height zu liegen, wenn ich "1000px" statt "100%" angebe, wird der Schatten 1000px lang angezeigt. Offenbar bezieht Opera die prozentuale Heightangabe nicht auf das Eltern-Element, den Maincontainer... :confused: aber was nun? </edit>

Was die Browser angeht, zu denen ich kompatibel sein will: Ich möchte validen Code schreiben, der auf so vielen Browern wie möglich korrekt dargestellt wird. Mozilla, IE6/Win und Safari sollen definitiv unterstützt werden, wenn möglich ohne Korrekturstylesheet... Parserfehler-Hacks werde ich nicht benutzen.

Mein Problem ist einfach folgendes: Ich weiß nicht, warum es im IE6 nicht funzt, ich habe auch leider im Moment noch keine Möglichkeit, es verlässlich zu testen - dies wird sich wohl bald ändern müssen, wenn ich vernünftig weitercoden will. Wenn ich wirklich wüsste, was das Problem ist (also der Teil des Codes, der den IE rauswirft), könnte ich gucken, welche Schritte nötig werden, um dem Problem beizukommen... Sollte es sich als sinnvoll erweisen mit separatem Stylesheet, sollte es ohne gehen: umso besser. Eigentlich hat die Überlegung auf welche Art die Korrektur geschehen soll zu diesem Zeitpunkt noch gar keinen Sinn, ich weiß ja nicht, was überhaupt korrigiert werden muss.

Gruß. godn
 
Zuletzt bearbeitet:
[gelöscht] 10 zeichen
 
Zuletzt bearbeitet:
godn schrieb:
Was die Opera7-Seitenschatten anbelangt haut es leider auch mit "&nbsp;" im Auszeichnungscontainer nicht hin, ich habe es eben ausprobiert. Allerdings verändert sich etwas, die vorher gar nicht angezeigten Seitenschatten werden nun etwa (geschätzt) 30px hoch angezeigt...

Er wird in Höhe einer Zeile angezeigt. #links hat durch das &nbsp; nämlich jetzt einen Inhalt (eine Zeile) und somit auch eine Höhe (eine Zeile).

Leider nicht über die ganze Höhe, trotz "height: 100%" und "repeat-y"... Ich verstehe nicht warum.

In CSS2 wird ine Prozentangabe bei einem Element nur befolgt, wenn das Elternelement eine *explizite* Höhe hat. Das ist bei dir nicht der Fall, #maincontainer hat height: auto;
Setze mal stattdessen 300px, und du wirst sehen, daß jetzt die 100% (von 300px) Angabe greift. Nur zur Verdeutlichung, ist natürlich keine Lösung.

In CSS2.1 wird dagegen die Prozentangabe immer befolgt, wenn ein Element position: absolute; deklariert ist, was bei dir ja der Fall ist. Deshalb ist der Schatten im Mozilla da.

Zwei Möglichkeiten:

a) So lassen wie es ist. Ist halt der Schatten bei bestimmten Browsern halt nicht da.

b) Seitenstruktur ändern auf
<div id="#links">
<div id="#rechts">
<div id="#maincontainer">
...
Mit entsprechendem padding in #rechts. #maincontainer zieht die umschließenden divs auf die notwendige Höhe auf.

Überschrieben wird die Anweisung jedenfalls nicht, auch "!important"-setzen der Atrribute ändert die Höhe nicht. :confused:

Das passiert intern im Browser beim Verarbeiten der Stylesheets. Davon bekommst du nichts mit, außer dem Ergebnis.

Mein Problem ist einfach folgendes: Ich weiß nicht, warum es im IE6 nicht funzt,

Die Funzeln des IE: http://www.positioniseverything.net/explorer.html

Du hast die freie Auswahl ;-)

Wenn dort eine Lösung angeboten wird, dann oft als CSS Hack. Kann natürlich auch mit conditional comments und einem separatem Stylesheet umgesetzt werden. Eine Lösung ohne spezielle Styleanweisungen für den IE ist nur selten möglich.

Eine nicht von der Hand zu weisende Regel lautet:

90% der Zeit braucht man, um die Seite W3C-konform zu gestalten. Die restlichen 90% braucht man, damit die Seite auch im IE funktioniert...

Wenn man es sich erlauben kann aktiviertes Javascript zu verlangen, kann man sich die Arbeit sehr erleichtern, indem man die antike CSS Implementation des IE ins Jahr 2005 holt: http://dean.edwards.name/IE7/compatibility/
 
Nogger schrieb:
In CSS2 wird ine Prozentangabe bei einem Element nur befolgt, wenn das Elternelement eine *explizite* Höhe hat. Das ist bei dir nicht der Fall, #maincontainer hat height: auto;
Setze mal stattdessen 300px, und du wirst sehen, daß jetzt die 100% (von 300px) Angabe greift. Nur zur Verdeutlichung, ist natürlich keine Lösung.

In CSS2.1 wird dagegen die Prozentangabe immer befolgt, wenn ein Element position: absolute; deklariert ist, was bei dir ja der Fall ist. Deshalb ist der Schatten im Mozilla da.
Ich danke Dir, Nogger!
Warum steht sowas nicht in meinen Büchern :rolleyes:

Nogger schrieb:
Zwei Möglichkeiten:
a) So lassen wie es ist. [...]
b) Seitenstruktur ändern [...]
Ich habs jetzt gekittet, aber ganz anders. Ich habe die divs rausgeschmissen und eine 900px breites Hintergrundbild für den body gesetzt. Dieses Bild hat an den Seiten Farbverläufe, der Hauptteil des Bildes wird vom Main-Container überdeckt und nur die Verläufe an der Seite sind noch zu sehen. :D

Nogger schrieb:
Eine nicht von der Hand zu weisende Regel lautet:

90% der Zeit braucht man, um die Seite W3C-konform zu gestalten. Die restlichen 90% braucht man, damit die Seite auch im IE funktioniert...
Ich habe zwar das Gefühl Du benötigst dringend Nachhilfe in Prozentrechnung :D ...Aber ich verstehe Dich jetzt einfach mal so, dass Du meinst, die ersten 10% für W3C, die restlichen 90% für IE... Und damit hast Du sicher recht! ;)

Die Mainnavigation-Fehler im IE sind leider noch unbehoben, allerdings stören Andreas und ich uns immer weniger dran... Wenn ihr einen Lösung wisst, her damit!

Ich habe nun, zur Ansicht der Veränderungen und aus Spaß mal ein mögliches künftiges England-Design hochgezogen. URL wie immer: http://www.godn.de/diverses/ausland-sprachreisen/
CSS diesmal hier: http://www.godn.de/diverses/ausland-sprachreisen/england.css

Gruß. godn
 
Zuletzt bearbeitet von einem Moderator:
godn schrieb:
Ich habe zwar das Gefühl Du benötigst dringend Nachhilfe in Prozentrechnung :D ...Aber ich verstehe Dich jetzt einfach mal so, dass Du meinst, die ersten 10% für W3C, die restlichen 90% für IE... Und damit hast Du sicher recht! ;)

Ich habe heute in einer halben Stunde eine Idee W3C-konform umgesetzt. Mozilla und Opera: 1a.

Dann der IE. Probleme ohne Ende, die CSS Engine macht bei der Berechnung der Spezifizität der CSS Regeln Fehler, display: block bei A Elementen ist eine kaputte Katastophe, in Zusammenhang noch mit floats letztlich definitiv nicht behebbar, Google bemüht, mögliche Lösungen probiert. Letztlich habe ich es wieder rausgenommen, es ist mit dem IE nicht möglich. Und leider auch nicht so lösbar, daß das Feature bei allen außer IE aktiv ist. Vier Stunden habe ich mich an der IE Version versucht.

Das ist zum Kotzen... CSS2 ist sieben Jahre alt. Man könnte so nette Sachen so einfach damit erreichen.
 
Zurück
Oben Unten