[CSS] Cross-Browser Tricks

[Gaijin]

Hey ya'll....
(I will update this... currently I can only post what's already in..)

Let me share some CSS tricks, which help you achieve cross-browser compatibility.

As any advanced Web Developer knows, the CSS in your Layouts will not always render the same way in different browsers.
You'll need to use either a browser specific css parameters or find an alternative which will work in every browser.
In most cases, you'll just have to change few things for defferent browsers, but Internet Explorer it's something totally different. Mostly that's where cross-browser designer break thier necks...

Cross-Browser Outline
outline, is not supported by IE versions under the new 8th.
Since IE9 is still in the Beta release, it's not wide spread and few People might be using versions 5, 6 or 7, we need to think of a way to import the outline selector.

The best approach is to create 2 Containers.

Code:

<div class="outline-parent">
    <div class="content-parent">
    This will be the DIV that will contain text.
    </div>
</div>

Now we can apply border style to the outline-parent to act as an outline.
We will set paddings of the outline-parent to 0px, so it can fully fill out the outline-parent and the margins of the content-parent also to 0px.

Our CSS would look like this.

Code:

.outline-parent
{
    border:1px solid blue;
    padding:0px;
}

.content-parent
{
    border:1px solid red;
    margin:0px;
    padding:5px; /* just so our text isn't close to the borders */
}

That's it, every single browser will display this same way as firefox would with the outline selector.

However, not all tricks are that easy, most of them require you to use browser specific selectors.

More to come soon, stay tuned! ;)