.classname { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */ }
Reference – http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
.classname { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */ }
Reference – http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js” language=”javascript”></script>
<script language=”javascript”>
$(document).ready(function() {
window.setTimeout(function() {$(‘#box’).removeClass(“box1”).addClass(“boxCls”);}, 5000);
});
</script>
<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;
float:left;
}
</style>
</head>
<body>
<div id=”box” class=”box1″>Box</div>
</body>
</html>
IE6/IE7 are tough browsers to fix any UI related issues. You need to understand few hacks to solve those issues. Refer http://www.webdevout.net/css-hacks 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 {
opacity:0.85;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
overflow:hidden;
cursor:pointer;
position:absolute;
z-index:102;
background:transparent url(‘/close-button.png’) no-repeat scroll right top;
}
IE uses filter attribute and skips opacity attribute & other browsers skips filter.
50 New Useful CSS Techniques, Tools & Tutorials
http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/