Category Archives: CSS Tips
How to center absolute positioned element
Naturally an element with absolute positioning tends to be align to the left. To make that element float in the center horizontally use the following code: #elem { position: absolute; left: 0; right:0; } Unfortunately this does not work in … Continue reading
Applying two background images
To apply two images to HTML page background you can use the following code: html { height: 100%; background:url(bg.gif); } body { margin:0; background:url(bg_content.gif) repeat-y center top; min-height:100% !important; height: 100%; } min-height:100% – allows the background image to stretch … Continue reading
Special HTML Character for Bullet List
This is a best way to use a special character as a bullet for lists in CSS: li:before { content: “0BB 020″; /* » for example } When using these characters, like », it is necessary to encode them … Continue reading
Controlling element overflow
The following statement is used to control Horizontal or Vertical overflow of any HTML element: * { overflow-x:hidden; overflow-y:auto; }
Addressing browsers margin and padding descrepencies
Setting everything to 0 in the beginning of the CSS document is usually helpful in preventing browsers margin and padding discrepancies. Setting list style and image border declarations to none can also help to avoid browsers misalignment. * { … Continue reading
IE bug – conent disappearing on document scroll
This hack takes care of the annoying IE bug when the page content disappears on up and down document scroll: whatever { display: inline-block; }
Addressing different browsers
These hacks allow to address a particular browser: .TagIDorClass { *padding-left: 2px; /* using * before style property declaration addresses all IE browsers */ } .TagIDorClass { _padding-left: 2px; /* using _ before style property declaration addresses IE6 … Continue reading
IE6 bug – extra space at the bottom
Fixes IE6 extra space an the bottom of an element: * { overflow: hidden; }
Firefox background placement
Firefox fix for placing background image at the very bottom of the page: html { min-height: 100%; height: auto; } body { background:url(bg.jpg) no-repeat center bottom; }