I think these edits may make a difference, although I didn't download your images or javascript files, but I could see a difference in my test as the three grid4 divs were side by side. You shouldn't use id more than once so I changed them to class, but that wasn't the cure, other edits cured my test in IE7 and Firefox.
Code:
/*changed from #grid4 to .grid4*/
.grid4 {
float: left;
width: 300px;
margin-top: 20px;
margin-right: 8px;
margin-bottom: 20px;
margin-left: 8px;
}
.grid4 a { display: block; width: 300px; margin: 0; } /*new style*/
#main {
/*overflow:auto; deleted style*/
padding-bottom: 35px; /* must be same height as the footer
*/
margin: 0px auto;
width: 962px;
height: 100%;
background-color: #000;
border-left:2px solid #FFF;
border-right:2px solid #FFF;
}
Code:
<div style="clear: both;">
<div class="grid4">
<div class="centreren"><p><a
href="karel_appel.php">Karel Appel</a></p></div>
<a href="karel_appel.php" class="noline"><img
class="border" width="300" src="Appel/2.jpg"/></a>
</div>
<div class="grid4">
<div class="centreren"><p><a
href="alechinsky.php">Pierre Alechinsky</a></p></div>
<a href="alechinsky.php" class="noline"><img
class="border" width="300" src="Alechinsky/3.jpg" /></a>
</div>
<div class="grid4">
<div class="centreren"><p><a
href="corneille.php">Corneille (Guillaume Cornelis
van Beverloo)</a></p></div>
<a href="corneille.php" class="noline"><img
class="border" width="300" src="Corneille/6.jpg"/></a>
</div> <!--<br/> deleted-->
</div>
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.