[HTML] Afbeeldingslink werkt niet in FF 2 (heel raar ...)

[Verwijderd]

code:

<div style="width:780px"><!--start main foto box -->
<div class="output_fotobox">
<div>
<a href="/DosSantosAveiro">
<img src="http://images.aslpage.be/thumbnails///1270000/DosSantosAveiro20061102130720.jpg" border="0" style="border: 1px solid #BB1023" alt=" " title=" ">
</a>
</div>
<div class="output_fotobox_text">
<img src="http://dev2.aslpage.be/folder_images/layout/male2.gif" alt="">
<a href="/DosSantosAveiro"><strong>DosSantosAveiro</strong></a><br>

<br>Hoeselt<br>
19 jaar<br>
Single<br>
</div>
</div>
<div class="output_fotobox">
<div>
<a href="/G-Iviii">
<img src="http://images.aslpage.be/thumbnails///1996000/G-Iviii20070411220845.jpg" border="0" style="border: 1px solid #BB1023" alt=" " title=" ">
</a>
</div>
<div class="output_fotobox_text">
<img src="http://dev2.aslpage.be/folder_images/layout/male2.gif" alt="">
<a href="/G-Iviii"><strong>G-Iviii</strong></a><br>

<br>Heusden-Zolder<br>
17 jaar<br>
Single<br>
</div>
</div>
</div><!--end main foto box -->

meer bepaald het stukje

code:

<a href="/G-Iviii">
<img src="http://images.aslpage.be/thumbnails///1996000/G-Iviii20070411220845.jpg" border="0" style="border: 1px solid #BB1023" alt=" " title=" ">
</a>

doet het niet ... de afbeelding is niet aan te klikken, geen link, geen handje als cursor, gewoon niets! In Opera, IE6 en IE7 werkt het perfect, de pagina is zelfs valid HTML

zet ik nu dit stukje code los in een html of buiten de class "output_fotobox" dan werkt het wel in firefox 2 zoals het moet ... dus ik vermoed dat het iets te maken heeft mijn divs maar ik kan mij niets bedenken dat er voor zou zorgen dat iets geen link meer is

de css code van dit blokje ...

code:

.output_fotobox {
    position:relative;
    height:225px;
    width:125px;
    background-image:url(http://dev2.aslpage.be/folder_images/layout/bg_foto_gradient.gif);
    background-repeat:no-repeat;
    background-color:#FFFFFF;
    float:left;
    margin-left:2px;
    margin-right:2px;
}
.output_fotobox div {
    width:122px;
    position:absolute;
    top:15px;
    text-align:center; /* center img horizontally */
}
.output_fotobox img {
    position:relative;
}
.output_fotobox_text {
    position:relative;
    line-height:150%;
    font-size:10px;
    border-left:1px dotted #c5c5c5;
    border-right:1px dotted #c5c5c5;
    margin-top:0px;
    min-height:80px;
    padding-top:110px;
}

Een voorbeeld van de code vind je op http://hoaxer.be/raar/raar.html

[CodeCaster]

Gooi de hele html eens door een validator, waarschijnlijk mis je ergens gewoon een sluit-tag.

[Verwijderd]

CodeCaster schreef op dinsdag 17 april 2007 @ 02:22:
Gooi de hele html eens door een validator, waarschijnlijk mis je ergens gewoon een sluit-tag.

de code is valid, het heeft blijkbaar te maken met het de volgende css code

code:

.output_fotobox div {
    width:122px;
    position:absolute;
    top:15px;
    text-align:center; /* center img horizontally */
}

als ik position:relative zet werkt het wel, maar dan is natuurlijk het nut van de css weg... ik vind het gewoon vreemd dat firefox het niet deftig verwerkt, zal dus weinig anders inzitten dan een hack inbouwen ...

[RobIII]

CodeCaster schreef op dinsdag 17 april 2007 @ 02:22:
Gooi de hele html eens door een validator, waarschijnlijk mis je ergens gewoon een sluit-tag.

Verwijderd schreef op dinsdag 17 april 2007 @ 02:16:
[code]
In Opera, IE6 en IE7 werkt het perfect, de pagina is zelfs valid HTML

Nu is het geen gewoonte van me om zoiets 'blind' aan te nemen, maar als je even de code indent had je gezien dat er (op het oog) niks aan mankeert. En de validator is het er mee eensch.

Het probleem zit 'm in de padding-top van output_fotobox_text; als je die vervangt door het volgende werkt het wel:

Cascading Stylesheet:

        .output_fotobox {
            height:225px;
            width:125px;
            background-image:url(http://dev2.aslpage.be/folder_images/layout/bg_foto_gradient.gif);
            background-repeat:no-repeat;
            background-color:#FFFFFF;
            float:left;
            margin-left:2px;
            margin-right:2px;
            border-left:1px dotted #c5c5c5;
            border-right:1px dotted #c5c5c5;
        }
        .output_fotobox div {
            width:122px;
            margin-top:15px;
            text-align:center; /* center img horizontally */
        }

        .output_fotobox_text {
            line-height:150%;
            font-size:10px;
            margin-top:110px;
            min-height:80px;
        }   

Het probleem wordt veroorzaakt omdat de output_fotobox_text div over de container (waarin de foto zich bevindt) heen wordt gegooid. Je moet de border gewoon op de container gooien en een margin-top gebruiken in plaats van een padding. Ofwel kortweg: Je gooit een div over het plaatje, waardoor je effectief 'hovert' over de div en niet de img/anchor en dus geen 'muishandje' krijgt.

Daarnaast snap ik niks van al je position:relative/absolutes. Als je je divs nest kun je met wat paddings/margins en borders op de juiste containers exact hetzelfde bereiken (en ook nog zonder inline styles )

Dit voorbeeld heb ik even vlug vlug 'opgeschoond' na een werkdag van 18+ uur, dus vergeef me als er nog wat 'rommel' in zit. Ik ben naar bed; veel plezier ermee

[ Voor 24% gewijzigd door RobIII op 17-04-2007 02:36 ]

[Verwijderd]

aha, nu zie ik het ja, bedankt voor de oplossing!

Dat de relative/absolutes niet de perfecte oplossing zijn weet ik, ik ben gewoon al blij dat het in alle browsers goed werkt

Zal voor de toekomst zijn het optimaliseren van de css

[ Voor 66% gewijzigd door Verwijderd op 17-04-2007 02:39 ]