Css And Different Browsers Issues

Question

I am writing my first Blog using Html&Css, Php And MySql.

While writing the "style.css" code I searched the web for any usefull tutorials and in every one I read: there was the same notes about Internet Explorer And Mac, such as:

/* IE5 Mac Hack \*/ 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

So I read some articles about IE issues with Css, and found great websites describing it like:

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

But, Even after reading so many articles\ websites, Im still a begginer who didnt totally understand how can I make sure that my Blog works on EVERY browser (such as IE5\6\7, chrome\ firefox\ mozilla\ opera .. etc.) ?!

Is there a common Browser\Css issues that I have to cover (take care of) ?

Thanks in advance.

Answer 1

When you're in IE9 (and I think 10 too), hit F12 on a page and it will display the console (just like in chrome). The console actually has a feature where you can choose to view a page as it would be viewed in IE 6, 7, 8 or 9. It's not perfect, but it is pretty good.

As for the actual properties and selectors that you use, if you are a beginner I would recommend that you take it slow and look up each selector and property before you use it, and run a quick search to find out about any compatibility issues/workarounds.

One of the things that you should also remember is that occasionally, though we try to minimize it as best we can, some things just can't be rendered in that one, obsolete browser (most often an IE browser). That doesn't always mean that you should never include those things in another page - look up how to make browser-specific code and styles in those situations - but, at the same time, make sure you're not making two totally different pages.

Especially when you're first starting out, try out everything that you can and play with everything that you can. Be creative and, most of all, HAVE FUN WITH IT!

P.S. My first full site was a blog site too (PHP, MySQL, HTML, CSS). :)

Answer 2

You can see a CSS broswer support chart here

This let you know which browser supports what. You can make several css files and switch through them depending on the browser.

Answer 3

Short of writing code for every browser known to man, on every OS there is no way to fool proof your CSS/HTML or other client-side scripting to work one every browser exactly the same, I don't care if your on Mac, Linux, Microsoft, Chrominum, other. Each OS has its own quirks as does each browser and browser version for each OS.

However like someone else pointed out, short of you doing some really elaborate things, almost all standard CSS x.x and HTML x.x and JavaScript will work on all browsers old and new just fine, you will run into the occasional hiccup sure, but again theres no way around that, and in my time as a developer its my opinion to avoid css "hacks" as a measure of trying to compensate for every browsers needs where they come up short and use browser detection via php/javascript and serve up an alternative version of the problem specific to that browsers support.

Also make it known on your site somewhere what browsers you support with your development. If your just starting out and learning most docs you will find will cover CSS3 and CSS2 the later years.. and HTML5 (which is pretty much the same thing as 4 with some enhancements). So with that its almost easy to say learning in this day you will likely easily support IE 8+, Chrome 10+, Firefox 4+, Opera 8+.. and with that your biggest throne in the side will be people still using IE 7, or firefox 3-13.5

As for the common issues, thats a tough one. Though I think the biggest one is the Position styling. When it comes to fixed and absolute as IE for example doesn't like fixed position or is it absolute, its one or the other. But usually anything that deals with detattching the elements from the flow of the DOM are the common ones.. Also margins and paddings are handled differently in some older browsers. All in all if you worry yourself to much about css/html and other client-side scripts and supporting as many browsers as possible you will end up with a very monotone site, and will end up in an asylum from having a break down. Pick a set of browsers, support those and up, and save yourself some headache.

Answer 4

You can experiment with your css and test the differences on each browser by using Adobe browserlab. I recommend trying out your css and what you find on the internet and then test the compatibility with browserlab.

From what i understand its a complementary service from adobe so give it a try!

if that don't work you can also try http://browsershots.org/, although i have never used it it should do the job your asking.

Answer 5

In my experience, the only true way to know is to test it yourself. For the most part you should not run into any issues, and usually when you do they aren't that big of a deal. I also have learned that "hacking" things together may seem like the easiest/best way to do things, when in reality it's just poor CSS on your side that could have been adjusted. That being said there are absolutely times when you just can't get around it, that's the nature of the beast. For me the most trouble has come from divs. As you grow as a developer you will come to learn what will work every single time with out a doubt, and what you'll have to test over and over to get right. It's just a matter of practice. That being said, as long as you keep your design clean and simple it shouldn't be too difficult.

Answer 6

Unless you’re doing more complicated CSS, most stuff works across browsers without any problems these days. You can use http://caniuse.com/ for specific support details, and PPK’s site ( http://quirksmode.org/ ) has information about more basic support in older browsers.

As for testing in older versions of Internet Explorer, you can use Microsoft’s supplied virtual machines: https://www.microsoft.com/en-us/download/details.aspx?id=11575