Question

Encountering an unexpected strange icon in the main menu drop-downs containing images as circled in the attached screenshot. This issue persists with IE 8, IE 9, IE 10. Thankfully not IE 11. Link to the website

A compatibility issue or css error? Or does it have anything with doctype declaration? My doctype declaration reads as <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

I'm using a modified version of this drop-down plugin.

Each menu item in the drop-down is a:

<li id="li1" class="li-img">
    <a class="alink" href="somelink.html"></a>
    <img class="img-fade">
</li>


.li-img{
color: #ffffff;
font-weight: bold;
width: 25%;
height: 80px;
margin: 0px;
}

.alink{
position: absolute;
top: 10px;
left: 10px;
opacity: 1 !important;
z-index: 1000;
}

.img-fade{
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
-ms-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
position: absolute;
opacity: 1;
cursor: pointer;
}

.img-fade:hover{
opacity: 0.4;
}

#li1 img{
content:url(../img/dd/private-bank.jpg);
width: 232px;
clip: rect(0px, 232px, 80px, 0px);
}

screenshot

Was it helpful?

Solution

Its a compatibility issue . CSS content doesn't render properly in IE versions below 11.

You should try using conditional css and not set the content for that image using css for IE.

This link should be helpful. http://css-tricks.com/how-to-create-an-ie-only-stylesheet/.

Directly setting the src of the image would be more advisable.

OTHER TIPS

As an added note you should always include an SRC on your image. It is a required attribute for the IMG tag based on HTML standards.

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element:

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

-- Sorry this would be a comment, but I don't have the reputation to place those yet.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top