Cross-browser help

[Wacko]

Hey there,
I’m in the process of creating my first website and at the moment it is practically complete. My problem is the format of the website on other browsers. It shows fine on Safari but on Firefox part of the Page header/image slider is cut off and in IE PNGs have a light blue background.
http://www.belfastfootclinic.com
I would appreciate if someone could assist me with this problem.

Regards,

Wacko

[TheDoc]

1. IE6 will put the light blue background on transparent PNGs. There are a bajillion fixes out there for that. Googling ‘ie6 png fix’ will return many results.

2. You have a MASSIVE image (the runners) on your home page. Any user with less than super high speed will see a huge performance hit when trying to view the site.

3. The site doesn’t validate. Not all of the errors are too important, but try to clean these up: http://validator.w3.org/check?uri=www.belfastfootclinic.com&charset=(detect+automatically)&doctype=Inline&group=0

4. The icons are getting cut off because “.rounded-box” div has a set height that isn’t high enough, and has its overflow set to ‘hidden’.

[Wacko]

OK thanks a lot for the advice. You have solved my queries but i have a few more, if you could help?
In IE the website has numerous problems:
At the sidebar of each page the Address is the wrong colour.
In the Contact page the contact form style is completely different than other browsers and what I want it to look like.
In the Consult page one of the images is gone and the spacing is wrong.
On the Links page the text (www.firefly.ie) is in the wrong position.

If you could assist with any of my problems i would be very grateful.

Regards,
Wacko

[TT_Mark]

Please remove font tags, you’re not closing them properly anyway (/fontcolor does not close a font) and they really should be done using spans.

Your background image is insanely large and is taking forever to download. Perhaps try making it 1px wide and then repeating across the x axis, because people aren’t going to stick around for it to load properly.

In fact, even your images on your links page are large. You also have lots of errors as TheDoc pointed out. As you are developing in Safari, use the Web Inspector and Developer Tools to find out what these errors are and get them fixed. If you fix the errors then a lot of other things will work out as browsers handle coding problems in different ways e.g. Safari tries its best to clean up the problems by closing tags but IE may not

Obviously the contact form will not have rounded borders in IE, but I cannot see the other problems with it as I am on a Mac

[Wacko]

[SOLVED]

[Author]

Posts