i have a problem with a small sample code including a sample for opacity:
The preview in WeBuilder 2011 with Firefox is correct - divs are shown with different opacity backgrounds
The preview in WeBuilder 2011 with IE is not correct - divs are shown with full white backgrounds
The same code shown with IE directly is ok - divs are shown with different opacity backgrounds
The same problem i have with border-radius...always a problem with the preview and IE..
The used options with WeBuilder are: HTML5, CSS Level 3
OS: W7 64 bit, IE 64 Version 9.02
Have you a tip for me, some switch in the options or so ?!?
So long,
Hans
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opacity</title>
<style>
/* Muster stammt von http://www.squidfingers.com/patterns/ */
body {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
background-image: url(pattern_144.gif);
}
div {
margin-top: 50px;
background-color: white;
color: black;
width: 120px;
height: 300px;
float: left;
font-size: 4em;
font-weight: bold;
line-height: 300px;
text-align: center;
}
#eins {
opacity: 0;
}
#zwei {
opacity: 0.2;
}
#drei {
opacity: 0.4;
}
#vier {
opacity: 0.6;
}
#fuenf {
opacity: 0.8;
}
#sechs {
opacity: 1;
}
</style>
</head>
<body>
<div id="eins">
0
</div>
<div id="zwei">
0.2
</div>
<div id="drei">
0.4
</div>
<div id="vier">
0.6
</div>
<div id="fuenf">
0.8
</div>
<div id="sechs">
1
</div>
</body>
</html>