[html + css] Overflow image link problemen in IE

[Joopieboy]

Hallo,

De bedoeling is om zonder javascript en met html + css een afbeelding te gebruiken als link die verandert als je met de muis erop staat en als je erop klikt. Afbeelding overflow dus.
De afbeelding zelf moet 1 keer een bepaalde hoogte omhoog springen en als de muis erop komt.

Nu heb ik echt heel veel tutorials gevolgd, veelal gevonden via google en een aantal links gekregen van kennissen. Nu heb ik in FF2 de boel goed werkend zoals het moet, alleen IE6 geeft probleem bij mij, IE7 kan ik hier niet proberen. maar de problemen in IE zijn:
- Afbeelding word volledig weergegeven ipv de gwenste helft.
- De tekst die ik in de link zet word ook weergegeven.
- Die tekst staat op de 2e helft van de afbeelding die eigenlijk moet worden verbordgen (de 2e helft en de tekst).
- Als ik de muis over een link zet, word de afbeelding wel goed weer gegeven maar zit de tekst nog steeds op dezelfde plaats eronder.

Voor de duidelijkheid wat plaatjes erbij.
Zo ziet het in FF eruit zonder muisaanwijzer op de goede manier, klikkie
En hier met muisaanwijzer, klikkie

En dit is hoe IE het weergeeft zonder muisaanwijzer, klikkie
En zo met muis aanwijzer, klikkie

Nu heb ik vanalles gevonden over bugs in IE met dit, maar de manier om het op te lossen heb ik niet kunnen vinden...

De codes die ik heb gemaakt en gebruik voor het menu:

Het betreffende menu deel in de html bestanden:

HTML:

<div id="menu">
<li class="home"><a href="index.html">Home</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
<li class="gastenboek"><a href="gastenboek.html">Gastenboek</a></li>
<li class="auto"><a href="auto.html">Auto's</a></li>
<li class="afbeelding"><a href="afbeelding.html">Afbeeldingen</a></li>
<li class="apparatuur"><a href="apparatuur.html">Apparatuur</a></li>
<li class="download"><a href="download.html">Downloads</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li class="geschiedenis"><a href="geschiedenis.html">Geschiedenis</a></li>
<li class="link"><a href="link.html">Links</a></li>
</div>

Het menu gedeelte van de style.css:

Cascading Stylesheet:

#menu {background-color: #0c1114;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 18px;
    width: 178px;
    height: 450px;
    float: left;
    }
#menu ul {list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline;
    }
#menu li { list-style: none;
    float: center;
    margin: 0px;
    display: inline;
    }
#menu li a { display: block;
    background-repeat: no-repeat;
    }
#menu li a { width: 178px;
    height /**/: 30px;
    padding-top: 30px; 
    height: 0 !important;
    overflow: hidden;
    }
#menu li a:hover { background-position: 0 -30px;
    }
#menu li.home a { background-image: url(layout/home.jpg);
    }
#menu li.contact a { background-image: url(layout/contact.jpg);
    }
#menu li.gastenboek a { background-image: url(layout/gastenboek.jpg);
    }
#menu li.auto a { background-image: url(layout/auto.jpg);
    }
#menu li.afbeelding a { background-image: url(layout/afbeelding.jpg);
    }
#menu li.apparatuur a { background-image: url(layout/apparatuur.jpg);
    }
#menu li.download a { background-image: url(layout/download.jpg);
    }
#menu li.portfolio a { background-image: url(layout/portfolio.jpg);
    }
#menu li.geschiedenis a { background-image: url(layout/geschiedenis.jpg);
    }
#menu li.link a { background-image: url(layout/link.jpg);
    }

Ik heb op dit moment geen plek om hem ergens te hosten dus ik hoop dat jullie mij via deze manier verbeteringen of tips kunnen geven voor de code.
En ik heb het zo goed mogelijk proberen uit te leggen en met plaatjes de boel proberen te verduidelijker.

Hopelijk is het goed zoe en kunnen jullie mij op weg helpen.

[Sebazzz]

Hoewel de CSS support van zowel IE6 als 7 erg brak is zijn er gelukkig (of juist niet?) verschillen. Dus over welke IE hebben we het hier?

[Joopieboy]

Internet explorer 6.

7 heb ik niet kunnen testen, maar ik ga ervan uit als deze code in 6 werkt dat hij in de laatste hij ook wel goed zal werken.

[ibmos2warp]

Misschien kan je hier wat mee doen? Kijk bijvoorbeeld maar eens naar het eerste after voorbeeld.

[Joopieboy]

Dat zou kunnen, ik ga wat proberen.
Bedankt iig.

Edit: Niet echt een succes, volgens mij is de manier wat ik deed de enigste goede, maar nu nog iets om het in IE goed te laten werken...

Edit2: niet te geloven, ik ben wat gaan schuiven met codes en wat gaan opruimen enzo. Ik had nog een tutorial er bij genomen en vergeleken. En uiteindelijk had ik deze code:

Cascading Stylesheet:

#menu li { list-style: none;
    float: center;
    display: inline;
    margin: 0px;
    }
#menu li a { width: 178px;
    height: 0 !important;
    height /**/: 30px;
    display: block;
    overflow: hidden;
    padding-top: 30px; 
    }
#menu li a:hover { background-position: 0 -30px;
    }
#menu li a:active { background-position: 0 -30px;
    }
#menu li.home a { background-image: url(layout/home.jpg);
    }
#menu li.contact a { background-image: url(layout/contact.jpg);
    }
#menu li.gastenboek a { background-image: url(layout/gastenboek.jpg);
    }
#menu li.auto a { background-image: url(layout/auto.jpg);
    }
#menu li.afbeelding a { background-image: url(layout/afbeelding.jpg);
    }
#menu li.apparatuur a { background-image: url(layout/apparatuur.jpg);
    }
#menu li.download a { background-image: url(layout/download.jpg);
    }
#menu li.portfolio a { background-image: url(layout/portfolio.jpg);
    }
#menu li.geschiedenis a { background-image: url(layout/geschiedenis.jpg);
    }
#menu li.link a { background-image: url(layout/link.jpg);
    }

Beetje verplaatsen en logisch nadenken en het is goed...

Nja, bedankt voor jullie hulp iig.

[ Voor 134% gewijzigd door Joopieboy op 20-11-2007 21:46 ]

[MoietyMe]

Je wilt dus gewoon een mouseover effect op een plaatje/link?

Waarom dan niet gewoon het :hover attribuut gebruiken?

Hier een tutorial: [CSS] Een mouse over maken

Hier een voorbeeld: Hover dmv css

En dat zelfde kun je dan natuurlijk met plaatjes doen

[Joopieboy]

@Good Fella, sorry dat ik zo laat pas reageer maar ik ben een tijd ziek geweest...

Maar goed, alsnog bedankt voor die 2 links, ik heb het nu werkend maar ik kon het idd makkelijker op die manier doen...
Misschien iets voor de volgende keer.