IE 7 is staggering the images, FF and Chrome see them fine - HELP please

I have tried adding clear:both, overflow:hidden and a few other options but I cannot seem to figure out why on earth the coding is throwing my images into a staircase look (staggering)

Any help would be awesome

s91532.gridserver.com

Images at the bottom starting with "What we're About"

Thanks in advance

 

Try loosing the <li> and </li>.

They serve no purpose and the </li> sometimes tend to force a break.

 

I looked at your css code. The HTML for the bottom images is actural 3 column layout. But the CSS for setting the 3 column is on <a> tag, rather than <li>.

			<div id="bottom-buttons">
			      <li class="left"><a href="/what-were-about">What We're About</a></li>
			      <li class="middle"><a href="/impact-groups">Small Groups</a></li>
			      <li class="right"><a href="/socialmedia"><strong>HVC and Social Media</a></li>
			</div>

HTML:

I made some modification on the CSS

#bottom-buttons li {   
	list-style-type: none;
	width: 301px;
	float:left;
	margin-right:15px;
	padding:0;	
}

#bottom-buttons li.left a:link {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; display:block; text-indent:-9999px;}
#bottom-buttons li.left a:visited {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; display:block;  text-indent:-9999px;}
#bottom-buttons li.left a:hover {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; background-position: 0 -174px;  display:block;   text-indent:-9999px;}
#bottom-buttons li.left a:active {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomleft.jpg) no-repeat; background-position: 0 -174px;  display:block;   text-indent:-9999px;}

/* Middle Button on Bottom */
#bottom-buttons li.middle a:link {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat;  display:block;  text-indent:-9999px;}
#bottom-buttons li.middle a:visited {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat;  display:block;   text-indent:-9999px;}
#bottom-buttons li.middle a:hover {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat; background-position: 0 -174px;  display:block;  text-indent:-9999px;}
#bottom-buttons li.middle a:active {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottommiddle.jpg) no-repeat; background-position: 0 -174px;  display:block;   text-indent:-9999px;}

/* Right Button on Bottom */
#bottom-buttons li.right a:link {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat;  background-color:#cfcfcf;display:block;   text-indent:-9999px;}
#bottom-buttons li.right a:visited {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat;  display:block;   text-indent:-9999px;}
#bottom-buttons li.right a:hover {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat; background-position: 0 -174px;   display:block;  text-indent:-9999px;}
#bottom-buttons li.right a:active {width: 301px; height: 174px; background: url(/wp-content/themes/newscast/images/skin1/bottomright.jpg) no-repeat; background-position: 0 -174px;   display:block;  text-indent:-9999px;}

Code (markup):

 

Thank you very much, I am trying the newest code now.

 

When I had something similar in Wordpress (ie6 showed different spacing), I actually ended up calling different css sheets for ie6 and other browsers. That way I could position things exactly for ie6 in one style sheet and position exactly in other browsers in another style sheet.