Browser testing

[mortimer14]

Hi I have developed a website that looks good in safari and firefox, I am starting browser testing now and obviously, it looks scary in other browsers. I am quite new to fixing bugs in different browsers and any help would be fantastic! I really could do with some guidance!

Thank you very much

Mortimer14

[Paulie_D]

If you can post a link I’m sure you will get some help. I’m no great expert but perhaps you should consider designing for the worst browser first (IE) and then enhance to more modern browsers rather than fixing ‘bugs’.

Consider a good ‘reset.css’, HTML5 and the associated shiv.

[mortimer14]

http://www.papersky.co/webproof/surfacebi/index.html

http://www.papersky.co/webproof/surfacebi/innerpage.html

http://www.papersky.co/webproof/surfacebi/innerpage2.html

Thank you paulie above are the url links! I work of a mac and i had been running the tests through safari and firefox and as of yet not got round to testing my worries is when i changed one thing it made other things break. As i said it is sort of my first time browser testing I think the other times I got more luck then judgement on getting them right. Also I am unsire where i can browser test properly.

Thank you for offering to help me :)

[TheDoc]

If you are serious about web development, you will need to find access to a Windows machine. This can be accomplished in a couple of ways:

1) Buy a really cheap Windows PC
2) Install Windows onto your Mac via Bootcamp (either another drive or a partition on a drive)

Testing in all browsers is super important. Here’s a list of browsers you should always be checking:

Chrome
Safari
Firefox 4, 5
Internet Explorer 7, 8, 9
Opera

If your code is clean and follows best practices, you shouldn’t have problem with the majority of those browsers. IE7 could cause you a bit of a headache, and that’s when you get your hands dirty and create an IE-only conditional stylesheet to fix those things.

[Paulie_D]

I’m not sure but part of the problem might be the order of your css files. You seem to have a ‘layout.css’, a ‘960.css’ and finally a ‘style.css’. It might be there are some conflicts in there.

Although probably not an issue, there also seem to be a lot of inline styling.
e.g.

and

MORE INFO

I’d move all that out into your stylesheet and out of your markup

[snillor]

Somewhere above, it was suggested to design for the worst browser (IE) first. IMHO, that’s a bad approach because you’ll be limiting yourself to the capabilities of the lowest common denominator. The fact that IE still doesn’t support many of the goodies in CSS3 and/or HTML5 that other browsers support doesn’t mean you should avoid these newer tools/technology.

I think a better approach is to design for current browsers using whatever tools & techniques get you the results you want. Then after deciding which old browsers you want to support (many have dropped support for IE6, for example), make sure they deliver decent-looking and functional pages, but not necessarily the same thing more capable browsers provide.

[Paulie_D]

@snillor Sure…but for a beginner it makes more sense to design for less capable browsers and then enhance for more capable ones.

That way you KNOW your pages work in all the browsers you are supporting. One can then enhance for the more capable ones.

You don’t have to bug/feature fix if you know they already work.

But…everyone works differently.

[mortimer14]

Ok thank you guys i am working on this again today and hopefully will start to make some head way with it all!
Ill probable be back with loads of questions though :)

[mortimer14]

is there anyway I can learn more about fixing browser issues etc some where I can get the what browsers like and dont and what fixes those issues? I dont appear to find anywhere that actually says browser W doesnt like X element so using a Y element fixes this problem blah blah?

Thank you again

[Brightonmike]

The problem I have writing code for old browsers like IE5/6 is that the code you write to get things to work in those browsers is often bad practise.

[mortimer14]

i guess im concerned about changing one bit of code and then breaking it in others!

[TheDoc]

@mortimer14 – that’s why you’ll want to use conditional stylesheets.

https://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/

[mortimer14]

HI thank you all for your help, i took on board what you all said and now have managed to sign off this project! Thank you so much!

[Author]

Posts