IE8 ok, IE7 und IE6: logo in h1 erzeugt Abstand

[michat]

In der verlinken Zeile soll das Logo den ockerfarbenen Rand überfliessen. Das klappt mit Opera und IE8, nicht jedoch mit IE7 oder IE6. Die beiden letztgenannten erzeugen einen Abstand zwischen Schrift und Rand.

Wie läßt sich dies abstellen?

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

In der verlinken Zeile soll das Logo den ockerfarbenen Rand überfliessen. Das klappt mit Opera und IE8, nicht jedoch mit IE7 oder IE6. Die beiden letztgenannten erzeugen einen Abstand zwischen Schrift und Rand.

Man sollte sich für alte IE6 kein Bein mehr ausreißen, sondern nur dafür sorgen, dass die Seite benutzbar bleibt.

Um dies zu erreichen, lassen sich  mit dem falschen CSS-Selektor *html foo {bar:baz} (IE6) bzw. *+html foo {bar:baz} (IE7) diese Browser ansprechen.

Matthias

[michat]

...

Man sollte sich für alte IE6 kein Bein mehr ausreißen, sondern nur dafür sorgen, dass die Seite benutzbar bleibt.

Um dies zu erreichen, lassen sich  mit dem falschen CSS-Selektor *html foo {bar:baz} (IE6) bzw. *+html foo {bar:baz} (IE7) diese Browser ansprechen.

Ok, da werde ich mal nach googlen um das besser zu verstehen. Kann ich dir noch abringen mir mitzuteilen, worauf das letztlich hinausläuft? Welches Element und/oder welche Eigenschaft müßte ich jeweils mit diesen Hacks (?) ansprechen?
Alternative: gäbe es eine Möglichkeit in den beiden genannten Browseren das Logo einfach nicht auszugeben, oder an ganz anderer Stelle zu platzieren?

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

Ok, da werde ich mal nach googlen um das besser zu verstehen. Kann ich dir noch abringen mir mitzuteilen, worauf das letztlich hinausläuft? Welches Element und/oder welche Eigenschaft müßte ich jeweils mit diesen Hacks (?) ansprechen?

Wenn ich das richtig verstehe (ich hab im Moment keine alten IE zum testen), muss das Logo nach oben oder unten verschoben werden.

img.ps {/* Deklarationen, die für alle[1] Browser gelten sollen */}

*html img.ps {margin-top: -1em;} /*schiebt das Logo im IE6 nach oben */

*+html img.ps {margin-top: 0.5em;} /*schiebt es im IE7 nach unten */

Alternative: gäbe es eine Möglichkeit in den beiden genannten Browseren das Logo einfach nicht auszugeben, oder an ganz anderer Stelle zu platzieren?

mit Sicherheit. Viele. Aber dazu musst du sagen, was du möchtest.

[1] modernen, nicht modernden

Matthias

[suit]

Man sollte sich für alte IE6 kein Bein mehr ausreißen, sondern nur dafür sorgen, dass die Seite benutzbar bleibt.

Das kommt auf den Kunden an.

Um dies zu erreichen, lassen sich  mit dem falschen CSS-Selektor *html foo {bar:baz} (IE6) bzw. *+html foo {bar:baz} (IE7) diese Browser ansprechen.

* html sowie *:first-child+html, auf den von dir genannten IE7-Hack reagiert Opera 9 in bestimmten Minor-Versionen auch.

Hacks sind eine feine Sache aber eben doch wenn nicht richtig eingesetzt wenig kontrollierbar - bleib besser bei Conditional Comments um _ziemlich_ sicher zu sein.

[michat]

Man sollte sich für alte IE6 kein Bein mehr ausreißen, sondern nur dafür sorgen, dass die Seite benutzbar bleibt.

Das kommt auf den Kunden an.

Also, ich wünschte meine Infos besagten, dass der IE6 kaum noch benutzt würde ... ist aber nicht der Fall. Ergo, es muss auch im IE6 noch ansprechend ausschauen, und das obwohl mir der dazu notwendige Aufwand eigentlich zuwider ist.

Um dies zu erreichen, lassen sich  mit dem falschen CSS-Selektor *html foo {bar:baz} (IE6) bzw. *+html foo {bar:baz} (IE7) diese Browser ansprechen.

* html sowie *:first-child+html, auf den von dir genannten IE7-Hack reagiert Opera 9 in bestimmten Minor-Versionen auch.

Agrrrr, nun habe ich es, man kann's im verlinkten Beispiel "bewundern", mit

	\*html img.ps { position: absolute; top: 0; right: 5%; } /\* Logo im IE6 \*/  

	\*+html img.ps { position: absolute; top: 0; right: 5%; } /\* Logo im IE7 \*/	  

hinbekommen, nun kommst du ;-) , und dann auch gleich noch mit der Geheimwaffe "Opera". Nun könnte ich einwenden, dass, wer Opera verwendet, eigentlich sowieso fast immer eine aktuelle Version verwendet, und die 0,0034567 User, die noch eine 9 minor verwenden nun wirklich nicht ins Gewicht fallen. andererseit, was tut man nicht alles für seinen Lieblingsbrowser ;-)
... wobei ich mich eben frage, warum ich obiges als "Hack" verwende. Spricht ja eigentlich nichts dagenen, dies generell für alle browser so zu machen ... muß ich mal ausprobieren ...

Hacks sind eine feine Sache aber eben doch wenn nicht richtig eingesetzt wenig kontrollierbar - bleib besser bei Conditional Comments um _ziemlich_ sicher zu sein.

Geht es ein bisschen gesprächiger?

@Matthias
Danke für dein ausführliches Beispiel, das hat mir sehr geholfen. Mir war vorher nicht klar, dass es möglich ist damit gezielt einen Selektor anzusprechen.

bye

MH

[suit]

Geht es ein bisschen gesprächiger?

Ungern ;)

Es gibt Hacks im Sinne von zuverlässigen CSS-Browserweichen und es gibt Hacks im Sinne von einfachen schnellen allgemeinen aber schlechten Lösungen.

Bei den CSS Hacks gibt es zuverlässige Hacks die mit annähernd 100%iger Sicherheit den richtigen Browser treffen und eben Hacks die mal eben so irgendwie funktionieren und dann doch wieder andere Browser ansprechend weil es entweder nur moderne Selektoren, Pseudoklassen oder eigenschaften sind oder eben unsinnige Selektoren sind, die in anderen Browsern im Quirksmode dennoch auftreten oder leicht mal auch in anderen Browsern als Bug vorhanden sein könnten.

* html ist sehr zuverlässig
*:first-child+html ebenfalls

Andere Hacks hingegen sind mit risiko verbunden - besonders verbreite sind z.B. irgendwelche lustigen Safari-Hacks die die geringe Verbreitung von MediaQueries-Fähigen Browsern ausnutzen oder auf dortige Fehlerzurückgreifen - da diese Technik aber grade im Begriff ist überall eingebaut zu werden und teilweise im Wochentakt in Bugfixes umgekrempelt wird, sollte man davon wohl eher die Finger lassen.

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

  *html img.ps { position: absolute; top: 0; right: 5%; } /* Logo im IE6 */

  *+html img.ps { position: absolute; top: 0; right: 5%; } /* Logo im IE7 */	

Besser und nur als Beispiel unabhängig von deinem Sachverhalt:

img.ps {position: absolute; top: 0; right: 5%;}
*html img.ps {right: 4%;}/* nur die Unterschiede */

btw: position ist auch nicht ohne btw2: ob du mit der Klassenwahl wohl so günstig bist ... btw3: CCs

Matthias

[michat]

btw: position ist auch nicht ohne

Hoffentlich muss ich das nicht so bald entdecken, aber vielleicht habe ich das schon. Der IE7 (IE6 nicht!) scheint ein problem mit dem z-index zu haben, das icon wird von seitlich danebenstehenden <div> abgeschnitten, trotz z-index.

btw2: ob du mit der Klassenwahl wohl so günstig bist ...

meinst du den _namen_ "ps"?

btw3: CCs

Danke.
Jetzt ist die Darstellung der Seite bei v0.9x angelangt und ist einschl. IE6 präsentabel.

bye

MH

[Matthias Apsel]

Om nah hoo pez nyeetz, michat!

In meinen Aussagen beziehe ich mich auf dein Original-Posting.

Hoffentlich muss ich das nicht so bald entdecken, aber vielleicht habe ich das schon. Der IE7 (IE6 nicht!) scheint ein problem mit dem z-index zu haben, das icon wird von seitlich danebenstehenden <div> abgeschnitten, trotz z-index.

Ich kann mir hier beim besten Willen nicht vorstellen, wozu man z-index benötigen sollte. Aber vielleicht ist das Beispiel zu sehr abgespeckt.

btw2: ob du mit der Klassenwahl wohl so günstig bist ...

meinst du den namen "ps"?

»»

Nein. Die Verwendung von Klassen und IDs bläht den Quelltext (meist) unnötig auf. In deinem Fall würde der Selektor h1 img dasselbe leisten (unter der Voraussetzung, dass dieses Logo das einzige Bild ist und bleibt, dass innerhalb einer Überschrift erster Ordnung vorkommt). img.ps ist auch nur dann sinnvoll wenn es auch z.B. ein h1.ps oder p.ps gibt und diese andere Eigenschaften als das Bild haben sollen.

Vielleicht stellst du ein aktuelles online-Beispiel zur Verfügung und stellst dar, was es werden soll.

Matthias

[Gunnar Bittersmann]

@@michat:

nuqneH

Hacks sind eine feine Sache aber eben doch wenn nicht richtig eingesetzt wenig kontrollierbar - bleib besser bei Conditional Comments um _ziemlich_ sicher zu sein.

Geht es ein bisschen gesprächiger?

Besser nicht. Vergiss das, was zwischen '»» »» ' und '»» ' steht wieder. (Das Archiv ist zu diesem Thema ziemlich gesprächig.)

Qapla'

[suit]

Besser nicht. Vergiss das, was zwischen '»» »» ' und '»» ' steht wieder. (Das Archiv ist zu diesem Thema ziemlich gesprächig.)

Sagt der militante Gitarrist :D

[Shadowcrow]

'ǝɯɐu$ ıɥ

Hacks sind eine feine Sache aber eben doch wenn nicht richtig eingesetzt wenig kontrollierbar - bleib besser bei Conditional Comments um _ziemlich_ sicher zu sein.

Geht es ein bisschen gesprächiger?

Sein Vorname ist Gunnar nicht Google.

SCNR

ssnɹƃ
ʍopɐɥs

[Shadowcrow]

'ǝɯɐu$ ıɥ

Geht es ein bisschen gesprächiger?

Sein Vorname ist Gunnar nicht Google.

Uuups, da hab ich was verwechselt, sorry suit.

ssnɹƃ
ʍopɐɥs