Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Link werkt niet door overlappende div? (FF)

None
8 antwoorden
  • Beste iedereen,

    Stuit ik toch weer op een apart verschil tussen IE en Firefox…

    Het gaat over MTVNL.nl

    Het 'tabje' aan de rechterkant die linkt naar een andere taal zorgt ervoor dat de Home-link niet meer werkt, alsof de div#sticker (waarin het taal-tabje staat) er overheen valt. Dit is niet zo in IE.

    Vind het raar dat Firefox dit zo doet, of kan iemand dit verklaren?
    En hopelijk ook de juiste oplossing kent! Tnx!


    (css van div#sticker)
    [code:1:e46df9dbad]div#sticker {
    position: relative;
    text-align: right;
    margin-top: 10px;
    margin-right: -10px;
    }[/code:1:e46df9dbad]
  • Het gaat in dit geval niet om de div#sticker, maar om het <h2> element. <h2> is een block element. Als je die een maximale breedte geeft, plus een float naar rechts, moet het goed gaan.
    Dus:[code:1:d3bbcb751a]h2 { float:right; width: 100px;}[/code:1:d3bbcb751a]
  • Dank voor je antwoord. Echter ben ik zo dom geweest de <h2> elementen te laten staan (het was eerst een tekstlink ipv een img); hier ben ik dus niks mee van plan.

    Tenzij die h2 toch nodig is ;) gaat het dan toch alleen om de div#sticker, en is er alleen in Firefox een probleem.

    Op MTVNL.nl werkt de Home-link nu niet zoals ik hiervoor al aangaf:
    [code:1:2ad32a6ca1]div#sticker {
    position: relative;
    text-align: right;
    margin-top: 10px;
    margin-right: -10px;
    }[/code:1:2ad32a6ca1]

    Op een testpagina werkt de Home-link wel, maar komt een ander ongewenst effect met de volgende code:
    [code:1:2ad32a6ca1]div#sticker {
    float: right;
    margin-top: 10px;
    margin-right: -10px;
    }[/code:1:2ad32a6ca1]
    De HTML is gewoon
    [size=9:2ad32a6ca1]<div id="sticker">
    <a href="index_en.html"><img src="img/english_tab.png" alt="english"></a>
    </div>[/size:2ad32a6ca1]

    Ligt nu de oplossing hier ergens tussenin?
  • Ik snap die [i:b794aae136]position: relative;[/i:b794aae136] in [i:b794aae136]#sticker[/i:b794aae136] niet zo goed, die heeft op deze manier geen enkele functie. ;)

    Volgens een snelle test zou het volgende moeten werken:[code:1:b794aae136]div#sticker {
    position: absolute;
    right: 0;
    margin-top: 10px;
    margin-right: -10px;
    }[/code:1:b794aae136]Hopelijk geeft dit voor jou een werkbare oplossing.

    - Bas
  • Bas, je hebt me verlicht ;) Super, tnx!

    (firefox ook altijd :P)
  • PS, ik zie wel dat er nog een verticaal verschil is tussen IE en Firefox.. ik ga er nog naar kijken maar misschien dat hier ook al direct een verklaring voor is?
  • Screenshots?

    [i:ff5ed2bfb9]* Bas is lui… *[/i:ff5ed2bfb9]

    - Bas
  • In IE zit het tabje wat hoger, is het niet raar dat ze niet op dezelfde hoogte komen..?


    [b:826fa661d8]IE[/b:826fa661d8]
    [img:826fa661d8]http://www.mtvnl.nl/mtvnl_ie.jpg[/img:826fa661d8]


    [b:826fa661d8]Firefox[/b:826fa661d8]
    [img:826fa661d8]http://www.mtvnl.nl/mtvnl_ff.jpg[/img:826fa661d8]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.