Cross Browser Issues - few solutions inspired by smashing magazine

CROSS-BROWSER ISSUES

It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. 

Creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project

A near-exact cross-browser experience is attainable in many cases. 

Most important principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible

1. The Problem

2. Understand the CSS Box Model

3. Understand the Difference Between Block and Inline

4. Understand Floating and Clearing

5. Use Internet Explorer First (Or Don’t)

6. Understand Internet Explorer’s Most Common Problems

7. Some Things Will Never Look the Same

8. Use a CSS Reset

9. Validate

The Problem

Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.

Understanding CSS Box-model

This is one of the first things you should be thoroughly familiar with if you want to be able to achieve cross-browser layouts with very few hacks and workarounds. 

• The box model is not a difficult thing to grasp

• Generally works the same in all browsers

• Except in circumstances related to certain versions of Internet

Explorer 

The CSS box model is responsible for calculating:

• How much space a block-level element takes up• Whether or not borders and/or margins overlap, or collapse• A box’s dimensions • To some extent, a box’s position relative to other content on the page

The CSS box model has the following basic rules:

• Block-level elements are essentially rectangular (as are all elements, really)• The dimensions of a block element are calculated by width, height, padding, borders, and margins• If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below)• If no width is specified, a non-floated box will expand to fit the width of its parent minus padding

Some important things to keep in mind for dealing with block-level elements:

• If a box has its width set to “100%”, it shouldn’t have any margins, padding, or borders, otherwise it will overflow its parent• Vertically-adjacent margins can cause some complex collapsing issues that may cause layout problems• Elements positioned relatively or absolutely will behave differently, the details of which are extensive• The rules and principles above are stated under the assumption that the page holding the block-level elements is rendered in standards mode

Understanding the difference between inline and block

Another crucial area that, when fully understood, will cause the light bulb to appear, many headaches will be avoided, and you’ll feel much more confident in creating cross-browser layouts.

Here are some basic rules that differentiate block elements from inline:

•Block elements will, by default, naturally expand horizontally to fill their parent container, so there’s no need to set a width of “100%”•Block elements will, by default, begin at the leftmost edge of the parent box, below any previous block elements (unless floats or positioned elements are utilized; see below)•Inline elements will ignore width and height settings•Inline elements flow with text, and are subject to typographical properties such as white-space, font-size, and letter-spacing•Inline elements can be aligned using the vertical-align property, but block elements cannot•Inline elements will have some natural space below them in order to accommodate text elements that drop below the line (like the letter “g”)•An inline element will become a block element if it is floated

Understanding Floating and Clearing

For multi-column layouts that are relatively easy to maintain, the best method is to use floats. Having a solid understanding of how floats work is, therefore, another important factor in achieving a cross-browser experience.

Floated element can be floated either left or right, with the result that the floated element will shift in the specified direction until it reaches the edge of its parent container, or the edge of another floated element. 

Some important things to keep in mind when floating and clearing elements:

• Floated elements are removed from the flow of other block-level, non-floated elements; so in other words, if you float a box left, a trailing paragraph (block level) that’s not floated will appear behind the float in the stack, and any text inside the paragraph (inline level) will flow around the float• To get content to flow around a floated element, it must be either inline or else floated in the same direction • A floated element without a declared width will shrink to the width of its content, so it’s generally best to have a set width on a float• If a block element contains floated children, it will “collapse”, requiring a fix• An element that’s “cleared” will avoid flowing around floated elements above them in the document• An element that’s both cleared and floated will only clear itself of elements that come before, not after

Use internet explorer first ( or don’t )

Sites and Applications should be developed in “modern” web-browsers, with standards first and then be tweaked for buggy versions of Internet Explorer. 

Although we might hate to use IE6 and IE7 in our everyday internet activities, when it comes time to build a client project from scratch, one of the best things you can do is test your layout in those browsers early in development.

It’s much easier to get a layout working first in IE6 and IE7, Waiting until late in the development process to open up IE6 and/or IE7 will likely cause some, if not all, of the following problems:

• Multiple hacks will be required, needing separate style-sheets for different versions of IE, making the code bloated and less maintainable and making the website slower• The layout in some spots may have to be reworked, multiplying development time• Testing time will increase, sometimes exponentially, leaving less time for more important tasks• The layout in other browsers will not be the same as in IE6 and IE7

Dealing with IE is a fact of life for designers and developers, so just view its problems as you would any CSS issue — and build from there.

Understand internet explorers most common problems

If you’re going to start with IE in your development, or at the very least check your layout in IE early on, then you should understand what things Internet Explorer (usually versions 6 & 7) has problems with, or what its limitations are.

Here is a rundown of the most common problems you’ll need to deal with:•IE6 will become problematic if floats are overused, causing (paradoxically)disappearing content or duplicate text•IE6 will double the margin on floated elements on the side that is the same direction as the float; setting display: inline will often fix this•In IE6 and IE7, if an element doesn’t have layout, it can cause a number of problems, including backgrounds not showing up, margins collapsing improperly, and more•IE6 does not support min- and max-based CSS properties like min-height, or max-width•IE6 does not support fixed positioning of background images•IE6 and IE7 do not support many alternate values for the display property (e.g. inline-table, table-cell, table-row, etc.)•You cannot use the :hover pseudo-class on any element in IE6 except an anchor (<a>)•Certain versions of IE have little support for certain CSS selectors (e.g. attribute selectors, child selectors, etc.)•IE versions 6-8 have little support for CSS3, but there are some workarounds

Some things will never look the same

As already mentioned, creating the exact same experience visually and functionally in every browser is possible, but unlikely.

You can get the layout and positioning of elements close to pixel-perfect, but there are some things that are out of the developer’s control.

Forms will often look different

Typography will always look different

Use CSS reset

Use Prefixr

Validate both html and css as you develop

ConclusionThank you