ozblog

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:

margin-top: 3.5em !important; margin-top: 2em

So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.

Usually attributes are assigned just one class, but this doesn’t mean that that’s all you’re allowed. In reality, you can assign as many classes as you like! For example:

<p class="text side"> Some Text </p>


Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

Introduction

It is often nice to have your webpage span the full height of the window even if you only have a small amount of content displaying at the top.

With min-height hack	Without min-height hack

The Problem

This is easy in standards compliant browsers like Firefox with the CSS min-height property. However IE (Internet Explorer) 5 and 6 doesn’t understand the min-height property.

Although IE doesn’t understand the min-height it will treat height almost as though it were min-height and will expand an element that contains its content even though the height has been set.

Standards compliant browsers on the other hand will not expand an element past the set height. So height cannot be used as min-height.

Defining both height and min-height in the same element won’t work because height will override the Min-height in standards compliant browsers.

The Solution

That’s when I came across this nifty little hack. Thanks http://www.dustindiaz.com/min-height-fast-hack/

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

The Explanation

So how dose it work? Let’s break it down.

height:

• In standards compliant browsers height is a fixed height, non expanding “not more not less”
• In IE height will set a fixed minimum height but will expand with the element if it exceeds the set height.

min-height:

• In standards compliant browsers min-height is, a fixed minimum height. “I want it to be at least this height” and will expand with the element simpler to height in IE.
• IE doesn’t support the min-height property.

!important

• An !important declaration can be likened to an override. It allows you to declare an overriding property, which will be considered taking precedence even if there are other rules with the same specificity declaring.
• IE6 ignores !important.

height: auto !important;

Let the actual final height auto-adjust (while obeying the declared min-height, of course). Even though auto is the default for any element’s height, we want to declare it because of the following rule.

So standards compliant browsers will see:

min-height: 500px;
height: auto;

IE6, on the other hand, due to ignoring !important and not understanding min-height, will see:

height: 500px;

And there you go min-height that works in all modern browsers.