mailto IE issue

Question

What I basicly need is a big image that is clickable and links to the actual site (this works), and on top of that image an area where an email adress resides, that is clickable aswell and opens an email client window (this works for all browsers except IE)

I've been trying to solve the problem with the use of a z-index in IE (without success) I've been looking at the following z-index issue However, when trying to apply it I don't get the wanted result. I really don't know how to fix this without the use of javascript (which I want to avoid at all costs)

Example of the site: thuisverplegingjacobs.be

clickable area should where the email envelope is at the bottom, however it is behind the clickable area of the image. I don't know how to fix this.

score 0 · Accepted Answer · answered Sep 09 '12 at 19:25

Usually, I would chop that image up into 3 rectangular ones - the header, the body and the email part.

Since it's not like that I've just used the trick used for the email field, explicitly setting divs to cover the header and body (of the image) I've then set the links within these elements to fill them - effectively giving you a div with a href.

As I started typing this, I remembered about image-maps - perhaps they would be a better implementation?

Anyway, I've just replaced everything below your </script> tag. It's fine with IE8 and current Chrome.

    <style>
        /* set the image as a background-image of a div */
        div #splash-image
        {
            background-image: url('Thuisverpleging Eric Jacobs_files/splash_image2.png');
            width: 1057px;
            height: 863px;
        }

        /* resposition it */
        #clickable-email
        {
            left: 216px;
        }

        #greyHeader a, #blueMain a
        {
            display: block;
        }

        #greyHeader
        {
            position: absolute;
            left: 539px;
            top: 20px;
            width: 596px;
            height: 90px;
        }
        #greyHeader a{ height: 90px; }

        #blueMain
        {
            position: absolute;
            left: 216px;
            top: 110px;
            width: 916px;
            height: 580px;
        }
        #blueMain a{ height: 580px; }

    </style>
</head>
<!-- 
Usage of certain elements
-----------------------------
class: 
- center en width-x-px moeten samen voorkomen om te werken in alle browsers
- height-x moet voorkomen op een div

- 
-->
<body class="wpc hpc no-padding-margin center-ie splash">
    <!-- Content of the site -->
    <div id="splash-content">
        <div id="splash-image" class="center">
            <a href="http://www.thuisverplegingjacobs.be/site/index.php"></a>
        </div>
    </div>

    <div id='greyHeader'>
        <a href="http://www.thuisverplegingjacobs.be/site/index.php">&nbsp;</a>
    </div>

    <div id='blueMain'>
        <a href="http://www.thuisverplegingjacobs.be/site/index.php">&nbsp;</a>
    </div>

    <div id="clickable-email">
        <a href="mailto:info@thuisverplegingjacobs.be">&nbsp;</a>
    </div>
</body>
</html>

score 0 · Answer 2 · answered Sep 10 '12 at 17:40

You've given me the perfect example to do what I wanted to do. I don't know why it didn't occur to me in the first place to set the image as background and making a clickable div.

For those who are interested. This is the final layout:

<body class="wpc hpc no-padding-margin center-ie splash">

 <div id="splash-content">
  <div id="splash-image" class="center">
    <a href="/site/index.php"><span>&nbsp;</span></a>
    <div id="clickable-email">
        <a href="mailto:info@mysite.com"</a>
    </div>
  </div>
 </div>

</body>

and with the following styles for the email

#splash-image{
background-image: url('../images/design/splash_image2.png');
width: 1057px;
height: 863px;
position:relative;/* so #clickable-email is positioned right */
}

#splash-image a{
display:block;
cursor:pointer;
}

/*required to give full size dimensions to the link*/
#splash-image a span{
display:block;
width: 1057px;
height: 863px;
}

#clickable-email{
position:absolute;
top:690px;
left:73px;
width:595px;
height:87px;    
}

#clickable-email a{
display:block;
text-decoration:none;
height:87px;
}

#clickable-email a span{
display:block;
height:87px;
}

By placing the clickable-email within the splash-image, and by giving #splash-image a position:relative. We make sure that the absolute positioning of the #clickable-email doesn't go haywire when the screen is of a different size than expected. This way we keep the clickable area exactly on top of the correct coordinates of the background image.

mailto IE issue

2 Answers2