IE voegt hoogte toe aan de container door floats.
Ik heb geprobeerd de paddings te verwijderen, maar tevergeefs.
Ik heb een bijlage meegstuurt met afbeelding (ONDERAAN DE POST STAAT EEN LINK).
De CSS:
De html
Ik heb geprobeerd de paddings te verwijderen, maar tevergeefs.
Ik heb een bijlage meegstuurt met afbeelding (ONDERAAN DE POST STAAT EEN LINK).
De CSS:
Code:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color:#fff;
font-family:arial;
font-size:11px;
}
h1 {font-size: 1.4em;margin:1px;}
h2 {font-size: 1em;margin:1px;}
#wrapper{
margin-left:auto;
margin-right:auto;
}
#container{
width:965px;
background:#000;
}
#headertitle{
color:#9966cc;
padding-left:20px;
}
#headertext{
color:#9370DB;
padding-left:20px;
}
#header{color:#4682b4;}
#twitter{padding-left:20px;}
#navigation{list-style-type:none;}
#navigation li a{
color:#000;
font-size:12px;
text-decoration:none;
}
#navigation li a.menuitem {
background:url('../images/btn_menuitem.png') repeat-x;
}
#navigation li a.active {
background:url('../images/btn_menuactive.png') repeat-x;
}
#top{
width:965px; height:80px;
background:url('../images/top.png') no-repeat top left;
}
#left{
float:left;
width:45px; height:601px;background:#fff;
}
#middle{
float:left;
width:840px;
}
#content{
float:left; width:580px; padding-top:10px;
}
#contenthead{width:100%;height:120px;}
#contentleft1{
float:left;
width:270px; height:470px;
padding-left:20px;
}
#contentleft2{
float:left;
width:270px; height:470px;
padding-left:20px;
}
#contentright{
float:left;
width:259px; height:601px;
background: #000 url('../images/inner_right.png') top left no-repeat; border-left:1px dotted #fff;
}
#right{
float:left;
width:80px; height:601px;
background:url('../images/right.png') no-repeat top left;
}
#bottom{
background:url('../images/bottom.png') no-repeat top left;
width:100%; height:80px;
padding-left:60px;
}
#clear{clear:both; width:100%;}
#widgets{padding-left:150px; padding-top:35px;}
#widgets a{text-decoration:none;}
#widgets img{border:none;}De html
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/pixieboxnl/public/css/site.css" media="screen" />
<link rel="shortcut icon" href="/public/images/favicon.ico" />
<script type="text/javascript" src="/public/js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/public/js/jquery/jquery-ui.1.5.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="top">
</div>
<div id="left">
</div>
<div id="middle">
<div id="content">
<div id="contenthead">
<h1 id="headertitle">Over Pixiebox</h1>
<h2 id="headertext">"Don't be square." </h2>
<p id="twitter">
Latest tweet:
<ul id="twitter_update_list"><li></li></ul>
</p>
</div>
<div id="contentleft1">
<p>
Pixiebox
</p>
<p>
Loopt u al enige tijd rond
<br />
Een concept.
</p>
</div>
<div id="contentleft2">
nog meer inhoud
</div>
<div id="clear">
</div>
</div>
<div id="contentright">
<div id="widgets"><a href="#" onClick="visitLinkedin();return false;"><img src="/public/images/linkedin/linkedin_icon.png"/></a><a href="#" onClick="followMe();return false;"><img src="/public/images/twitter/twitter_icon.png"/></a></div>
<div id="nav">
<ul id="navigation">
<li><a href="/public" class="active">Over Pixiebox</a></li>
<li><a href="/public/services/index/index" class="menuitem">Diensten</a></li>
<li><a href="/public/offer/form/step1" class="menuitem">Offerte</a></li>
<li><a href="/public/contact/mail/index" class="menuitem">Contact</a></li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
<div id="right">
</div>
<div id="clear">
</div>
<div id="bottom">
© 2010 Pixiebox <a href="/public/contact/form/mail">contact</a> <a href="/public/agreement">Voorwaarden</a>
</div>
</div>
</div>
</body>
</html>
Laatst bewerkt:
