Try Out New Website HTML Table- Creator HTML Table Generator

Cracking The 10 BEST CSS HACKS Code

10 Best CSS Hacks Here we discuss the 10 best CSS hacks, If you are front end coder you must know how important is to make cross browses, valid CSS an

10 Best CSS Hacks

Here we discuss the 10 best CSS hacks  If you are front end coder you must know how important is to make cross browses, valid CSS, and XHTML code. And also you must know how much time we are spending on all those hacks and fixes for various browsers. I've written about some of them earlier on PNG transparency issues, Yellow fields in the web form, Vertical align div, etc...

Here is the list of 10 hand-picked CSS hacks and tricks which can help you in your CSS code and also save some time.

1. Vertical align div

One of the current CSS left-outs is a vertical-align div. And before CSS 3 comes we have to use some tricks to solve this problem. I looked over for some solutions and it all comes up to defining it as a table and using vertical-align. The second one appears a lot and it’s a nice solution, but it has two faults, I’ll tell you later about them, here’s the code first.

The idea is to place the absolute div 50% left and top and then to move the margin-left and top half if it’s size.

.wrapper {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;


This works only with defined height and when div height is less then browser height so you can’t have scroll. Now you’ll ask why do anyone want vertical align when there’s a vertical scroll? Well for example you have container height 820px and you have it vertically centered in all larger resolutions, simple.


In this problem (when browser height is less than div height) at smaller resolutions 1/3 of div is not visible, it’s in negative top margin. So idea is to place some relative div that will prevent div to go into negative margin. Here is the code.

<div id="shim"/></div>
<div id="wrapper">
html, body {
height: 100%;
margin: 0;
padding: 0;
* {
margin:0px auto;
div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
div#wrapper {
width: 1000px;
height: 400px;
clear: both;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
/* Hide from IE5mac \*//*/
div#shim {
display: none;
html, body {
height: auto;
/* end hack */
/* ]]> */

2. Min-Height

selector {
height:auto; !important

3. PNG transparency

If you are CSS coder, you've probably ran in to png transparency problems many times. Even Microsoft is having problems with it open in IE6. So I'll tell you few problems and solutions I've handled so far.

First one is if you need just simple transparent image, without some special needs for example backgrounds etc. The solution would be png fix. I've used it many times but it has lots of faults, for example with padding, margins and absolute positioning. Sometimes i can mess up the rest of your JavaScript files, but anyway very useful script. You can download it here and just include it in your <head> tag
10 Best CSS Hacks

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>

The second one can partly handle issues from first and it's pure CSS solution. I mostly use this for backgrounds, because if your path for a background is from CSS file then png fix can't handle it.

10 Best CSS Hacks

.someelement {
background-image: url(images/image.png);
* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="images/image.png", sizingMethod="scale");

I found this very useful, and also when you add some hover effects for example some color or other image. You can see live example here

NOTE: This simple hover is just example and it doesn't work in IE6

.someelement:hover {
background: #333;
.someelement:hover {
background-image: url(images/image2.gif);

Only problem I had with this was with <a> tag, link just don't work (when it's in div with this kind of background) and i don't know why (talking again for IE6). And only solution i could think of was to place another absolute div over it for the links, content etc... Yes i know it's not elegant but it works if content is not dynamic.

Luckily more and more people are starting to use IE7, and i must say i have recently switched too, i had to have IE6 because of testing my code and when i found out for Multiple IE program I switched immediately ;)

4. Autoclear

.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

5. Reset CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
table {
caption, th, td {
blockquote:before, blockquote:after, q:before, q:after {
blockquote, q {
quotes:"" "";
strong {
em {
* {

6. Scrolling Render IE

html {
      background : url(null) fixed no-repeat;

7. Opacity

#transdiv {

8. PRE Tag

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

9. Li Background Repeat IE

<!--[if lt IE 7]>
#leftnav li { zoom: 1;} /* haslayout=true */

10. Good to know

charset "UTF-8";
/* ----------------------------------------------------------------------
---------------------------------------------------------------------- */
*:first-child+html selector{property:value;}
/* ----------------------------------------------------------------------
	WinIE6 & Mac IE
---------------------------------------------------------------------- */
* html selector{property:value;}
/* ----------------------------------------------------------------------
---------------------------------------------------------------------- */
* html selector{property:value;}
/* ----------------------------------------------------------------------
---------------------------------------------------------------------- */

Rate this article


1 comment

  1. Just love it.
    Very good explain the whole CSS and HTML...

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.