Question

I have kind of a weird problem ..

Something that isn’t working on ff & safari but IS working on IE on itself is already pretty weird but I can’t seem to figure out this problem..

On my site http://www.turnkring-excelsior.be there are links to social media in the top right corner (youtube, facebook and flickr), on IE they are linked, on ff & safari they aren’t ..

Now, I narrowed the problem down .. It seems to be related to the width of my wrapper div, in my css file I declare the width of this div to 1000px. If I enlarge this to say 1200px, the links DO work on FF & safari..

If I enlarge it just a bit, like say 1050, the flickr link works only (the one at the far right)

Does anyone have any suggestions ?

Answer 1

This is a combination Positive Margins errors, where you have attempted to line up your divs the way you want them. Essentially you’ve managed to place one div over another, hence blocking the links.

#social currently has a positive top-margin of 23px, whereas #image has a number of margins defined on nearly all sides presumably to force it over to the right, below the social links? Due to the margins of #image overlapping with the content of #social the browser thins that #image is another layer.

You will need to work out a better way of positioning these, perhaps two container divs acting as columns floated.

Pseudo (not tested):

<div id="container">  
    <div id="top-bar">  
        <div id="menu" />  
        <div id="social" />  
    </div>
    <div id="left">
        content n stuff
    </div>
    <div id="right">
        <div id="image" />
    </div>
</div>