vpf-shinobi
01-17-2008, 12:24 PM
hi,
i have a menu that works fine with firefox, but not with ie and opera..
can someone help me with this?
here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De Donkere Wolk - Nieuws</title>
<style type="text/css">
/* navigation */
#navbox, #navbox ul {
float: left;
text-align: center;
list-style: none;
line-height: 26px;
background: #EFF1F1;
padding: 0 0 0 0;
margin: -20px 0 0 0;
}
#navbox li {
float: left;
padding: 0;
width: 95px;
text-indent: 2px;
}
#navbox li:hover {
border-bottom: 0px solid #7C7A7B;
}
#navbox .noexpand:hover {
border-bottom: 0px solid #7C7A7B;
}
#navbox li ul {
position: absolute;
left: -999em;
height: auto;
width: 190px;
margin: 0 0 0 0;
background: url(/menu_bg.png) bottom left no-repeat;
border-right: 1px solid #7C7A7B;
}
#navbox li li {
padding: 0 0 0 5px;
width: 190px;
text-align: left;
border-bottom: 0;
border-top: 0;
margin: 0;
}
#navbox li li ul {
border-top: 1px solid #7C7A7B;
}
#navbox li ul ul {
margin: -18px 0 0 190px;
}
#navbox li:hover ul ul, #navbox li:hover ul ul ul, #navbox li:hover ul ul ul ul, #navbox li.sfhover ul ul, #navbox li.sfhover ul ul ul, #navbox li.sfhover ul ul ul ul {
left: -999em;
}
#navbox li:hover ul, #navbox li li:hover ul, #navbox li li li:hover ul, #navbox li li li li:hover ul, #navbox li.sfhover ul, #navbox li li.sfhover ul, #navbox li li li.sfhover ul, #navbox li li li li.sfhover ul {
left: auto;
}
#navbox a {
display: block;
color: #666666;
text-decoration: none;
font-weight: normal;
}
#navbox a:hover {
color: black;
LEFT: 0px;
POSITION: relative;
TOP: 0px;
}
#navbox .treenode {
background-image: url(../../images/travian_1/expand.png);
}
#navbox .treenode:hover {
background-position: bottom;
}
#navbox .noexpand:hover {
border-bottom: 0px solid #7C7A7B;
}
#navbox .external {
background-image: url(../../images/travian_1/external.png);
}
#navbox .external:hover {
background-position: bottom;
}
/* end of navigation */
/* tabel eig */
table.sample3 {
border-width: 1px 0px 1px 0px;
border-spacing: 0px;
border-style: ridge ridge ridge ridge;
border-color: 7C7A7B black 7C7A7B black;
border-collapse: separate;
background-color: EFF1F1;
}
table.sample3 th {
border-width: 1px 1px 1px 1px;
padding: 0px 0px 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: EFF1F1;
-moz-border-radius: 0px 0px 0px 0px;
}
table.sample3 td {
border-width: 1px 1px 1px 1px;
padding: 1px 0px 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: EFF1F1;
-moz-border-radius: 0px 0px 0px 0px;
/* einde tabel eig */
</style>
</head>
<body>
<br />
<table width="100%" cellpadding="0" cellspacing="0" id="menu" bgcolor="#EFF1F1" class="sample3">
<tr>
<td>
<font color="#EFF1F1">.</font>
<ul id="navbox">
<li><a class="noexpand " href="#">Admin Menu</a>
<ul>
<li><a href="#">Post Nieuws</a></li>
<li><a href="#">Poll</a></li>
<li><a href="#">Statistieken</a></li>
<li><a href="#">Gebruikersoverzicht</a></li>
<li><a href="#">donkerewolk.net</a></li>
<li><a href="#">phpMyAdmin</a></li></ul></li>
<li><a class="treenode " href="#">Nieuws</a>
<li><a class="treenode " href="#">Competitie</a>
<ul>
<li><a href="#">Kalender</a></li>
<li><a href="#">Rangschikking</a></li></ul></li>
<li><a class="treenode " href="#">Spelers</a>
<ul>
<li><a href="#">Overzicht</a></li>
<li><a href="#">Statistieken</a></li></ul></li>
<li><a class="noexpand " href="#">Media</a>
<ul>
<li><a href="#">FotoAlbum</a></li>
<li><a href="#">Filmkes</a></li></ul></li>
<li><a class="noexpand " href="#">Gastenboek</a>
<li><a class="noexpand " href="#">Forum</a>
<li><a class="noexpand " href="#">Links</a>
<li><a class="noexpand " href="#">Log Uit</a></li></ul></li>
</div>
</td>
</tr>
</table>
<br />
</body>
</html>
i have a menu that works fine with firefox, but not with ie and opera..
can someone help me with this?
here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De Donkere Wolk - Nieuws</title>
<style type="text/css">
/* navigation */
#navbox, #navbox ul {
float: left;
text-align: center;
list-style: none;
line-height: 26px;
background: #EFF1F1;
padding: 0 0 0 0;
margin: -20px 0 0 0;
}
#navbox li {
float: left;
padding: 0;
width: 95px;
text-indent: 2px;
}
#navbox li:hover {
border-bottom: 0px solid #7C7A7B;
}
#navbox .noexpand:hover {
border-bottom: 0px solid #7C7A7B;
}
#navbox li ul {
position: absolute;
left: -999em;
height: auto;
width: 190px;
margin: 0 0 0 0;
background: url(/menu_bg.png) bottom left no-repeat;
border-right: 1px solid #7C7A7B;
}
#navbox li li {
padding: 0 0 0 5px;
width: 190px;
text-align: left;
border-bottom: 0;
border-top: 0;
margin: 0;
}
#navbox li li ul {
border-top: 1px solid #7C7A7B;
}
#navbox li ul ul {
margin: -18px 0 0 190px;
}
#navbox li:hover ul ul, #navbox li:hover ul ul ul, #navbox li:hover ul ul ul ul, #navbox li.sfhover ul ul, #navbox li.sfhover ul ul ul, #navbox li.sfhover ul ul ul ul {
left: -999em;
}
#navbox li:hover ul, #navbox li li:hover ul, #navbox li li li:hover ul, #navbox li li li li:hover ul, #navbox li.sfhover ul, #navbox li li.sfhover ul, #navbox li li li.sfhover ul, #navbox li li li li.sfhover ul {
left: auto;
}
#navbox a {
display: block;
color: #666666;
text-decoration: none;
font-weight: normal;
}
#navbox a:hover {
color: black;
LEFT: 0px;
POSITION: relative;
TOP: 0px;
}
#navbox .treenode {
background-image: url(../../images/travian_1/expand.png);
}
#navbox .treenode:hover {
background-position: bottom;
}
#navbox .noexpand:hover {
border-bottom: 0px solid #7C7A7B;
}
#navbox .external {
background-image: url(../../images/travian_1/external.png);
}
#navbox .external:hover {
background-position: bottom;
}
/* end of navigation */
/* tabel eig */
table.sample3 {
border-width: 1px 0px 1px 0px;
border-spacing: 0px;
border-style: ridge ridge ridge ridge;
border-color: 7C7A7B black 7C7A7B black;
border-collapse: separate;
background-color: EFF1F1;
}
table.sample3 th {
border-width: 1px 1px 1px 1px;
padding: 0px 0px 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: EFF1F1;
-moz-border-radius: 0px 0px 0px 0px;
}
table.sample3 td {
border-width: 1px 1px 1px 1px;
padding: 1px 0px 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: EFF1F1;
-moz-border-radius: 0px 0px 0px 0px;
/* einde tabel eig */
</style>
</head>
<body>
<br />
<table width="100%" cellpadding="0" cellspacing="0" id="menu" bgcolor="#EFF1F1" class="sample3">
<tr>
<td>
<font color="#EFF1F1">.</font>
<ul id="navbox">
<li><a class="noexpand " href="#">Admin Menu</a>
<ul>
<li><a href="#">Post Nieuws</a></li>
<li><a href="#">Poll</a></li>
<li><a href="#">Statistieken</a></li>
<li><a href="#">Gebruikersoverzicht</a></li>
<li><a href="#">donkerewolk.net</a></li>
<li><a href="#">phpMyAdmin</a></li></ul></li>
<li><a class="treenode " href="#">Nieuws</a>
<li><a class="treenode " href="#">Competitie</a>
<ul>
<li><a href="#">Kalender</a></li>
<li><a href="#">Rangschikking</a></li></ul></li>
<li><a class="treenode " href="#">Spelers</a>
<ul>
<li><a href="#">Overzicht</a></li>
<li><a href="#">Statistieken</a></li></ul></li>
<li><a class="noexpand " href="#">Media</a>
<ul>
<li><a href="#">FotoAlbum</a></li>
<li><a href="#">Filmkes</a></li></ul></li>
<li><a class="noexpand " href="#">Gastenboek</a>
<li><a class="noexpand " href="#">Forum</a>
<li><a class="noexpand " href="#">Links</a>
<li><a class="noexpand " href="#">Log Uit</a></li></ul></li>
</div>
</td>
</tr>
</table>
<br />
</body>
</html>