Hoi,
ik heb een layout met een aantal tabbladen gemaakt. Zie deze pagina. In FF en Safari ziet alles eruit zoals het hoort. Het witte blok (van de pagina die is geopend) sluit aan bij het content gedeelte van de pagina. Echter, wanneer je de pagina in MSIE7 bekijkt, word er een soort padding toegevoegd aan de onderkant, waardoor je nog een niet al te kleine groene balk onder de tabbladen hebt staan. Niet erg mooi dus en niet de bedoeling van de layout.
CSS nog eens doorgelopen maar vind niet wat er ontbreekt of mis is. Kan iemand me helpen?
Alvast bedankt.
ik heb een layout met een aantal tabbladen gemaakt. Zie deze pagina. In FF en Safari ziet alles eruit zoals het hoort. Het witte blok (van de pagina die is geopend) sluit aan bij het content gedeelte van de pagina. Echter, wanneer je de pagina in MSIE7 bekijkt, word er een soort padding toegevoegd aan de onderkant, waardoor je nog een niet al te kleine groene balk onder de tabbladen hebt staan. Niet erg mooi dus en niet de bedoeling van de layout.
CSS nog eens doorgelopen maar vind niet wat er ontbreekt of mis is. Kan iemand me helpen?
Alvast bedankt.
HTML:
<html>
<head>
<title>tabs</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#headstroke{
background-color: #009933;
}
#header{
width: 800px;
background-color: #009933;
color: #FFFFFF;
font-family: Verdana;
padding-bottom: 25px;
text-align: left;
}
#header #title{
color: #FFFFFF;
font-size: 25pt;
padding: 30px;
padding-top: 40px;
}
#navigation{
margin: 0px;
padding: 0px;
}
#navigation li{
float: left;
list-style: none;
padding: 0px;
margin: 0px;
}
#navigation li.push{
float: right;
}
#navigation li a{
background-color: #009933;
color: #FFFFFF;
display: block;
text-decoration: none;
padding: 0px 15px 0px;
line-height: 25px;
}
#navigation li a:hover{
background-color: #006633;
color: #FFFFFF;
}
#navigation li a:active{
background-color: #666666;
color: #FFFFFF;
}
#navigation li a.opentab{
background-color: #FFFFFF;
color: #333333;
}
#navigation li a.opentab:hover{
background-color: #FFFFFF;
color: #333333;
}
</style>
</head>
<body>
<div id="headstroke">
<center>
<div id="header">
<div id="title">Tabbladen</div>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#" class="opentab">Projects</a></li>
<li><a href="#">ROFL</a></li>
<li><a href="#">Contact</a></li>
<li class="push"><a href="#">Login</a></li>
</ul>
</div>
</center>
</div>
</body>
</html>
Laatst bewerkt: