Problems viewing in different browsers

I had the most  disheartening evening a few days ago after I had been to an internet cafe in town to check my site on a different computer and operating system.

I use an iMac with Firefox and its all updated and in perfect health. The internet cafe uses old pcs with Internet Explorer version 6 and Firefox version 2.

The difference in the way these different browsers view the site is amazing! I was prepared that it might not be the same but I wasn’t prepared that it would look shit!

Below is a list of some of the problems I encountered and how I solved them –

UGLY FONT – I had chosen a serif font for some reason. Well I did it coz I thought it looked good. But the thing is that it only looked good on the first font of the list (in the css there is a list of fonts to use and the browser just goes thru the list till it finds one that it is able to use – I found that out in a book I read) and then rubbish on all other fonts in the list. My first font was Baskerville so its not really a common one. I’m totally changing to arial now!! Now I know why almost all websites use this font!

MASSIVE TEXT – Yeh, for some reason the text was huge! I think this is also to do with the serif font selection that I chose. Because Baskerville looks real small for its point size I had the font set pretty big and when viewed in another font it looked completely stupid. I have obviously changed that now and the font is about the size of this text here.

PNG FILES HAVE NO TRANSPARENCY – This was something I was not prepared for. The png file which I had used for my logo in the title banner looked actually total crap! It wasn’t a nice white logo on a black background, it was a white logo on a sort of opaque grey square that was just laid over the top of my website. Yuck!

PNG or GIF? – This was the issue I was faced with. Do I place a gif file in there instead, which has a much larger file size and would be bad for ppl with a slow connection (ie – a lot of New Zealand) but keep the transparency. Or do I still use a png but I have to recreate it with the exact colour of the background, meaning that I would have to re-make the png file if I were ever to change the colour of my header. Its not ideal either way but I decided to go with the png because of the file size and also because gif files are real old now and png is the way to go really. Its just the older browsers that couldn’t read them properly. If it was up to me everyone would have an up to date version of firefox! But I understand why its not like that 🙂

CHECKOUT NOT WORKING – Now this one is something that I can do less about without a greater knowledge of what I am doing. Basically in IE6 the shopping experience isn’t as good as it is in my browser. There is some text that is bigger than it should be and its just not ‘nice’ like I want it to be. So 😦  More worringly for me tho was that in the firefox version 2 that I tried I could not get thru the checkout as it did not give me a box to fill in for country but it required this to be filled in. How can I fil in a box that doesn’t exist? Stupid thing!

So to solve this problem I haven’t solved it at all, I have just put a note in the FAQs saying that the site has been developed for latest versions of firefox, chrome, safari and internet explorer. I hope that no one will be offended that my site doesn’t work on their browser and I basically told them to get with it and download a new one. ooh well.

I’m going to go check it again later so I hope it now works well enough so that I am not embarrassed of my site!!