CODEWITHSUNDEEP
htmlcss
Obsivus
Obsivus

Reputation: 8359

HTML5 & CSS3: How can I make sure that my code is compatible to all browsers?

Whenever I am working with webdesign every browsers shows something different which ruins the layout. Is there any tools or guidelines to make a webdesign without any problems?

Thanks in advance!

Upvotes: 4

Views: 985

Answers (6)

Fourth
Fourth

Reputation: 9351

There are a lot of different tools and technologies that can help make this better/easier but nothing beats good old cross-browser testing. Here are some tools you might like:

Upvotes: 2

Paul Sham
Paul Sham

Reputation: 3205

I don't think that all designs must look the same in all browsers. It's nearly impossible with the growing range of browsers and devices that must be supported, but I understand that things shouldn't break.

This might require a case-to-case basis, but some things to look into are:

  1. Use HTML5 Shiv so IE browsers can recognize HTML5 elements: http://code.google.com/p/html5shiv/
  2. You could also look into HTML5 Boilerplate but that could be overkill http://html5boilerplate.com/
  3. In the design process, make sure any CSS3 properties are not so critical to design that they break it.

Upvotes: 1

Philip
Philip

Reputation: 4592

Grab Modernizr for a start, which uses selectivizr I believe!

For Li's I would use 

li{
  display: inline-block; //NO Floats
  *display: inline; /* < target IE7 */
  *zoom:1;
}

Double margins: fix those with IE conditional stylesheet OR html5boilerplate

Most other elements would depend on display type

For CSS3 maybe use CSSPie

Clears:

:after{
    content: '.';
    clear:both;
    visibility: hidden;
    *zoom:1;
    height:0;
    display:block;
 }

Some of the other issue's are fixed quite easily!

For screen width's use % instead of PX for greater control

Upvotes: 0

Zheileman
Zheileman

Reputation: 2559

If you start with a CSS reset (here is another one) or some HTML boilerplate you can, at least reduce most of the oddities with different browsers.

Upvotes: 0

Olivier Refalo
Olivier Refalo

Reputation: 51545

Using a CSS framework such as http://twitter.github.com/bootstrap/ or http://documentcloud.github.com/backbone/ can certainly help in that process.

Upvotes: 0

Schnappi
Schnappi

Reputation: 131

Apparently you have to tweak the design for each specific type of browser.

Upvotes: 0

Related Questions