HTML:
<?php
?>
<!DOCTYPE HTML>
<html>
<head>
<!--[if lt IE 7 ]> <html class="ie6" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="" lang="en" xml:lang="en" dir="ltr"> <!--<![endif]-->
<title>Silverworx Nederland | Home</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.slideshow.js"></script>
<script src="jquery.boxes.js"></script>
<?php
include "inc/tags.php"
?>
</head>
<body>
<div id="header">
<div id="logo">
<a href="http://www.silverworx.nl"><img src="silverworxhome.png" width="100%" height="45px"></img></a>
</div>
<div id="navmenu">
<ul>
<li class="webdesign"><a href="/design/index.html">Webdesign</a></li>
<li class="webhosting"><a href="/hosting/index.html">Webhosting</a></li>
<li class="overons"><a href="about.php">Over ons</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
</ul>
</h1>
</div>
</div>
<div id="body">
<div id="boxesandrounds">
<div id="box1">
<div id="round1">
<div id="inrounds1">
</div>
</div>
<div id="contentbox">Hier komt de tekst.
</div>
</div>
<div id="box2">
<div id="round2">
<div id="inrounds2"></div>
</div>
<div id="contentbox">Hier komt de tekst.
</div>
</div>
<div id="box3">
<div id="round3">
<div id="inrounds3"></div>
</div>
<div id="contentbox"><b>Continuïteit<br><br>Continuïteit is heel belangrijk bij webdesign. Blijven updaten, blijven aanpassen zodat zowel de inhoud als de lay-out niet outdatet wordt.
</div>
</div>
</div>
</div>
<div id="footer">
<div id="links">
© Silverworx 2014 <a href="#">Webdesign</a> | <a href="#">Webhosting</a> | <a href="#">Webservice</a> | <a href="#">Over ons</a> | <a href="#">Contact</a>
</div>
<div id="logo2">
</div>
</div>
</body>
</html>
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#header {
margin: 0;
height: 60px;
width: 100%;
background: #fff;
color: #fff;
float: left;
border-bottom: 1px solid #000;
}
#logo {
margin-top: 5px;
margin-left: 15px;
height: 45px;
width: 32%;
float: left;
}
#navmenu {
margin-left: 52%;
margin-top: 5px;
padding: 0;
width: 47%;
height: 45px;
}
#navmenu ul {
padding: 0;
margin-top: 10px;
list-style: none;
}
#navmenu ul li a {
color: #909090;
text-decoration: none;
display: block;
font-family: Verdana;
}
#navmenu a:hover {
border-bottom: 1px solid #000;
padding-bottom: 2px;
color: #000;
}
#navmenu .webdesign {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .1%;
width: 21%;
padding: 10px;
text-align: center;
float: left;
}
#navmenu .webhosting {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .1%;
width: 21%;
padding: 10px;
text-align: center;
float: left;
}
#navmenu .overons {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .7%;
width: 18%;
padding: 10px;
text-align: center;
float: left;
}
#navmenu .contact {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 1.3%;
width: 15%;
padding-top: 10px;
padding-left: 0px;
text-align: center;
float: left;
}
#body {
margin: 0;
width: 100%;
float: left;
}
#boxesandrounds {
margin-top: 0;
width: 100%;
float: left;
}
#box1 {
margin-left: 10%;
margin-top: 30px;
height: 300px;
width: 25%;
float: left;
border: 1px solid #ecebe9;
}
#box2, #box3 {
margin-top: 30px;
margin-left: 2.5%;
height: 300px;
width: 25%;
float: left;
border: 1px solid #ecebe9;
}
#round1, #round2, #round3 {
margin: 10px auto;
height: 120px;
width: 120px;
border-radius: 60px;
background: #ecebe9;
}
#round1 {
margin-left: 30%;
float: none;
}
#contentbox {
margin-top: 0px;
text-align: center;
width: 100%;
height: 75px;
color: #777;
}
#inrounds1 {
margin-top: 25px;
margin-left: 23%;
height: 60px;
width: 54%;
float: left;
background: url(heart.png);
}
#inrounds2 {
margin-top: 25px;
margin-left: 23%;
height: 60px;
width: 54%;
float: left;
background: url(check.png);
}
#inrounds3 {
margin-top: 25px;
margin-left: 23%;
height: 60px;
width: 54%;
float: left;
background: url(man.png);
}
#box1:hover {
-webkit-box-shadow: 0px 5px 10px #999;
box-shadow: 0px 5px 10px #999;
margin-top: 28px;
}
#box2:hover {
box-shadow: 0px 5px 10px #999;
margin-top: 28px;
}
#box3:hover {
box-shadow: 0px 5px 10px #999;
margin-top: 28px;
}
#box1:hover #inrounds1 {
background: url(check.png);
transition: .5s;
}
#box2:hover #inrounds2 {
background: url(man.png);
transition: .5s;
}
#box3:hover #inrounds3 {
background: url(heart.png);
transition: .5s;
}
#footer {
margin-top: 10px;
height: 100px;
width: 100%;
color: #fff;
background: #1C1C1C;
float: left;
font-family: Verdana;
}
#links {
margin-top: 50px;
margin-left: 5%;
height: 30px;
width: 60%;
float: left;
}
#links a {
color: #fff;
text-decoration: none;
}
#links a:hover {
text-decoration: underline;
}
#logo2 {
margin-top: 48px;
margin-left: 77%;
border: 1px solid #fff;
height: 50px;
width: 22%;
}Dit is een HTML en een CSS bestand.
Dit werkt echt helemaal top in Chrome, alleen in Internet Explorer doet ie het niet even goed als in Chrome.
Hoe kan ik ervoor zorgen dat de website in Internet Explorer even goed werkt als in Chrome?
