IE not displaying images

[joejoeknows]

I'm starting to get the hang of this CSS. I can't figure this one out though. I am working on a project for school and, as always, I run into IE problems. IE is not displaying a few img's in the header and I can't determine what is causing this to happen. Here is the code:
Any ideas?

<!--Begin Header-->
<div id="topsection">
<img src="images/MadLibsTM.gif" width="" height="" alt="" />
 
<a href="index.html"><img src="images/homeDOWNtab.gif" width="" height="" alt="" id="Home" class="tabs"/></a>
<a href="about/index.html"><img src="images/aboutDOWNtab.gif" width="" height="" alt="" id="About" class="tabs"/></a>
<a href="play/index.html"><img src="images/playDOWNtab.gif" width="" height="" alt="" id="Play" class="tabs"/></a>
<a href="make/index.html"><img src="images/makeDOWNtab.gif" width="" height="" alt="" id="Make" class="tabs"/></a>
<a href="help/index.html"><img src="images/helpDOWNtab.gif" width="" height="" alt="" id="Help" class="tabs"/></a>
 
<img src="images/RightSpace.gif" width="" height="" alt="" style="margin-top:38px"/>
</div>
<!--End Header-->

body,html{
background: #95c9b8;
margin:0;
padding:0;
height:100%;
}
 
#maincontainer{
background: #fcffa3;
width: 47.5em; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
height:100%;
}
 
#topsection{
background: #fcffa3;
height: 78px; /*Height of top section*/
padding:0;
margin-bottom:-8px;
}
 
#topsection img{
 float:left;
}
 
#contentwrapper{
background: #fcffa3;
float: left;
width: 100%;
}
 
#contentcolumn{
margin: 0 43px 0 82px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
height:100%;
}
 
#leftcolumn{
float: left;
width: 82px; /*Width of left column in pixel*/
margin-left: -47.5em; /*Set margin to that of -(MainContainerWidth)*/
height:92%;
background: #fcffa3;
background-image: url(images/LeftMargin.gif);
background-repeat: repeat-y;
background-position: 0px 30px;
}
 
#rightcolumn{
float: left;
width: 43px; /*Width of right column*/
margin-left: -43px; /*Set left margin to -(RightColumnWidth)*/
height:92%;
background: #fcffa3;
background-image: url(images/RightMargin.gif);
background-repeat: repeat-y;
background-position: 0px 30px;
}
 
#footer{
clear: left;
width: 100%;
background: #fcffa3;
text-align: center;
padding: 0px 0;
}
 
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
 
.tabs{
border:none;
width:82px;
height:32px;
float:left;
display:block;
margin-top:38px;
/*margin-left:-1px;
margin-right:-4px;*/
}

[Paul O'B]

HI,

I can't really tell without seeing the images but I'd hazard a guess that this is causing you some problems.

<img src="images/MadLibsTM.gif" width="" height="" alt="" />

I expect IE will render that image at zero height and width.

[Dan Schulz]

Also note that what you have is a list of links, so a list would be the appropriate markup to use here. As for the link paths, there's no need to declare index.html after the directory path since index.html is the default on most servers anyway (though IIS uses default.htm or default.html instead).

If you could show me the images you're using (preferably via a live link to a test page) I could show you how to mark this up so it works properly (practically) regardless of what browser is being used.

[joejoeknows]

OK, so you can't declare an empty height and width for img tags for IE, good to know. Thanks Paul.

[Dan Schulz]

And it's never a good idea either since the browser has to waste processing time trying to guess how wide and tall those images are in the first place. By giving them the information they need, browsers can speed up the time it takes to render a Web page.