How can I make these CSS absolute positions work in IE?


Tags: css,css-position

Problem :

Please look at the code below. If you look at the diagram of the body, each colour represents different content on the right. However, these links won't work in IE, I assume due to the CSS I have written.

Can anyone shed some light on how I can replicate this in IE?

HTML:

<div id="male">
    <img src="male1.png" alt="male1 Compensation Calculator" title="male" width="130" height="300" class="alignleft size-full wp-image-117" /></p>
    <div class="head"><span class="whole fakelink"></span></div>
    <div class="neck"><span class="whole fakelink"></span></div>
    <div class="arm1"><span class="whole fakelink"></span></div>
    <div class="arm2"><span class="whole fakelink"></span></div>
    <div class="torso"><span class="whole fakelink"></span></div>
    <div class="legs"><span class="whole fakelink"></span></div>
</div>

CSS:

div.head {
    position: absolute;
    width: 70px;
    margin-left: 31px;
    height: 70px;
}
div.neck {
    position: absolute;
    height: 6px;
    width: 18px;
    margin: 70px 0px 0px 56px;
}
div.arm1 {
    position: absolute;
    height: 105px;
    width: 30px;
    margin: 77px 0px 0px 100px;
}
div.arm2 {
    position: absolute;
    height: 105px;
    width: 30px;
    margin: 77px 0px 0px 0px;
}
div.torso {
    position: absolute;
    height: 118px;
    width: 70px;
    margin: 77px 0px 0px 31px;
}
div.legs {
    position: absolute;
    height: 105px;
    width: 69px;
    margin: 195px 0px 0px 31px;
}
.whole {
    width:100%;
    height:100%;
    display:block;
}
.fakelink {
    color:white;
    font-weight:bold;
}
.fakelink:hover {
    cursor: pointer;
    text-decoration:none;   
}


Solution :

I know of only two solutions to fix this issue, though they both ultimately come down to needing a background:

Option 1
Set a background-color on .fakelink that is not transparent. Whilst clearly in your case this wouldn't be very helpful it will illustrate the need for a background.

If you were only needing to support IE9, I would suggest using rgba with a low alpha opacity:

.fakelink{ background-colour: rgba(255,255,255,0.01) }

Option 2
Use a small transparent .png or .gif and tile it as the background-image for .fakelink


    CSS Howto..

    HTML/CSS: How to center floating divs?

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    How to reverse direction of moving div once it reaches side of screen?

    How do I create two columns using CSS?

    How to reduce space between two words vertically in css/html

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How do I center a Bootstrap div with a 'spanX' class?

    how to css absolute positioning right way

    How do you make an input element fill parent?

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    How to simplify my CSS stylesheet?

    How to center absolutely positioned elements in css for a pdf

    Adding buttons to slideshow

    How to set color of the Button with jQuery UI?

    How to put padding on SPAN only when not empty

    How to write shorter css code select child?

    Blogger Template: how to change the color of the border css

    Mobile-Friendly CSS - How to hide a sidebar? [closed]

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    Meteor: how to style useraccounts

    How to show Only 4 slides in a row using Bxslider

    How to insert HTML symbol after Bootstrap panel-heading in CSS?

    How to correct checkbox position, when it is one the same page with jQuery UI input text?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How to delete css right or bottom on drag

    Sitefinity 5.3: How do I order my CSS?

    How to silently hide “Image not found” icon when src source image is not found

    CSS border - how to populate content inside div with border

    How to make div box actually touching the side of the browser as mine has a gap?

    Explaining how to use classes with SASS to a Python thinker