background-image + padding-left + IE 4/5.0/5.5 + seltene Browser
MudGuard
- browser
Hi,
ich will vor einer Überschrift per CSS ein kleines Bildchen einbinden.
h1:before { content:url(bild.png); padding:7px; }
wäre ja der logischste Ansatz, funktioniert aber selbst im modernsten aller IE, dem 6.0er, nicht.
Also
h1 {
background-image:url(bigknot3.png);
background-repeat:no-repeat;
background-position:left center;
min-height:23px; /* versteht der auch IE nicht, schadet aber nicht */
padding-left:30px; /* jetzt 23px mehr padding, da ja auch die Bildbreite im Padding berücksichtigt werden muß... */
}
Dieses Verfahren mit padding-left und Hintergrundbild wurde ja hier schon des öfteren vorgeschlagen, wenn es darum ging, Links mit einem Bildchen zu versehen. Dabei wurde des öfteren erwähnt, daß alte IEs (also NOCH ältere als der IE 6.0) das padding-left nicht berücksichtigen würden und den Linktext über das Bildchen schreiben.
Soweit ich weiß (bin mir aber nicht sicher), hängt das damit zusammen, daß a-Elemente inline-Elemente sind und die alten IEs für diese inline-Elemente kein padding verstehen.
h1 ist aber kein inline-Element, sondern ein blocklevel-Element - funktioniert es denn damit?
Momentan hab ich leider keinen Zugriff auf solche Alt-Browser. Darum bitte ich Besitzer dieser Browser um einen kurzen Test:
http://temp.andreas-waechter.de/padding.html
Wird dort das Bildchen vom Text überlagert?
Und wenn Ihr schon dort seid, gleich noch eine zweite Frage:
Das Bild (png, indiziert, nur An-Aus-Transparenz) enthält ein paar transparente Pixel.
Funktioniert das mit der Transparenz auch in den alten IE? Ich hab extra die Hintergrundfarbe auf ein kräftiges Grün gestellt, damit das leichter zu erkennen ist? (Netscape 4.7 zeigt die transparenten Stellen schwarz an, aber der wird sowieso ein wesentlich reduziertes CSS bekommen, ist also für diesen Test unwichtig)
Safari/Camino/Konqueror/sonstigeBrowser-Besitzer dürfen auch gerne berichten (die spielen zwar so gut wie keine Rolle in meinen Logfiles, aber es schadet ja nicht, zu wissen, was dort geht oder eben nicht).
Selbst getestet hab ich in Mozilla 1.7.2, Opera 7.53 + 7.21, IE 6.0 (Netscape 4.77)
Vielen Dank im Voraus,
Andreas
Hallo Andreas,
Wird dort das Bildchen vom Text überlagert?
..
Funktioniert das mit der Transparenz auch in den alten IE? Ich hab extra die Hintergrundfarbe auf ein kräftiges Grün gestellt, damit das leichter zu erkennen ist? (Netscape 4.7 zeigt die transparenten Stellen schwarz an, aber der wird sowieso ein wesentlich reduziertes CSS bekommen, ist also für diesen Test unwichtig)
mit dem IE 5 siehts hier ordentlich aus.
Grüsse
Cyx23
Hi,
mit dem IE 5 siehts hier ordentlich aus.
Danke. 5.0 oder 5.5?
cu,
Andreas
Danke. 5.0 oder 5.5?
Andreas,
Im 5.0 sieht's bei mir gut aus.
Gunnar
Hi,
Im 5.0 sieht's bei mir gut aus.
Danke, das läßt die Wahrscheinlichkeit, daß es auch im 5.5er funktioniert, steigen (obwohl, beim IE könnte durchaus was im 5.0er funktionieren, im 5.5er nicht und im 6.0er dann doch wieder ...)
cu,
Andreas
Halihallo MudGuard
Danke, das läßt die Wahrscheinlichkeit, daß es auch im 5.5er funktioniert, steigen (obwohl, beim IE könnte durchaus was im 5.0er funktionieren, im 5.5er nicht und im 6.0er dann doch wieder ...)
Mal davon abgesehen wie es im IE5.5 für Mac aussehen könnte...
Aber auch hier ein grünes Licht, transparenz, padding-left, alles IO.
... und wenn's mal auf dem IE5.5 für Mac läuft, ... dann ist's schon
fast eine plattform- und browserunabhängig funktionierende Lösung...
IE6.0, Win32 OK
NS7.0, Win32 OK
NS6.2, Win32 OK
IE5.5, Mac9x OK
NS7.0, Mac9x OK
FireBird0.7, Win32 OK
Mozilla1.5, Win32 OK
IE5.0, Win98 OK
IE4.0, Win98 Hm. soll der grüne Balken über den gesamten Bildschirm?
Ist ja ein bekanntes Problem, Blockelement im IE4.
Naja, sieht doch ganz gut aus... Von einigen Browsern hat man das ja
auch erwartet, von anderen gehofft...
Viele Grüsse
Philipp
Hi,
IE6.0, Win32 OK
NS7.0, Win32 OK
NS6.2, Win32 OK
IE5.5, Mac9x OK
NS7.0, Mac9x OK
FireBird0.7, Win32 OK
Mozilla1.5, Win32 OK
IE5.0, Win98 OK
IE4.0, Win98 Hm. soll der grüne Balken über den gesamten Bildschirm?
Ist ja ein bekanntes Problem, Blockelement im IE4.
Der grüne Balken war nur dazu da, die Transparenz im Bild sichtbar zu machen - nicht daß die transparenten Teile zufällig weiß dargestellt werden und dann bei weißem Hintergrund nicht erkannt werden kann, ob Transparent oder nicht ...
Naja, sieht doch ganz gut aus... Von einigen Browsern hat man das ja
auch erwartet, von anderen gehofft...
Ich danke Dir für die umfangreichen Tests. Sieht so aus, als ob ich das tatsächlich einsetzen kann ;-)
cu,
Andreas
Hi,
IE5.5, Mac9x OK
wo gibt's den denn?
freundliche Grüße
Ingo
Halihallo Ingo
IE5.5, Mac9x OK
wo gibt's den denn?
Du hast recht...
http://www.microsoft.com/mac/downloads.aspx#IE.
Wir haben hier wohl den 5.1.7-er, nicht 5.5
Viele Grüsse
Philipp
Hi,
IE5.5, Mac9x OK
Du hast recht...
darum ging's mir übrigens garnicht - ich würde meiner Mutter (die Mac OS9 nutzt) nur gerne einen etwas besseren Browser als den IE 5.2 intallieren...
freundliche Grüße
Ingo
Halihallo Ingo
IE5.5, Mac9x OK
Du hast recht...
darum ging's mir übrigens garnicht - ich würde meiner Mutter (die Mac OS9 nutzt) nur gerne einen etwas besseren Browser als den IE 5.2 intallieren...
Dann nimm doch den NS7.2 für Mac, der funktioniert (bis auf DHTML-
Effekte mit setIntervall() || setTimeout) ganz gut... :-)
Oder Upgrade auf McOS X und Safari, falls der Computer das aushält (
das Ding schluckt ja gerne einiges an Performance).
Viele Grüsse
Philipp
Hi,
Dann nimm doch den NS7.2 für Mac,
danke, aber den hatte ich schonmal ausprobiert; lief leider sehr instabil und manchmal garnicht.
Oder Upgrade auf McOS X und Safari, falls der Computer das aushält (
nö. leider nicht. Urlalter iMac. Sieht zwar schick aus, aber...;-)
freundliche Grüße
Ingo