Safari + New Template = Blank Page

[kidleethal]

Hi everyone,

I am currently redesigning my site template, and for want of some fancy typeface, I created a couple of image rollovers for the header graphic using slices in Adobe Imageready.

I have a very preliminary version of the site running on a dummy install of pixelpost at http://www.decoy.co.nz/photo2

My question is, everything was looking peachy in Firefox (haven't had the balls to fire up IE yet), but when I try to load the page in Safari, all I get is a blank page. Is this possibly due to Safari not liking the Javascript for the image rollovers? I can't think of anything else that would be causing it to do this. And if so, does anybody know a workaround?

Thanks so much for your help,

Lee

[DikkieBurger]

First fix all your markup errors (31!), that should fix a lot..

http://validator.w3.org/check?uri=http%3A%2F%2Fdecoy.co.nz%2Fphoto2%2F

You should not use Javascript for image rollovers, use CSS (something like #img a and #img a:hover with background img.) and don'tuse tables for layout. Use divs.

btw,

your blog doesn't work in:
IE 7.0
Konqueror 3.4
Safari 2.0

[kidleethal]

First fix all your markup errors (31!), that should fix a lot..

http://validator.w3.org/check?uri=http%3A%2F%2Fdecoy.co.nz%2Fphoto2%2F

You should not use Javascript for image rollovers, use CSS (something like #img a and #img a:hover with background img.) and don'tuse tables for layout. Use divs.

btw,

your blog doesn't work in:
IE 7.0
Konqueror 3.4
Safari 2.0

Hi DikkieBurger,

Thanks for your idea about using CSS instead of Javascript. It's my first time trying to make image rollovers and I thought the Javascript method was a little bulky and cumbersome.

I realise the site in it's current state isn't going to work in most browsers, I just wanted to get the header rollover working before fixing everything else.

I understand to make the rollover buttons I do something like this:
http://www.tutorio.com/tutorial/pure-css-image-rollovers

With the main part of the background (the parts that don't rollover) underneath. My question is, what is the best way to position those link rollovers so that they align with the rest of the menu? (I hope that makes sense).


Cheers,

[DikkieBurger]

Mm, because your links are in the background image you can't only work with CSS because you only have an point where the links is, you should use the html map tag (http://www.w3schools.com/tags/tag_map.asp) I think.

You should cut out the link images, becuase it's not the best and easiest way to do it. It's better to have a background and put over it the link images and then put with css the rollover image.

BTW, your photblogs now works in:
Safari 2.0
MSIE 6/7
Konqueror 3.4/3.5