Template development - help please?

[Finner]

Doing a new layout for my site, Oculus (oculus.farfromreal.com) which you can see at [url removed: template complete]...
I'm using a few addons, and having some trouble getting them to work properly in IE - especially the rollover next/prev buttons on the image from the 235 Skin (v2) template. For some reason, the buttons have a gap between where they're supposed to be positioned - they should be flush with the side of the image, as they are in firefox.. the right hand button also appears to get cut off on the right side too..
Using this script also gives me validation 2 errors - does anyone know how to fix this?

There also seems to be more space between my image and my information in IE - this seems to just be a matter of how each browser renders spacing, isn't a big deal.. just a wee bit annoying to me ;)

Another strange thing which I haven't come across before is my double line border along the bottom of the page - for a change, this works in IE, but not in firefox where it appears filled in between the double lines with the colour of the background (as the background and border are the same colour, this just looks like one solid block).

If anyone has any answers or suggestions to my problems, it would be greatly appreciated! Thanks :D

[Mav]

The next/prev buttons look fine in IE7. You're probably testing in IE6? That version still has the stupid box model problems. Basically check padding/margins/borders, and search for box model fixes for IE6. (sorry, don't have IE6 installed atm...) This pic (http://www.hicksdesign.co.uk/journal/3d-css-box-model) and this (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) might help understand the box model problem, and help find the fix. My guess would be that IE uses a different width for the parent, the #image{} rule. And that causes the prev/next to have a weird offset.

Space between image and info = same box model problem.

As for the double border... I'm baffled, FF shouldn't be doing that. :| *investigates some more...* :confused:

*Edit:
Hmm, seems I got it wrong all along too. Firefox is actually doing it correct. And I just checked in Opera (leading in correct css rendering), and it also shows the same as firefox. The borders are there, it's just their background color is the same.
http://www.w3.org/TR/REC-CSS2/box.html#8.5.3:
All borders are drawn on top of the box's background.
So a double style, or dotted and dashed too, get the color of the box as background. Since those are the same color on your page, you don't see the double borders. I guess I never noticed since I usually use solid borders anyway. Learn something new everyday, lol.
I do think it is stupid behavior though. But it seems with css3 we will be able to choose, but that's going to take a few years... some browsers don't even have all the css2 rules properly working yet. :/

[Finner]

Thanks for all that Mav - great little bit of info you found there.. I tried looking myself, but came up with nothing.. looks like I'll have to find another way around it!

Yes, I'm testing in IE6 and FF.. IE7 seems to handle sites more like FF, but I don't know how many have upgraded?

Maybe I'm too much of a perfectionist! :D

Hrmm.. I think I'm trying to get too much going on here (having having next/prev buttons on the photo + boxover + a fadein doesn't seem to want to work..! lol), but I'm wondering if there's anyway to let the visitor choose between a couple of template..? Not just style sheets, but actual templates..?