Ik heb op internet gezocht, maar kon zo 1-2-3 geen oplossing hiervoor vinden. Voor school moet ik een opdracht maken: een website voor een fictief bedrijf met behulp van CSS, werkend in FF, IE, Safari en Opera. Nu heb ik iets gemaakt met verschillende divs en verschillende achtergronden. Eén van die achtergronden blijft uit in IE, namelijk die van de div met id="grass" :S Alle achtergronden hebben een PNG-extentie.
Nou goed, dit is de website en bijbehorende code. Vergelijk de weergave van FF/Safari/Opera maar eens met die van IE
Hopelijk ziet iemand wat er aan de hand is, dan hoor ik dat zéér graag.. =)
http://www.freewebs.com/robin_s/WerenTor/
Nou goed, dit is de website en bijbehorende code. Vergelijk de weergave van FF/Safari/Opera maar eens met die van IE
Hopelijk ziet iemand wat er aan de hand is, dan hoor ik dat zéér graag.. =)
http://www.freewebs.com/robin_s/WerenTor/
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>WerenTor - Home</title>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header"><h2>Home</h2><hr /></div>
<div id="content">
<p>Lorem ipsum dolor sit amet....</p></div></div>
<div id="grass">
<div>
<span class="m5"></span>
<span class="m3"></span>
<span class="m2"></span>
<span class="m1"></span>
<span class="m1"></span></div>
<div id="sky">
<div id="logo">Logo</div>
<div id="navigation">
Home<br />
<a href="missie.htm">Missie</a><br />
<a href="producten.htm">Producten</a><br />
<a href="referenties.htm">Referenties</a><br />
<a href="contact.htm">Contact</a></div></div>
<div id="footer">Webdesign by Robin S & Jimmy</div></div></div>
</body>
</html>
Code:
body {
margin: 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
#wrapper {
width: 780px;
height: 80%;
position: absolute;
left: 50%;
margin: 5% 0 5% -390px;
}
#container {
width: 530px;
float: left;
height: 100%;
background-image: url('img/bg2.png');
background-position: bottom left;
background-repeat: no-repeat;
}
#header {
min-height: 158px;
background-image: url('img/bg.png');
background-repeat: no-repeat;
margin: 0 0 -120px 0;
text-align: center;
padding: 10px 20px 0 20px;;
}
h2 {
margin: 0;
font-size: 20px;
font-weight: normal;
}
#content {
height: 80%;
margin: 0 20px 0 30px;
padding: 0;
overflow: auto;
font-size: 80%;
}
#grass {
float: left;
width: 250px;
height: 100%;
background-image: url('img/grass.png');
background-repeat: repeat-x;
background-position: bottom left;
border-style: solid;
border-width: 0 0 1px 0;
overflow: hidden;
}
#sky {
height: 96%;
background-image: url('img/sky.png');
background-repeat: repeat-x;
border-style: solid;
border-width: 0 1px;
clear: left;
padding: 0 10px;
}
#logo {
height: 200px;
}
#navigation {
font-size: 120%;
}
#footer {
height: 100%;
border-style: solid;
border-width: 0 1px;
border-color: #000;
text-align: right;
font-size: 10px;
background-image: url('img/footer.png');
background-repeat: repeat-y;
padding: 0 10px;
}
.m1 { margin: 0 1px;}
.m2 { margin: 0 2px;}
.m3 { margin: 0 3px;
border-width: 0 2px;}
.m5 { margin: 0 5px;
background-color: #000;}
span {
display: block;
height: 1px;
overflow: hidden;
background-color: #CBE3EA;
border-width: 0 1px;
border-style: solid;
}
a:link, a:active, a:visited {
text-decoration: none;
color: #999;
}
a:hover { color: #000;}
