Images not showing up in IE 9

html css internet-explorer

14,141

Solution 1

It's the width/height attributes on your images that are causing the problem. You have the width and height set to "auto". Either set an explicit width/height:

<img src="zanza/zanza_portrait_top.png" width="179" height="198" border="0" alt="zanza">

or remove the width and height attributes:

<img src="zanza/zanza_portrait_top.png" border="0" alt="zanza">

Solution 2

IE is messing up the image width and height. I'm sorry that I can't help more, but removing the height and width elements of each image makes the images show up for me.

14,141

Author by

Admin

Updated on June 04, 2022

Comments

Admin almost 2 years

Ok so I'm nearly done creating my first website. However it doesn't seem to run well in IE. It runs fine in Firefox and Chrome. The background loads but the main problem is that the picture links seem broken? Any help would be greatly appreciated.

My site: ngkevin-art.com

CSS:

body {
    width:auto;
    height:auto;
    background-image:url(images/bg_main2.png);
    background-color:#2d2d2d;
    background-repeat:no-repeat;
    background-position:center;
    margin-top:30px;
}


#container {
    width:1280px;
    height:960px;
    margin-left:auto;
    margin-right:auto;

}

#wrapContact {

    width: 520px;
    height: 100px;
    margin-left:735px;
    margin-top: 10px;
    clear: both;
}

#linked {
    float:left; 
    margin-top:35px;
    width: 175px;   
}

#facebook {
    float:left;
    width: 200px;
    margin-left:32px;
    margin-top:25px;

}

#email {
    float:left;
    width:75px;
    margin-left:35px;
    margin-top:20px;

}

#wrapNav {

    width: 475px;
    margin-left:750px;
    margin-top:60px;
}

#wrapCharacters {

    width: 960px;
    z-index: 3;
    margin: 130px auto auto 75px;
    float:left;
}

.turntable {
    margin: .5% auto auto auto;

}

#zanza {

    float:left;
}

#titan {

    float:left;
    margin-left: 10px;
}

#rockBeast {

    float:left;
    margin-left: 10px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kevin Ng Art Portfolio</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<link rel="stylesheet" type="text/css" href="default3.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />

</head>

<body>

<div id="container">

        <div id="wrapContact">
            <div id="linked">
                <a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b"> 
                <img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
            </div>

            <div id="facebook">
                <a href="http://www.facebook.com/profile.php?id=1309131548"> 
                <img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
            </div>

            <div id="email">
                <a href="mailto: [email protected]"> 
                <img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
            </div>
        </div> <!-- End "wrapContact"> -->

        <div id="wrapNav">

            <a href="index.html">                           
            <img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>

            <a href="demo.html">                            
            <img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>

            <a href="about.html">                           
            <img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>

        </div> 
        <!-- End "wrapNav"> -->  

        <div id="wrapAbout">

            <div id="picture">
                <img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
                <div id="text2">
                    <h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
                        and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
                </div>
            </div>

            <div class="text">        
                <h1> Resume: <br/>
                <br/> Email: <br/> <br/>
                <br/> About Me:</h1>            
            </div>

            <div class="text3">
                <h1> <a href="resume/Kevin Ng Resume2.doc"> Click Here </a>
                <br/> <br/> <a href="[email protected]"> [email protected] </a> <br/> 
                <br/> <br/> <font size="4"> 
                    My desire to be in the game development industry is to work with other individuals that take pride in creating a game, 
                    something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and 
                    artistic skills for that purpose. <br/> <br/>

                    I believe the key to creating memorable game art, whether it be characters or environments, is the story. 
                    Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result, 
                    I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda 
                    showed me a world of endless imagination.  <br/> <br/>

                    The characters which are the focal point of the story, their goals and motivations, their trials and tribulations, 
                    their victories and defeats... These are the things I think about constantly when I look at them. 
                    A character without depth doesn't exist, but if they do, I can only imagine how boring that would be.                     
                </font></h1>
            </div>

        </div>

    </div><!-- End "container" -->

</body>
</html>