Hi all, i was hoping someone here could clue me in to what i have done wrong with my code, all i'm after is a simple left to right image gallery showing a row of photos.
I'm a mac user so i was able to check the results in Firefox, Safari and Opera and it displayed just fine, exactly as i wanted it, but when i finally got to check it on Internet Explorer the other day i found that the unordered list images slope down to the right, it's very annoying and i can't seem to get it to display right.
Here is the code:
HTML
<ul class="photos">
<li class="photo01"><a href="gallery01.html"></a></li>
<li class="photo02"><a href="gallery02.html"></a></li>
<li class="photo03"><a href="gallery03.html"></a></li>
<li class="photo04"><a href="gallery04.html"></a></li>
<li class="photo05"><a href="gallery05.html"></a></li>
<li class="photo06"><a href="gallery06.html"></a></li>
</ul>
CSS
.photos {
list-style-type: none;
height: 112px;
}
.photos li a {
display: block;
float: left;
margin-left: 20px;
}
.photo01 a, .photo02 a, .photo03 a, .photo04 a, .photo05 a, .photo06 a,
.classphoto01 a, .classphoto02 a, .classphoto03 a, .classphoto04 a, .classphoto05 a, .classphoto06 a {
width: 78px;
height: 112px;
margin: 0px 5px 0px 5px;
}
And here is a link to the site it is on: bgirl-firefly.co.uk
I'm thinking of installing Boot Camp on my mac in order to test my sites in IE rather than waiting a few days before i can get access to a PC, this sort of thing happens to me far too often and i'm sick of it, bloody useless IE, why must you cause me so many headaches??
Any help is greatly appreciated, cheers. :-)