CODEWITHSUNDEEP
htmlcssinternet-explorercross-browser
SilentDev
SilentDev

Reputation: 22747

Internet Explorer not displaying image loaded by CSS

This is my HTML (the CSS is part of the HTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <div id='header'>

            <table id='headerBar'>
                <tr>
                    <td><a href ='#' id='homeIcon'></a></td>
                    <td><a href ='#' id='myProfileIcon'></a></td>
                    <td><a href ='#' id='settingsIcon'></a></td>
                </tr>
            </table>
        </div>
    </body>
</html>

<style>
    #homeIcon {
        content:url('shipping3.png');
    }
    #settingsIcon {
        content:url('shipping3.png');
    }
    #myProfileIcon {
        content:url('shipping3.png');
    }
</style>

When I open this file up in Google Chrome, it works perfectly fine and displays the 3 images. When I open it up in Internet Explorer, none of the 3 images are shown (It is just a blank page). Any idea why? (I tried viewing it from Internet Explorer 10, 9, 8, and 7. None display any of the 3 images).

Upvotes: 3

Views: 5448

Answers (3)

midstack
midstack

Reputation: 2123

Because the content property is used with the ::before and ::after pseudo-elements to generate content in a document.

http://www.w3.org/wiki/CSS/Properties/content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
    #homeIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
    #settingsIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
    #myProfileIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
</style>
</head>
<body>
    <div id='header'>

        <table id='headerBar'>
            <tr>
                <td><a href ='#' id='homeIcon'></a></td>
                <td><a href ='#' id='myProfileIcon'></a></td>
                <td><a href ='#' id='settingsIcon'></a></td>
            </tr>
        </table>
    </div>
</body>
</html>

http://jsfiddle.net/w7c27/3/

Upvotes: 2

Aliasgar Rajpiplawala
Aliasgar Rajpiplawala

Reputation: 656

You can simply use background:url() to add image. As the a tag was empty so in IE it wasn't displaying the image. Here you go

<!DOCTYPE html>
<html>
<head>
<style>
    #homeIcon {
        background:url('shipping3.png');
        height:300px;
        width:100px;

    }
    #settingsIcon {
        background:url('shipping3.png');
    }
    #myProfileIcon {
        background:url('shipping3.png');
    }
</style>
</head>
    <body>
        <div id="header">
            <table id='headerBar'>
                <tr>
                    <td><a href ="#" id="homeIcon">Lorem Ipsum</a></td>
                    <td><a href ="#" id="myProfileIcon"></a></td>
                    <td><a href ="#" id="settingsIcon"></a></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Upvotes: 1

Gabriel Cliseru
Gabriel Cliseru

Reputation: 99

I have removed most of the code and left an example.

<td width="100" height="100" id='homeIcon'><a href ='#'></a></td>
<td><a href ='#' id='myProfileIcon'></a></td>
<td><a href ='#' id='settingsIcon'></a></td>

<style>
    #homeIcon {
       background:url("shipping3.png");
    }
...
</style>

The tag my itself does not have a size, especially when empty. It is a no width/height container of nothing.

For backwards compatibility reasons the correct syntax for linking an image as a background is background:url("shipping3.png")

I have added the width and height of the in line in order to observe easier where we specify them.

Upvotes: 2

Related Questions