Text pulled to bottom in IE

I have this ul li I’m trying to add to the content of a site. Everything looks ok except when I view the page on IE. The title and description are both pulled to the bottom. How can I stop IE from pulling the title and description to the bottom?

<ul class="contentBoxes">

  <a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"><li><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
  <a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"><li><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
  <a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"><li class="nomar"><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li></a>
</ul><!--end of boxes-->

ul.contentBoxes {
    background-color: #FFFFFF;
    float: left;
    margin: 10px 0 3px;
    width: 960px;
    border-color: #D3D3D3;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 3px;
    padding: 8px 0;
	height:98px;
	margin-bottom: 8px;
}
ul.contentBoxes li {
    display: block;
    float: left;
    height: 101px;
    margin-right: px;
    margin-left: 7px;
    width: 310px;
}
ul.contentBoxes li.nomar {
    margin: 0;
    margin-right: 0px;
	margin-left: 7px;
}
ul.contentBoxes li div {
    display: block;
    float: left;
    margin: 15px 0 0 13px;
    width: 175px;
}
ul.contentBoxes li img {
    float: right;
    margin: 10px 30px 0 0;
}
ul.contentBoxes li h4 {
    color:#3B6B82 !important;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
}
ul.contentBoxes li p {
    color: #727272;
    float: left;
    font-size: 12px;
    width: 180px;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 12px;
    overflow: hidden;
    padding: 0px;
}

p.images {
    display: block;
    float: left;
    margin: 10px 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

can you attach the html and the css file?

There simply isn’t enough width to have the text on the same line

<!doctype html>
<html>
<head>
<title>asdf</title>
<style type="text/css">
*{margin:0;}
ul.contentBoxes {
    background-color: #FFFFFF;
    float: left;
    margin: 10px 0 3px;
    width: 960px;
    border-color: #D3D3D3;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 3px;
    padding: 8px 0;
	height:98px;
	margin-bottom: 8px;
}
ul.contentBoxes li {
    display: block;
    float: left;
    height: 101px;
    margin-right: px;
    margin-left: 7px;
    width: 310px;
}
ul.contentBoxes li.nomar {
    margin: 0;
    margin-right: 0px;
	margin-left: 7px;
}
ul.contentBoxes li div {
    display: block;
    float: left;
    margin: 15px 0 0 13px;
    width: 175px;
}
ul.contentBoxes li img {
    float: right;
    margin: 10px 0px 0 0;
}
ul.contentBoxes li h4 {
    color:#3B6B82 !important;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
}
ul.contentBoxes li p {
    color: #727272;
    float: left;
    font-size: 12px;
    width: 180px;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 12px;
    overflow: hidden;
    padding: 0px;
}

p.images {
    display: block;
    float: left;
    margin: 10px 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
</style>
</head>

<body>
<ul class="contentBoxes">

  <li><a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
  <li><a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
  <li class="nomar"><a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></a></li>
</ul><!--end of boxes-->
</body>
</html>

I switched up the HTML too, you had <a>'s as the direct children of <ul> which isn’t allowed. So I put it inside the <li>. Though still invalid because you have it wrapping around a <div> and <p> which are block elements. If you wanted it to encompass the entire box, you could have it sitting empty as the first child of <li> and then give it position:absolute; and give it width/height to overlay the entire box. Of course, the <li> will need position:relative to work :). In the below code, I added CSS for the anchors, along with setting position:relative on the <li>.

<!doctype html>
<html>
<head>
<title>asdf</title>
<style type="text/css">
*{margin:0;}
ul.contentBoxes {
    background-color: #FFFFFF;
    float: left;
    margin: 10px 0 3px;
    width: 960px;
    border-color: #D3D3D3;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 3px;
    padding: 8px 0;
	height:98px;
	margin-bottom: 8px;
}
ul.contentBoxes li {
    display: block;
    float: left;
    height: 101px;
position:relative;
    margin-right: px;
    margin-left: 7px;
    width: 310px;
}
ul.contentBoxes li.nomar {
    margin: 0;
    margin-right: 0px;
	margin-left: 7px;
}
ul.contentBoxes li div {
    display: block;
    float: left;
    margin: 15px 0 0 13px;
    width: 175px;
}
ul.contentBoxes li img {
    float: right;
    margin: 10px 0px 0 0;
}
ul.contentBoxes li h4 {
    color:#3B6B82 !important;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
}
ul.contentBoxes li p {
    color: #727272;
    float: left;
    font-size: 12px;
    width: 180px;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
    font-size: 12px;
    overflow: hidden;
    padding: 0px;
}
ul.contentBoxes li a
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

p.images {
    display: block;
    float: left;
    margin: 10px 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
</style>
</head>

<body>
<ul class="contentBoxes">

  <li><a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"></a><img src="/images/ebags.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
  <li><a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"></a><img src="/images/abt.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
  <li class="nomar"><a href="http://www.mysite.com" target=
    "_blank" rel="nofollow"></a><img src="/images/godaddy.png" width="90" height="78" alt="" /><div><h4>Title of Image</h4><p>Some description goes in here.</p></div></li>
</ul><!--end of boxes-->
</body>
</html>

Hope this helps :).

Awesome, that took care of it, I really appreciate the help.

Glad I was able to help :). You’re welcome.