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..

    How to make the text that are typed inside the input to appear into a seperate div

    How to include transparency in html/css?

    How to reset CSS3 *-transform: translate(…)?

    How to make a hidden face appear from the top using -webkit-transform: rotateX();

    How can I create Javascript Buttons with Themes?

    how to hide and show a div that is inside of a form using only javascript and css

    how to center and Crop an image to square with CSS

    how to see which CSS class is applied or where is that font-size coming from, from which class or tag

    How to edit menu in header - wordpress

    How to apply CSS Style to QMenu via an entire MainWIndow

    How to create vertical ruler in CSS/html?

    How to visually indicate current page in ASP.NET MVC?

    How to lazyload svg image given in css?

    How do I obtain a floating element's left offset while it is outside the viewport?

    How to keep styles after animation?

    How to Stop jQuery from Buffering Hover Effects?

    how to make certain css 3d effect works in IE

    JavaScript- How to change “message” div to yellow

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    How to target CSS class names that start with digit

    How to center FontAwesome icon in css before content vertically

    How to show html template using inline styles only?

    How to set width of a
    in CSS to X number of pixels less than the width:auto?

    How to differentiate between two class of same name in different css on same page

    How do i split user inputed text into individual characters?

    How to make input box show up from right to left?

    Weird css box-sizing in bootstrap 3. How to get rid of horizontal slider

    JQuery Animate() showing sticky behaviour with other elements in the same class

    How to avoid HTML element being matched by CSS and reset it?

    how to set a specific css class to a widget in gtk3? (c)