Website Design Liskeard

Yes thats correct, another css hack for i.e 6 this time it’s ‘min-height’. As some of you are probably aware i.e 7 now supports the ‘min-height’ css property making our lives much simpler, or rather even more complicated as we have to create hacks or work arounds for old browsers such as i.e 6. 

Show below i have included the css for creating a div element with a minimum height, of course this could be applied to any element of your html document. For the div example that i am showing, this method is incredibly usefull when you have content that does not fill a specified area on your webpage. By using the min-height property you will effectivley allow your div to scale and expand but the hight will go no lower than the specified pixel size (e.g. 200px).

What you will see below is the basics of getting your div to display correctly on nearly all browsers (I haven’t managed to find any that dont support this method).

Example of min-height code

mydivname {
  min-height:200px;
  height:auto !important;
  height:200px;
}

Try it out and see how easy it is to use.

The CSS star hack is one of my most favorite ways for developing any good site in CSS, allowing you to effectively reset any style on any element of your web page, saving you time and code if used correctly. But is it really the best way?

Firstly i will begin by explaining how and where i generally use the star hack within my css document.

Begin by opening your style sheet, and paste the css below to the very top of your style sheet :

Code:

* {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

What does it do?

By doing this we are effectively setting every element of the HTML document to have no margins, no padding and to set the font to verdana.

This can be of major benefit to you when building a website from scratch, mainly due to the fact that all most all browsers apply different padding, margin and font styles to every element. By applying the css shown above we are making things easy for ourselves by setting a blank canvas and stripping any elements of its previous styles.

Pros:

• Can increase productivity/development time.
• Could reduce your code dramatically.
• Resets all HTML elements so they have no predefined styles allowing you to eliminate browser compatibility issues.

Cons:

• Could put more load on you browser.
• Technically it might increase code.

Things to consider:

The CSS star hack is great for removing the margin and padding etc but don’t get too carried away. For example if you set the colour to be black, this will apply this to every element of your web page and can be very annoying, this will mean you have to set the colour on everything that is different thereafter and will increase your code dramatically.

Give it a go and see how much time and coding it can save you. I’ve never looked back since implementing it into every website i create.