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: ngkevin.3dartist@gmail.com">
<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="ngkevin.3dartist@gmail.com"> ngkevin.3dartist@gmail.com </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>
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:
or remove the width and height attributes: