Site breaks badly in IE6

[AnnieKay]

Hi all

 

I'm working on an image gallery made purely with CSS and in FF and IE7 it seems to work fine (for the most part, a few pixel tweaks are needed in IE7), but breaks badly in IE6 - I just can't figure out why!

 

Here's the link to the website:

http://www.gofair.dreamhosters.com/final/album_display.html

 

and here's the css:

http://www.gofair.dreamhosters.com/final/css/gallery_styles.css

 

 

What's happening that's making it look so wierd in IE6?

 

Also, any general comments about my choices of selectors and way I have coded are much appreciated as I'm still learning CSS and am finding it hard to discern what the best way of doing things is!

 

Thank you all in advance

Annie

[dbrimlow]

Remember this ... LVHA.

 

LVHA. LoVeHAte.

 

link, visited, hover, active.

 

This just starts your problem:

 

a, a:hover, a:visited {

text-decoration:none; }

 

But you continue using the pseudo links in the wrong order through-out AND add the :focus pseudo element.

 

When :hover is listed BEFORE :visited AND without the other two pseudo link elements defined (link, active) the results are strange  because the pseudo links all have an equal specificity of 1.1.

 

IE 6 particularly just goes nuts over this.

 

You should lose the a{} in all cases in your css and replace it with the 4 proper pseudo :links - particularly since you are also using the :focus :hover css2 pseudo elements.