transparent alpha opacity
-
div.box_background {
-
background-color: white;
-
height: 100%;
-
filter:alpha(opacity=75); /* IE’s opacity*/
-
left: 0px;
-
opacity: 0.75;
-
position: absolute;
-
top: 0px;
-
width: 100%;
-
z-index: 99;
-
}
Drop shadow div (IE)
<div style=” color: White; background-color: Maroon; width: 200px; height: 200px; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=’gray’, Positive=’true’)”> xxxxxxxxxx</div>
Solve problem Div Height for difference Browser (ie 6, ie 7, firefox and other)
<body style=”height: 100%; width: 100%; padding: 0px; margin: 0px;”>
IE.
HTML page:
<head>
<title>my css hacked page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”iehacks.css”>
<![endif]–>
<body>
<div class=”watermark”>….</div>…
styles.css
/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
background-color: black;
background-image: url(’images/gradient.jpg’);background-position: left top;
background-repeat: repeat-x;
} /* black background with gradient on top. */div.watermark {
background-image: url(’images/watermark.png’); /* transparent */
background-position: left top !important; /* for all but IE */
background-position: right top; /* for IE */
background-repeat: no-repeat;
}
iehacks.css
/* for IE6 and older */
div.watermark {
background-image: url(’images/watermark.gif’); /* here is a transparent that will be displayed better in IE6 and older */
}
Ofcourse above is just an example using semi-transparent png for all browsers but IE6 and older. Like that you’ll be able to make your website more compatible.
