Joomla Solutions Template

It is debatable that there's no goal in website design more gratifying than getting a stunning and intuitive design to look the same in each currently-used browser. Sadly , that goal is usually agreed to be virtually impossible to attain.Some have even gone on record as saying that perfect, cross-browser compatibility isn't required.

*Understand the CSS Box Model

This is among the first things you need to be comprehensively familiar with if you'd like to be in a position to achieve cross-browser layouts with few hacks and workarounds.Fortuitously , the box model isn't a hard thing to realise, and typically works the same in all browsers, except in circumstances related to certain versions of Web Explorer.

The CSS box model is responsible for figuring out :
* what sort of space a block-level part takes up
* whether borders and / or margins overlap, or collapse
* A box's dimensions
* to some degree, a box's position in relation to other content on the page.
The CSS box model has the following essential rules :
* Block-level elements are basically oblong ( as are all elements, actually )
* The dimensions of a block component are worked out by width, height, padding, borders, and margins
* If no height is cited, a block part will be as high as the content it contains, and padding ( unless there are floats, for which see later on )
* If no width is stipulated, a non-floated box will expand to fit the width of its parent minus padding.

*Understand the Difference Between Block and Inline

For experienced developers, this is another no brainer. It is nonetheless, another vital area that, when entirely accepted, will cause the bulb to appear, many headaches will be evaded, and you will feel much more assured in making cross-browser layouts.

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

* Block elements will, default naturally expand horizontally to fill their parent container, so there isn't a need to set a width of a hundred percent
* Block elements will, default, begin at the leftmost edge of the parent box, below any previous block elements ( unless floats or positioned elements are exploited ; see later )
* Inline elements will ignore width or height settings
* Inline elements flow with text, and are liable to typographical properties like white-space, font-size, and letter-spacing
* Inline elements can be aligned better using the vertical-align property, but block elements can't
* Inline elements will have some natural space below them to accommodate text elements that drop under the line ( like the letter g )
* An inline part will change into a block element if it is floated.