Absolute Block Links Problem im IE

Status
Nicht offen für weitere Antworten.

sra

Erfahrenes Mitglied
Hallo

Ich hatte kürzlich den Auftrag eine Art Flowchart mit Links und Hover Effekt fürs Web aufzubereiten. Was ich gemacht habe, ist ein Div, das alle "Flowchartelemente" (einfache Rechtecke mit Text drin) als Link (<a>) enthält. Die Links habe ich dann innerhalb des Divs absolut positioniert und per display:block und Höhen- sowie Breitenangaben Sichtbar gemacht. Das ganze noch mit nem Hintergrundbild (und nem anderen im Hover) und die Sache war für mich gegessen.

Hier der Code:
HTML:
<div class="quicklinks">
    <a href="#" class="q1"><strong>RGR</strong><br />Rauchgasreinigung</a>
    <a href="#" class="q2"><strong>KVA</strong> Kerichtverbrennungsanlage<br /><strong>MHKW</strong> M&uuml;llheizkraftwerk</a>
    <a href="#" class="q3"><strong>Konsum&uuml;ter</strong> und<br /><strong>Investitionsg&uuml;ter</strong></a>
    
    <a href="#" class="q4"><strong>Reststoffe</strong><br />mineralisch metallhaltig</a>
    
    <a href="#" class="q5">Flugaschenw&auml;sche</a>
    <a href="#" class="q6">Quecksilberabscheidung</a>
    <a href="#" class="q7">Abwasserbehandlung</a>
    
    <a href="#" class="q8"><strong>Metallh&uuml;tte</strong><br />Zink- / Quecksilber R&uuml;ckgewinnung</a>
    
    <a href="#" class="q9"></a>
</div>
...und das css (für ein Element):
HTML:
.quicklinks
{
    position:absolute;
    width:812px;
    height:245px;
    background-image:url(Images/header_bg.jpg);
}

a.q1:link
{
    display:block;
    width:284px;
    height:44px;
    position:absolute;
    top:32px;
    left:0px;
    
    background-image:url(Images/q1.jpg);
    padding-top:7px;
    padding-left:10px;
    
    font-family:Arial;
    font-size:12px;
    color:White;
    text-decoration:none;
}
Das funktioniert auch genau wie vorgesehen, und sieht auch sehr gut aus. Das Problem ist nur, dass die gesamte Fläche vom Div "quicklinks" weiss wird, sobald man im IE das Browserfenster verkleinert/vergrössert/verschiebt :(

Kann mir bitte jemand helfen? Ich kommte da echt nicht weiter.

Danke / Gruss
sra
 
Hi,

kann man sich die Seite mal "live" anschauen, denn lokal kann ich mit den Quellcode-Angaben den Darstellungsfehler nicht reproduzieren.
 
Hi,

es liegt an der relativen Positionierung des umschliessenden DIVs.
Code:
<div style="position:relative;">
Wird dort die Positionierung rausgenommen, funktioniert es bei mir (IE6, FF).

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.
Zurück