I see your problem. I know a lot of people don't believe in IE6, but unfortunately it still exists and if you must have a site work in that browser you must know the work around.
So, here are the solutions to your problems:
First: IE6 doesn't support png. It will throw a funny light blue background color due to rendering issues.
But don't worry there is a fix using jQuery. This site: http://blog.pauljamescampbell.co.uk/about-2/png-fix/ has a simple method. You can even see more of this on jquery.com
I see you are currently using scriptaculous. If you plan on using the png fix (jQuery), make sure you add the noconflict script or change the dollar signs to jQuery (but not in the jquery.js file). There are plenty of examples and help on the jquery site as well.
Second: I know that fonts will display differently in browsers do to aliasing & anti-aliasing. Also, you may not have that specific font on your computer so it will display all wacky.
I do know that IE6 sometimes has problems using just the "font" attribute in css. Best to separate it as font-size, font-family, etc. Consolidate the fonts in your body tag. So if you use "arial" as your main font & size 12px, put it in your body tag. That way you only have to style the different fonts familys and sizes. It will reduce your css file size, make it cleaner and easier to read.
Third: IE6 only understand hover states on the <a> tag. Looks like you have the border to show on the image hover. IE6 hates that.
To fix this just put the border on the a:hover of those images. You will need to specify a class to those a tags so it won't put a border on all <a> tags.
Hope that helps. I wasn't sure what other problems you may be experiencing.
|