Posts Tagged ‘CSS’

css Hacks

Posted: June 12, 2014 in CSS
Tags: ,

.classname { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */ }


Reference –

<script src=”; language=”javascript”></script>
<script language=”javascript”>
$(document).ready(function() {
window.setTimeout(function() {$(‘#box’).removeClass(“box1”).addClass(“boxCls”);}, 5000);


<style type=”text/css”>
.boxCls {
position: absolute;
width: 200px;
height: 200px;
top: 0;
left: 200px;
background-color: white;
border: 10px solid black;

.box1 {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: yellow;
border: 2px solid red;
<div id=”box” class=”box1″>Box</div>

IE6/IE7 are tough browsers to fix any UI related issues. You need to understand few hacks to solve those issues. Refer for more details.

A Java/.NET developer (not a core UI developer) may not have thorough idea on following css attributes. Knowing them makes your life easy in case if you are fixing any related UI issues.

Opacity, z-index, float, position

.modal-overlay {
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
background:transparent url(‘/close-button.png’) no-repeat scroll right top;

IE uses filter attribute and skips opacity attribute & other browsers skips filter.


Posted: June 14, 2010 in CSS
Tags: ,

50 New Useful CSS Techniques, Tools & Tutorials