CSS Hacks - Everything you need to make your website cross-browser compatible

Dealing with browser inconsistencies often makes up a majority of the work for a web designer/developer.

Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines.

Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately.

The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

Creating a fully centered webpage and adding dynamic background elements

So, here we go again.

We've all read many articles on fully centering an element of a webpage e.g. a div or an image, and most likely they were great. I've read some that use css and many that use javascript to achieve the desired look and feel of your webpage. What I want to talk about today, is centering the entire webpage.

For those of you who need an example, click here (opens in a new tab) and downsize the width of your browser. You should see the page keeping it's center point no matter how slim the window may be, as well as no horizontal scrollbars appear when you downsize.

You're probably asking "Why would I want to do this?".

Essentially, there is no real reason why you should do this, however, if you're looking to add a bit extra to your website, this could prove to be an interesting take on design.

Before we continue, allow me to point out the cons of this approach:

1) This method is not friendly to users with a low screen resolution (They will never see a horizontal scrollbar).

2) If you're looking for a W3C CSS Validation Tag, you won't get it because of one CSS3 property used in this method - overflow-x

So, let's get started.....