nicht angemeldet
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
Struppi