2 Safariprobleme / bg-Wechsel und float/clear

[Elya]

Hallo,

Ich weiß, die Schnittmenge Safariuser/CSS-Lover ist nicht so groß, aber vielleicht findet sich ja jemand, der sich meiner zwei Probleme annehmen kann. Zu besichtigen unter http://www.visuelya.de/test/paracomp/pages/team.html oder, für die nicht-Safari-User, auf dem Bild unten.

a) Navigation: Bild"wechsel" durch Verschiebung des Hintergrundbildes. Safari "kachelt" das Hintergrundbild trotz no-repeat. Ein ähnliches Problem tauchte hier vor ca. einer Woche mal auf, aber in einem anderen Browser und in Verbindung mit einem Rechts-Links-padding, ich kann es leider nicht wiederfinden. Ich hab schon versucht, das Problem zu reduzieren, aber es klappt nicht so recht.

b) Das Floatproblem im Mittelteil läßt sich reduzieren auf:

<h3>titel</h3>
  <p><img style="float:left;" /> text text </p>
 <hr style="clear:both;"> (oder auch: clear:left;)

<h3>titel</h3>
 <p><img style="float:left;"/> text text </p>
 <hr style="clear:both;">

<h3>titel</h3>
 <p><img style="float:left;" /> text text </p>

Das jeweils erste "clear" verursacht den großen Abstand. Egal in welchem Element es verwendet wird.

Die beiden Probleme tauchen, soweit ich das prüfen konnte, nur unter Safari auf. Selbst IE5.2 unter Mac zuckt nicht mal...

Kann mir noch jemand folgen? Tim, at, Cheatahs Mama...: help!

Danke für ein bis zwei Denkanstöße.

Gruß aus Köln-Ehrenfeld,

Elya
P.S: Die Seite ist noch nicht komplett valide und rund, alles noch in Arbeit.

http://www.visuelya.de/test/paracomp/css/styles.css
<img src="http://www.visuelya.de/selfpics/paracomp.jpg" border="0" alt="">

[Ingo Turski]

Hi,

Das jeweils erste "clear" verursacht den großen Abstand. Egal in welchem Element es verwendet wird.

Die beiden Probleme tauchen, soweit ich das prüfen konnte, nur unter Safari auf. Selbst IE5.2 unter Mac zuckt nicht mal...

Auch der Opera interpretiert dieses clear korrekt wie der Safari. Vielleicht erklärt Dir http://www.1ngo.de/web/clear.html dieses Phönomen etwas. Ich vermute, Deine Seite verwedet die Konstruktion aus dem zweiten Beispiel. Wäre nett, wenn Du mir mal sagen würdest, ob das zutrifft und der Safari hier wie der Opera den Abstand einhält (dann würde ich ihn an dieser Stelle lobend mit erwähnen;-)

freundliche Grüße
Ingo

[Elya]

Hallo Ingo,

Auch der Opera interpretiert dieses clear korrekt wie der Safari.

du hast recht - ich glaube aber nur auf dem PC. Prüfe das heute abend einmal nach, den Opera vergesse ich auf dem Mac gerne mal... Wenn das tatsächlich die korrekte Darstellung ist, muß ich wohl etwas umdenken.

Vielleicht erklärt Dir http://www.1ngo.de/web/clear.html dieses Phänomen etwas. Ich vermute, Deine Seite verwedet die Konstruktion aus dem zweiten Beispiel.

Ich schaue mir das heute abend gleich mal an.

Wäre nett, wenn Du mir mal sagen würdest, ob das zutrifft und der Safari hier wie der Opera den Abstand einhält (dann würde ich ihn an dieser Stelle lobend mit erwähnen;-)

natürlich. Wenn ich es durchschaue, kriegst Du "Bescheid"

Danke erst einmal!

Gruß aus Köln-Ehrenfeld,

Elya

P.S.: ein Vertipper im vorletzten Absatz Deines Artikels ist mir noch aufgefallen: "auf diese hat die 'clear'-Eigenschaft hat keinen Effekt"

[Ingo Turski]

Hi,

P.S.: ein Vertipper im vorletzten Absatz Deines Artikels ist mir noch aufgefallen: "auf diese hat die 'clear'-Eigenschaft hat keinen Effekt"

vielen Dank. Ich wundere mich immer wieder, was für offensichtliche Fehler man trotz mehrfachem Korrekturlesen übersehen kann..;-)

freundliche Grüße
Ingo

[Elya]

Hallo Ingo,

Ich wundere mich immer wieder, was für offensichtliche Fehler man trotz mehrfachem Korrekturlesen übersehen kann..;-)

und ich habe es noch nicht einmal wirklich gelesen (mach ich heute abend), sondern nur diagonal überflogen - es hilft immer, einen Unbeteiligten nochmal draufsehen zu lassen. Bei eigenen Texten sieht man selbst am Schluß gar nichts mehr.

Gruß aus Köln-Ehrenfeld,

Elya

[Elya]

Hallo Ingo,

Auch der Opera interpretiert dieses clear korrekt wie der Safari. Vielleicht erklärt Dir http://www.1ngo.de/web/clear.html dieses Phönomen etwas.

Hm. ich habe das jetzt mal geprüft (siehe auch die Borders auf http://www.visuelya.de/test/paracomp/): das "clear"-Element fängt tatsächlich genau unterhalb des linken Navi-divs an.
Hab auch verschiedenes probiert, um es zu beseitigen (feste Breite des umgebenden Blocks, noch ein div mit fester Breite um die h3-p-img-Konstrukte ...) - ich fürchte aber, es ist eher ein konzeptionelles Problem und ich muß die ganze Seite umbauen - bzw. was meinst du mit "mit Bedacht einsetzen"?  Hast du noch eine andere Idee? Da es zur Zeit nur eine Einzelseite betrifft, neige ich zu irgendwelchen Hacks oder womöglich ein paar <br /> (brrrr...), aber die Seite ist ja noch im Aufbau, und wer weiß wo ich das noch brauche.

(dann würde ich ihn an dieser Stelle lobend mit erwähnen;-)

hast du doch schon! Apropos: Die Darstellung im Opera 6.03 für Mac OSX ist tatsächlich genauso wie bei Safari.

Gruß aus Köln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

Hab auch verschiedenes probiert, um es zu beseitigen (feste Breite des umgebenden Blocks, noch ein div mit fester Breite um die h3-p-img-Konstrukte ...) - ich fürchte aber, es ist eher ein konzeptionelles Problem

so ist es. Das Konzept ist ganz einfach: clear sollte sich auf alle vorangegangenen float-anweisungen auswirken.

und ich muß die ganze Seite umbauen - bzw. was meinst du mit "mit Bedacht einsetzen"?

damit meine ich, daß man einfach bei der Verwendung von clear die möglichen Auswirkungen berücksichtigen sollte - damit es nicht zu solchen Problemen wie bei Dir kommt.

Du hast zwei Möglichkeiten, die Seite umzustrukturieren:
1. das Inhaltsdiv auch floaten lassen; das verhindert den Effekt zumindest bei den aktuellen Browsern.
2. Die Navigation absolut zu positionieren.

(dann würde ich ihn an dieser Stelle lobend mit erwähnen;-)
hast du doch schon! Apropos: Die Darstellung im Opera 6.03 für Mac OSX ist tatsächlich genauso wie bei Safari.

aber noch nicht beim zweiten Beispiel mit <div style="margin-left:11em; width:28em;">.

freundliche Grüße
Ingo

[Elya]

Hallo Ingo,

Du hast zwei Möglichkeiten, die Seite umzustrukturieren:

1. das Inhaltsdiv auch floaten lassen; das verhindert den Effekt zumindest bei den aktuellen Browsern.
2. Die Navigation absolut zu positionieren.

mal schauen. Ich muß sowieso noch richtig einsteigen mit Shop und Datenbank usw., da ist das wahrscheinlich das kleinere Problem ;-)

Mehr Bauchschmerzen bereitet mir im Moment allerdings die Sache mit der Navileiste - hast Du dazu irgendeinen Ansatz?

Gruß aus Köln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

Mehr Bauchschmerzen bereitet mir im Moment allerdings die Sache mit der Navileiste - hast Du dazu irgendeinen Ansatz?

Vielleicht probierst Du es mal mit #seitenleiste a  { display:block; } ?

freundliche Grüße
Ingo

[Elya]

Hallo Ingo,

Vielleicht probierst Du es mal mit #seitenleiste a  { display:block; } ?

hab ich doch sowieso. Wenn ich das nicht hinkriege, muß ich den ganzen Kram doch in JS programmieren (brrrrr...)

Gruß aus Köln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

stimmt, hatte ich glatt übersehen.
Aber wo ich gerade bei diesem Selector bin: die padding-top Angabe würde ich durch margin-top ersetzen (ich meine, daß ältere IEs damit sonst Probleme haben) und eine Angabe zur height würde ich auch machen. Vielleicht hilft das ja schon beim Safari? Meine Windows-Bowser haben alle keine Probleme damit.

freundliche Grüße
Ingo

[Elya]

Hallo Ingo ,

Aber wo ich gerade bei diesem Selector bin: die padding-top Angabe würde ich durch margin-top ersetzen

dieses padding dient dazu, den Text des Links unterhalb des Hintergrundbildes zu halten - schafft also den Platz für das Hintergrundbild. Mit margin ist mir hier nicht geholfen, damit wird das Element so hoch wie die Schrift und das Hintergrundbild wird abgeschnitten.

(ich meine, daß ältere IEs damit sonst Probleme haben)

bis 5.0/win und 5.2/mac sehe ich kein Problem. Drunter nicht getestet.

und eine Angabe zur height würde ich auch machen.

warum?

Vielleicht hilft das ja schon beim Safari?

leider nein

Meine Windows-Bowser haben alle keine Probleme damit.

ja, das ist ja das Problem. Ich fürchte fast es ist ein Bug. Bis jetzt hat sich Safari bei meinen CSS-Sachen sehr mozillamäßig verhalten.

Danke und
Gruß aus Köln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

(ich meine, daß ältere IEs damit sonst Probleme haben)
bis 5.0/win und 5.2/mac sehe ich kein Problem. Drunter nicht getestet.

stimmt, habe mich gerade selber drüber gewundert. Ich kann mich nur daran erinnern, mal en Problem mit Hintergrundbild uumd padding im IE5.0 gehabt zu haben.

Außer der Methode von CarstenP hätte ich vielleicht noch eine ganz andere Idee für Dich: http://www.1ngo.de/web/buttonschrift.html, da Du ja eigentlich nur die Hintergrundfarbe ändern willst...

freundliche Grüße
Ingo

[Elya]

Hallo,

Außer der Methode von CarstenP hätte ich vielleicht noch eine ganz andere Idee für Dich: http://www.1ngo.de/web/buttonschrift.html, da Du ja eigentlich nur die Hintergrundfarbe ändern willst...

geniale Idee. vielleicht sogar mit Hintergrundbild umsetzbar, weil background-image ja über background-color liegt...? Hätte den Vorteil, daß es vermutlich auch eine Browsergeneration drunter (z.B. IE5.0) funktionieren könnte.

Mal sehen, ob ich die (vom Designer gelieferten) Icons ordentlich transparent bekomme. Da ich keine aktive-Farbe hätte, wäre das Anti-Aliasing wohl auch möglich.

Ihr seid wieder mal alle so gut zu mir ;-) - Danke!

Gruß aus Köln-Ehrenfeld,

Elya

[at]

Hallo.

Kann mir noch jemand folgen? Tim, at, Cheatahs Mama...: help!

Dem Quelltext kann ich bisher nichts bosartiges entnehmen und im Augenblick habe ich keinen der genannten Browser zur Hand, um nach "Trial-and-Error"-Manier zu testen. Vielleicht später.
MfG, at

[CarstenP]

Hallo Elya,

a) Navigation: Bild"wechsel" durch Verschiebung des Hintergrundbildes. Safari "kachelt" das Hintergrundbild trotz no-repeat. Ein ähnliches Problem tauchte hier vor ca. einer Woche mal auf, aber in einem anderen Browser und in Verbindung mit einem Rechts-Links-padding, ich kann es leider nicht wiederfinden.

Ja, das Problem tritt auch im Konqueror auf (kein Wunder bei gleicher Darstellungsmaschine... ;-) ).
Es scheint immer dann aufzutreten, wenn das Hintergrundbild größer ist als der Container, in dem es liegt (bei Dir 118px breites a vs. 136px breites Hintergrundbild). Normalerweise würde das nicht weiter auffallen, da die Kachelung außerhalb des sichtbaren Bereiches stattfindet. Durch die Positionierung des Hintergrundbildes ist nun aber "Platz" und man bemerkt den Fehler.
Man könnte sich nun natürlich damit helfen, den Container nur so groß wie den gewünschten Ausschnitt des Hintergrundbildes zu machen. In Deinem Beispiel würde das aber zusätzlichen HTML-Code bedeuten.
Ich habe mir bei meinen eigenen Seiten damit geholfen, daß ich die relevanten Ausschnitte des Hintergrundbildes nicht direkt an die Bildränder gesetzt habe, sondern links und rechts noch einen zusätzlichen Rand gelassen habe. So wird die Kachelung wieder aus dem Anzeigebereich "hinausgeschoben".

Deine Hintergrundbilder müßten also etwa so aussehen (ohne Transparenz abgespeichert, damit man gleich sieht, was ich meine):
<img src="http://www.carsten-protsch.de/temp/elya.png" border="0" alt="">

Der Rest ist dann nur noch Anpassung der Koordinaten der Hintergrundbilder im CSS.

Viele Grüße
Carsten

[Elya]

Hallo Carsten,

Ja, das Problem tritt auch im Konqueror auf (kein Wunder bei gleicher Darstellungsmaschine... ;-) ).

habe ich mich auch schon gefragt, inwieweit Safari und Konqueror gleiche Darstellung haben, leider habe ich keinerlei Möglichkeit, Konqueror live zu testen. Allerdings hieß es hier vor ein paar Tagen, daß es sehr wohl Unterschiede gäbe.

Man könnte sich nun natürlich damit helfen, den Container nur so groß wie den gewünschten Ausschnitt des Hintergrundbildes zu machen. In Deinem Beispiel würde das aber zusätzlichen HTML-Code bedeuten.

richtig, weil ich ja unten noch den breiteren Text drin habe.

Ich habe mir bei meinen eigenen Seiten damit geholfen, daß ich die relevanten Ausschnitte des Hintergrundbildes nicht direkt an die Bildränder gesetzt habe, sondern links und rechts noch einen zusätzlichen Rand gelassen habe. So wird die Kachelung wieder aus dem Anzeigebereich "hinausgeschoben".

hmmm - klingt fast zu genial einfach um wahr zu sein ;-) Ich würge so lange schon an dem CSS rum, daß ich auf diesen Grafik-Workaround nicht gekommen bin. Super, ich probiere das heute abend gleich mal aus.

Mir scheint, es ist ein Bug, oder? Ich werde ihn bei Gelegenheit mal etwas genauer unter die Lupe nehmen.

Vielen Dank für diesen Lösungsansatz!

Gruß aus Köln-Ehrenfeld,

Elya

[Elya]

Einen wunderschönen guten Abend,

gleich zwei Probleme auf einmal gelöst! Und ohne eine Zeile html umzustellen... :)

Bei dem Hintergrundbild-Problem in Safari und Konqueror habe ich mich   für Carstens Lösung entschieden, weil das Transparenz-Gefrickel in den Icons mir im Augenblick zu aufwendig ist. Ich werde mit Ingos Idee aber auf jeden Fall noch einmal experimentieren, sie gefällt mir im Prinzip noch besser.

Das Float-Thema von Opera und Safari habe ich schweren Herzens mit absolut positionierter Navigationsleiste gelöst. Ein Verändern des gesamten Float-Konzepts hat mir im IE5.2/Mac ein zu großes Chaos beschert, und bis jetzt spielt er bei der aktuellen Konstruktion noch schön mit ;-)

Aber absolute Positionierung ist hier ja eigentlich völlig in Ordnung, die Navi steht ja nun mal fest.

Nochmal lieben Dank für Euren Einsatz und Eure Denkanstöße.

Gruß aus Köln-Ehrenfeld,

Elya