3

Im at college and have completed my first year. I want to continue web applications as a hobby. I have create a functioning web application with MS Visual Studio 2010, but I know I need to make it compatible with other browsers.

I recognise that I need to test it in other broswers and see the discrepancies that arise, but how do I fix them. My teacher say I need CSS code for each browser, but how do I do this?

Thanks in advance for any help

Jman
  • 31
  • 1
  • 1
    Thanks guys for a really quick response, I think I have a lot on info here to get through over the next few months. Cheers. – Jman May 14 '11 at 23:42

5 Answers5

3

Include a CSS reset stylesheet. You should then include a default style to get sensible margins and font sizes, then add your own CSS on top of that.

Community
  • 1
  • 1
YXD
  • 31,741
  • 15
  • 75
  • 115
2

My teacher say I need CSS code for each browser

He is wrong if that's literally what he said. If you know what you're doing, you can get 99% of everything to work the way you want cross-browser. For IE (the problem browser and usually definition of "cross-browser", you can use conditional comments to load different stylesheets that target specific IE versions.

Common things people trip up on:

If you're having issues in one browser (and that browser is not IE) but it works in another, chances are (but not always) you are making a mistake somewhere. Before any debugging attempts, always, always validate your html first. A lot of "CSS issues" are actually HTML issues that different browsers respond to in different ways.

And then, there's this site that I've found helpful in the past:

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • Just really want to stress the part about validating your HTML. ***Always*** validate 100% first (until you get the big green thumbs up) before looking at your CSS for issues. A lot of people post here about CSS problems when they literally have hundreds of HTML errors that are standing in the way. – Wesley Murch May 14 '11 at 23:25
2

The approach I use is to write the CSS for my site and test it only in Google Chrome. You can use Firefox 4 too. The reason I use these browsers is that if my CSS looks good in them, I'm pretty sure it's standards compliant and has a great chance of looking good as newer browsers come out.

Then, I take a look at my site in IE. Now, thankfully, you don't really have to worry about IE6 any more. Almost everyone's ignoring it. So you have to think about your audience. Do you think most of them would use IE9 or IE8? If you're ok with IE9, then it's almost certain your site looks great without any modifications because it's a very standards compliant browser. If you need IE8 compatibility, then add another CSS stylesheet and make it so it only shows up if the browser is IE. Your tag would look like this:

<head>
    <link rel="stylesheet" type="text/css" href="your-main-style.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->
</head>

So now you can put any style fixes in that stylesheet without hurting the style in your main stylesheet. Keep this to the absolute minimum so that it's easy to maintain.

As an aside, if it's just a site for you to have fun with, pick a browser you like and make sure it works in that. Then just put a message at the bottom saying what browser displays your site best.

Milimetric
  • 13,411
  • 4
  • 44
  • 56
  • I only wish that were true. Looking at the stats for a website I maintain (non-tech audience, multi-million monthly page views), IE6 is still at around 3.5%, and IE7, which is almost is bad, is at 17%. So that's almost 1/5th of our traffic that's using a browser that is going to have issues with standards-compliant CSS. – Tyler Eaves May 14 '11 at 23:11
  • Yeah, that stylesheet will apply to them too. I'm thinking this is a hobby site for him so those small percentages don't mean much. – Milimetric May 14 '11 at 23:14
  • When you're doing it for a living, all it takes is a single person using IE6/7 to ruin your day: The Client. Ugh, this just happened to me last week and I'm relearning the joys of IE7's botched z-index rendering... – Wesley Murch May 14 '11 at 23:22
1

You can target IE with conditional comments.

For other browsers you can use vendor-prefixed properties to explicitly target those browsers -moz-, -webkit- etc. Otherwise for non-IE just use standards compliant (x)html and, for the most part, they'll be fine with it.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

Try conditional stylesheets / hacks: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

bender
  • 1,430
  • 10
  • 14