CSS effect: Fixed footer, PNG transparent, minimum height 3

8. Fixed footer

Adding a fixed footer to a webpage is actually very simple and practical. The footer of some websites is beautifully designed to present a perfect ending to the website.

# Footer {
Position: fixed;
Left: 0px;
Bottom: 0px;
Height: 30px;
Width: 100%;
Background: #444;
}
/* IE 6 */* html # footer {
Position: absolute;
Top: expression((0-(footer.offsetheight)+(document.doc umentelement. clientheight? Document.doc umentelement. clientheight: Document. Body. clientheight) + (ignoreme = document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: Document. Body. scrolltop) + 'px ');
}

9. Fixed the transparency of PNG in IE 6.

The use of transparent images on the website has become a universal method, starting with the. GIF format, but now it also involves the .png image format. Some earlier versions of IE do not support transparency. The following code will solve this problem well.

. Bg {
Width: 200px;
Height: 100px;
Background: URL (/folder/yourimage.png) No-Repeat;
_ Background: none;
_ Filter: progid: DXImageTransform. Microsoft. alphaimageloader (src = '/folder/yourimage.png', sizingmethod = 'crop ');
}
/* 1px GIF Method */IMG,. PNG {
Position: relative;
Behavior: expression (this. runtimestyle. Behavior = "NONE" &&(this.png set? This.png set = true :( this. nodename = "IMG" & this.src.tolowercase().indexof('.png ')>-1? (This. runtimestyle. backgroundimage = "NONE ",
This. runtimestyle. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (src = '" + this. SRC + "', sizingmethod = 'image ')",
This. src = "images/transparent.gif") :( this. origbg = This. origbg? This. origbg: This. currentstyle. backgroundimage. tostring (). Replace ('url ("',''). Replace ('")',''),
This. runtimestyle. Filter = "progid: DXImageTransform. Microsoft. alphaimageloader (src = '" + this. origbg + "', sizingmethod = 'crop ')",
This. runtimestyle. backgroundimage = "NONE" available, this.png set = true ));
}

10. Set the minimum height across browsers

Sometimes developers need to set the minimum height for HTML elements. However, this effect is not compatible with IE and Firefox of earlier versions. The following code can fix this problem.

# Container {
Min-Height: 550px;
Height: Auto! Important;
Height: 550px;
}