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 – http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js&#8221; 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.

CSS

Posted: June 14, 2010 in CSS
Tags: ,

50 New Useful CSS Techniques, Tools & Tutorials

http://www.smashingmagazine.com/2010/06/10/50-new-useful-css-techniques-tools-and-tutorials/