CODEWITHSUNDEEP
htmlcss
Rui He Zhengrui
Rui He Zhengrui

Reputation: 55

Div class :hover not working properly in IE

Please take a look at the link below using Internet Explorer

http://mojogobbles.com.sg/cupcake-menu/

It seems that when i try to hover over a declared div class, the :hover does not work properly, but in chrome it works perfectly. Any idea why?

CSS solutions only please!

Here is the CSS coding

#f12{
    width: 400px;
    height: 30px;
    left: 470px;
    top: 1090px;
    position: absolute;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=0);
    float: left;
    border-width: 1px;
    border-style: inset;
    z-index: 99999;
}

#f12:hover ~ #floater{
    background:url(images/flavours/f12.jpg);
    width: 320px;
    height: 320px;
    opacity: 100;
    top: 30%;
    left: 0%;
    filter: alpha(opacity=100);
    float: left;
    position: fixed;
}

#f13{
    width: 100px;
    height: 50px;
    left: 550px;
    top: 460px;
    position: absolute;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=0);
    float: left;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
    transition: 1s all;
    border-width: 1px;
    border-style: inset;
}

#f13:hover ~ #floater{
    background: url(images/flavours/f12.jpg);
    opacity: 100;
}

#floater{
    width: 320px;
    height:320px;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 30%;
    filter: alpha(opacity=0);
    float: left;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    border-width: 1px;
    border-style: inset;
    filter: alpha(opacity=100);
}

Upvotes: 2

Views: 2861

Answers (1)

Rob
Rob

Reputation: 15150

You have two doctypes and the first one is wrong putting IE into quirks mode. Just delete both of them and use this one: <!DOCTYPE html>

Upvotes: 2

Related Questions