Pregunta

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

¿Fue útil?

Solución

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.

Otros consejos

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top