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
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):
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.