I modified project1 of 'CSS Projects Instant Results'. The code is appended below. The tabs works exactly in IE6 but doesn't work in firefox 3 & opera 9.26. Plz help. Where am I going wrong?
HTML Code:
<!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' xml:lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel='stylesheet' type='text/css' href='tabs.css' />
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.
js" type="text/javascript"></script>
<![endif]-->
</head>
<body id='home' bgcolor="lime">
<ul id='tabs'>
<li>
<img alt="Banner" src="../Aurora/Header.gif" width="999" height="100" /></li>
<li id='tab1'><a href='home.html'><span>Home</span></a></li>
<li id='tab2'><a href='films.html'><span>Films</span></a></li>
<li id='tab3'><a href='docu.html'><span>Documentaries</span></a></li>
<li id='tab4'><a href='awards.html'><span>Awards</span></a></li>
<li id='tab5'><a href='studio.html'><span>Studio</span></a></li>
<li id='tab6'><a href='as.html'><span>About Us</span></a></li>
</ul>
<div id='iframe' style="left: 6; right: -6; top: 0; bottom: 0">
<iframe src='http://home.html' frameborder='0' marginheight='0' marginwidth='0'></iframe>
</div>
<br /><br />
<p>Welcome to Aurora</p>
</body>
</html>
////////////////////////////////////////////////////////////////////
CSS Code:
body, html {
margin: 0;
padding: 0;
}
ul#tabs {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid black;
background: rgb(222, 222, 222);
}
ul#tabs li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid black;
top: 1px;
background: rgb(128, 128, 128);
}
ul#tabs li:hover {
border-bottom: 1px solid white;
background: white;
}
ul#tabs a {
display: block;
height: 100%;
text-decoration: none;
color: white;
font: 14px Arial, sans-serif;
}
body#index li#tab1,
body#films li#tab2,
body#documentaries li#tab3,
body#awards li#tab4,
body#studio li#tab5,
body#as li#tab6 {
background: white;
border-bottom: 1px solid white;
}
ul#tabs a:hover,
body#index li#tab1 a,
body#films li#tab2 a,
body#documentaries li#tab3 a,
body#awards li#tab4 a,
body#studio li#tab5 a,
body#as li#tab6 a {
color: black;
}
ul#tabs span {
display: block;
padding: 4px 10px 0 10px;
}
div#iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 50px;
border-top: 1px solid black;
}
iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
Tabs in Firefox 3 Opera 9.26
