Ok, so I was busy at creating my new personal site (also my first) and everything was going fine. IE seemed to be dealing with my Standards Compliant code as well as any other browser, except for maybe one or two small differences. Then I hit a wall...

Basically, I created a Python cgi script to display the latest, most interesting images from flickr on my blog page... this is where it all went downhill. The funny thing is, IE deals with 'img' tags inside 'a' tags like I had expected firefox, opera etc. to handle them and firefox and co. render incorrectly!

I've created a page to demonstrate the desired look of the image links, including the css... image test.

In IE, the 'a' element wraps around the image fully, perfect! In firefox and others the link seems to cover the whole image, but applying a border to the 'a' element quickly shows that it's oddly positioned at the bottom of the image, completely destroying the desired effect (note: I want the :hover part to function in all browsers, and since IE will only use :hover when used with an 'a' tag I can't do it any other way... even a:hover img { doesn't work in IE).

I'm a linux user, so I'm certainly not an IE fan, but this surprised me quite a bit. Any help on the matter is greatly appreciated.

Gareth

In IE, both examples look the same, but on the second one the :hover function doesnt work... I'm not really sure what you mean though, as if what you're basically just telling me CSS that I'm using for the 'works in firefox' example already and which doesn't work fully in IE.

By the way, thanks for such a fast reply.

Hey spyyddir, that worked, thank you! I actually tried display: block before, but it then made each image take up a whole line in the sidebar... I wanted two. I completely forgot about float: left, which should fix that issue. How stupid of me.

Anyway, thank you both for the replies. I'm gonna go fix the css for the actual site now, and I'll post a link as soon as it's done.

Ok, so I changed my main page accordingly, and the boxes now work fine. Although now IE renders a big gap between the title and the box... Firefox and co render it fine now though. Check it out at link.

So at least it's getting there. I am pretty sure the floating has caused this issue. I've used an empty p tag at the bottom of the box with 'clear: left;' in order to get the box to reach below the pictures, which is now working fine in firefox etc.

I'm repeating myself now, so just check it out if you want and again, any help is appreciated.