nicht angemeldet
Zwei Probleme mit dem IE
0 
Struppi
Zwei Probleme mit dem IE
Ola!
Ich habe zwei Probleme, die ich trotz Suche und ergiebigem rumprobieren nicht alleine lösen konnte. Beide treten nur im Internet Explorer auf.
1. Ich will den Menüpunkten einer Liste ein Hintergrundbild mitgeben. Weil die Links sowieso die ganze Fläche des li einnehmen, will ich das background-image direkt dem a mitgeben.
Meine Lösung:
#menue { margin:0.25em 0 0 0; padding:0; list-style:none; font-size:1.2em; }
#menue li { width:25%; min-width:10em; margin:0; padding:0; float:left; }
#menue li a, #menue li a:link, #menue li a:visited { height:2.5em; margin:0.1em; padding:0.2em 0 0 0; text-align:center; text-decoration:none; display:block; font-weight:700; color:#fff; background-image:url(../favicon.ico); background-repeat:repeat; border:medium solid #9c3; }
#menue li a:hover, #menue li a:active, #menue li a:focus { text-decoration:underline; color:#360; background:#fff; border:medium solid #360; }
Die funktioniert mit dem FF, Opera, Safari usw. dufte, aber mein IE 6.0 weigert sich die Grafik anzuzeigen und läßt die Fläche schwarz.
2. Ich habe Klassen geschaffen um Bildern eine Bildunterschrift mitgeben zu können. Natürlich gibt es diese Klasse für verschiedene Ausrichtungen und Seitenverhältnisse der Bilder.
Meine Lösung:
/* Darstellung von Bildern mit Bildunterschrift. Es gilt:p=bild (pic), b=breiter als hoch, h=höcher als breit, l=linksbündig, r=rechtsbündig */
/* Im Html werden die Bilder in ein div mit entsprechender class gepackt. Darin das Bild normal über img aufrufen. Bildunterschrift einfach nach dem img anfügen */
.p-b-r, .p-b-l, .p-h-r, .p-h-l { position:relative; text-align:center; padding:0.4em; font-size:0.7em; color:#fff; background:#000; border:thin solid #fff; }
.p-b-r img, .p-b-l img, .p-h-r img, .p-h-l img { width:100%; height:100%; margin:0 0 0.15em 0; }
.p-b-l, .p-h-l { margin:1.6em 1.25em 0.5em 0; float:left; }
.p-b-r, .p-h-r { margin:1.6em 0 0.5em 1.25em; float:right; }
.p-b-l, .p-b-r { width:20em; }
.p-h-l, .p-h-r { width:10em; }
Wieder macht der IE Zicken. Wenn die Seite geladen wird, werden die Bilder völlig verzerrt dargestellt. Erst wenn man die Maus über ein benachbartes Element bewegt (sei es nun ein h oder a), macht es popp und die Bilder erhalten die richtige Größe.
Jemand sachdienliche Hinweise für mich?
Steffen
-
#menue li a, #menue li a:link, #menue li a:visited { height:2.5em; margin:0.1em; padding:0.2em 0 0 0; text-align:center; text-decoration:none; display:block; font-weight:700; color:#fff; background-image:url(../favicon.ico); background-repeat:repeat; border:medium solid #9c3; }
Kann der IE dieses Format, als Hintergrundbild darstellen?
- Ich habe Klassen geschaffen um Bildern eine Bildunterschrift mitgeben zu können. Natürlich gibt es diese Klasse für verschiedene Ausrichtungen und Seitenverhältnisse der Bilder.
.p-b-r, .p-b-l, .p-h-r, .p-h-l { position:relative; text-align:center; padding:0.4em; font-size:0.7em; color:#fff; background:#000; border:thin solid #fff; }
Wozu position relative?
Wieder macht der IE Zicken. Wenn die Seite geladen wird, werden die Bilder völlig verzerrt dargestellt. Erst wenn man die Maus über ein benachbartes Element bewegt (sei es nun ein h oder a), macht es popp und die Bilder erhalten die richtige Größe.
Sowas ist ohne konkretes, funktionierendes Beispiel schwer nachzuvollziehen.
Struppi.
-
Kann der IE dieses Format, als Hintergrundbild darstellen?
Das scheint keine Frage des Formats zu sein. Ich habe es auch mit gif probiert, hat aber nix gebracht.
Wozu position relative?
Das war nötig, weil die Bilder sonst von den Bordern benachbarter Überschriften durchschnitten wurden.
Sowas ist ohne konkretes, funktionierendes Beispiel schwer nachzuvollziehen.
Das konkrete Beispiel findest du hinter dem Link ;)
- Ich habe Klassen geschaffen um Bildern eine Bildunterschrift mitgeben zu können. Natürlich gibt es diese Klasse für verschiedene Ausrichtungen und Seitenverhältnisse der Bilder.