Strange CSS issue in IE with Hover

Question

So I'm having a pretty annoying issue with IE that I just cannot seem to figure out. The premise is pretty simple I have an image and on hover it display some text with a semi-opaque background. It works great in Firefox, Safari, and Chrome. However, in IE it is not stacking the divs on top of each other and not obeying the float attribute. Here's the CSS:

.new-product-link {
    background:#E0E0E0;
    height:342px;
}
.new-product-link .new-container {
    float:left;
    width:94px;
    height:94px;
    padding:3px;
    margin:6px 5px;
    position:relative;
    left:2px;
    border:1px solid #BBB;
}
.new-product-link .new-container:hover {
    border:1px solid #777;
    cursor:pointer;
}
.newProduct {
    float:left;
    height:100px;
    width:100px;
    position:relative;
    bottom:97px;
    right:3px;
    background:#777;
    opacity:0.75;
    display:none;
}
.newProduct span {
    position:relative;
    top:20px;
    color:#F0F0F0;
    font:bold 14px Arial;
}
.newProduct span span {
    font:11px Arial;
}

JS:

<script>
$(".new-container").hover(
    function () {$(this).children("div").fadeIn(350);},
    function () {$(this).children("div").fadeOut(100);}
);
</script>

HTML:

<div align="center" class="new-container">
    <img src="http://www.example.com/image.png">
    <div class="newProduct">
        <span class="newProduct-item">Item Number<br />
            <span>Click for Additional<br />Information</span>
        </span>
    </div>
</div>

For a working example, please see HERE. Everything seems pretty simple, and works fine in the other major browsers, hopefully someone can see the err of my ways. Thanks for the help and suggestions.

Just a comment, the :hover won't work properly for IE if you use it on something else than an anchor (<a> tag) — jValdron
– jValdron, Commented Dec 2, 2011 at 13:59
@jValdron: That's true for IE6. Which version of IE are you testing in? — Kyle
– Kyle, Commented Dec 2, 2011 at 14:00
I thought that was only <IE8 - that's not a big deal though, all it's doing is changing the border color. — William Orazi
– William Orazi, Commented Dec 2, 2011 at 14:01

Rob · Accepted Answer · 2011-12-02 14:02:08Z

2

You will never get IE to attempt to perform like the other far more modern browsers without a doctype. I suggest using this one if you aren't using any older, deprecated markup:
<!DOCTYPE html>

answered Dec 2, 2011 at 14:02

Rob

15.2k30 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

William Orazi Over a year ago

Yup, I was busy trying to get this done I never even noticed I didn't declare a doctype - thanks for the help, the rest should be pretty easy.

Collectives™ on Stack Overflow

Strange CSS issue in IE with Hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related