I try to get a tabbed display work both in IE (6 and 7) and Firefox. The
last does give a problem. What's going wrong here? I'm totally puzzled.
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w4.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Tabbed display</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
body
{
text-align:center;
font-family : "Times New Roman", Times, serif;
font-size:12pt;
}
#main
{
position:relative:
color:black;
background-color:#CCCCCC;
border:1px solid gray;
width:800px;
text-align:left;
}
#main h1
{
font-size:3.0em;
font-style:italic;
font-weight:bold;
padding-left:10px;
padding-bottom:0px;
margin-bottom:0px;
}
#main p
{
font-size:1.0em;
font-style:italic;
padding-left:10px;
padding-top:0px;
padding-right:10px;
padding-bottom:10px;
}
#header
{
position:relative;
top:0px;
left:0px;
height:110px;
}
#footer
{
font-size:0.8em;
position:relative;
background-color:#D0D0D0;
width:100%;
text-align:center;
}
#sheet
{
float:clear;
padding-left:20px;
padding-top:20px;
color:red;
}
#tabs
{
float: left;
width: 100%;
height:100%;
background-color:white;/*#CCCCCC;*/
font-size: 100%;
border-bottom: 1px solid black;
line-height: normal;
}
#tabs ul
{
margin: 0;
padding: 0;
list-style: none;
}
#tabs li
{
float: left;
margin: 10px;
padding: 2px 12px 0px 12px;
background-color:#CCCCCC;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 0px solid black;
border-right: 1px solid black;
}
#tabs a
{
display: block;
text-decoration: none;
font-weight: bold;
}
#tabs li.current
{
position:relative;
background-color: transparant;
border-left:1px solid black;
border-top: 1px solid black;
border-bottom: 2px solid #CCCCCC;
border-right: 1px solid black;
margin-bottom: 0;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Tabbed display</h1>
</div>
<div id="tabs">
<ul>
<li class='current'><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</div>
<div id='sheet'>
<p>Text per sheet goes here</p>
<div id="footer">
<p>Footer text</p>
</div>
</div>
</div>
</body>
</html>
