ik ben bezig mijn website een beetje op te fleuren, ronde hoekjes enzo, beetje schaduw. maar nou lukt dat niet helemaal. het gebruik van "opacity" of rgba werkt niet. ook border radius werkt niet, en ik krijg het ook niet aan het werk met een .htc bestand
dit is de css
body {
color: #000000;
background: #FFFFFF url(patroon.png) center;
background-repeat: repeat-y;
text-align: center;
font-family: arial;
}
#header {
width: 806px;
height: 200px;
background: #FFFFFF url(logo.png);
border-style: solid;
border-width: 3px;
border-color: #00A2E8;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
padding: 0 0 0 0;
filter:alpha(opacity=85);
-moz-box-shadow: 5px 4px 6px #666666;
-webkit-box-shadow: 5px 4px 6px #666666;
box-shadow: 5px 4px 6px #666666;
}
a img {
border: 0px;
}
#main {
width: 806px;
min-height: 280px;
height: auto !important;
height: 280px;
border: 3px solid #00A2E8;
background: #FFFFFF none;
font-family: arial;
font-size: 14px;
padding: 20px 20px 20px 20px;
text-align: left;
}
#disclaimer {
width: 806px;
height: 80px;
font-family: arial black;
font-size: 12px;
color: #FFFFFF;
border: 3px solid #666666;
background-color: #00A2E8;
margin: 15px 0 0 0;
filter:alpha(opacity=80);
}
#menu {
width: 806px;
height: 60px;
background: #E0E0E0 none;
border: solid 3px #00A2E8;
margin: 15px 0 15px 0;
filter:alpha(opacity=80);
}
a.menu:link, a.menu:visited {
font-family: arial;
text-align: center;
line-height: 60px;
width: 160px;
background: transparent url(knop1.png) no-repeat center;
float: left;
display: inline;
text-decoration: none;
color: #000000;
font-weight: bold;
font-size: 18px;
}
a.menu:hover, a.menu:active {
text-align: center;
font-family: arial;
line-height: 60px;
width: 160px;
background: transparent url(knop2.png) no-repeat center;
float: left;
display: inline;
text-decoration: none;
color: #000000;
font-weight: bold;
font-size: 18px;
}
h3 {
font-family: Candara, Eras Demi ITC, Arial black;
font-size: 20px;
}
h2 {
color: #ff0000;
font-size: 14px;
text-align: center;
}
a {
text-decoration: none;
padding-left: auto;
padding-right: auto;
font-weight: bold;
}
a:link, a:visited {
color: #000000;
}
a:hover, a:active {
color: #00A2E8;
}
.bericht {
width: 700px;
height: 250px;
}
p {
font-family: arial;
font-weight: bold;
font-size: 18px;
}
#login {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 300px;
height: 100px;
background: #FFFFFF;
border: 2px solid;
text-align: center;
padding: 20px 20px 20px 20px
}
h1 {
font-size: 22px;
color: #00A2E8;
}
en dit is de html code
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>blabla</title>
<!--[if IE]><link rel="stylesheet" type="text/css" href="stylesheetie.css" /><![endif]-->
<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="stylesheet.css" /><!--<![endif]-->
blabla meta's van SEO
</head>
<body>
<div id="header">
</div>
<div id="menu">
<p>
blabla menu
</p>
</div>
<div id="main">
<h1>Home</h1>
blabla<br /><br />
<br />
Klanten kunnen <a href="login.php">hier inloggen</a>
</div>
<div id="disclaimer">
<br />
blabla
</div>
</body>
</html>
ik gebruik zoals je ziet een speciale stylesheet voor IE. was even de makkelijkste oplossing. die staat ook hier gekopieerd, veranderen van stylesheet zorgt niet voor de juiste werking in IE9
