This is not for me, its for my brother, he is building a site and the dropdown menu he created in CSS only works in firefox, iv tried the external javascript file linked to the page but it still dont work in IE...
Im not sure what he has done but the code is slightly messy with style elements in the main HTML page.
HTML
CSS
JavaScript
can someone look at it and give any hints..
Ta
Im not sure what he has done but the code is slightly messy with style elements in the main HTML page.
HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="CSS/Level1_Verdana.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-size: x-small;
}
.style2 {font-size: x-small}
-->
</style>
</head>
<body bgcolor="#CCCCCC">
<table class ="main" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="700" height="250" align="center" valign="bottom" bordercolor="#000000" background="graphics/banner.jpg" class="logo" title="Logo"> </td>
</tr>
<tr>
<td class="menu">
<ul>
<li><h1 class="linktitle">GREEN DAY</h1>
<ul id="nav">
<li><a href="#">Biography</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Awards</a></li>
</ul>
</li>
<li><h1 class="linktitle">FAN SECTION</h1>
<ul id="nav">
<li><a href="#">FAN ART</a></li>
<li><a href="#">YOUR MUSIC</a></li>
<li><a href="#">GREEN DAY GAMES</a></li>
<li><a href="#">CHAT</a></li>
<li><a href="#">CONTESTS</a></li>
<li><a href="#">WEEKLY VIDEO</a></li>
</ul>
</li>
</ul>
<li><h1 class="linktitle">DOWNLOAD</h1>
<ul id="nav">
<li><a href="#">WEEKLY VIDEO</a></li>
<li><a href="#">RADIO</a></li>
<li><a href="#">WALLPAPERS</a></li>
<li><a href="#">SONGS</a></li>
<li><a href="#">RING TONES</a></li>
</ul>
</li>
</ul>
<li><h1 class="linktitle">THE SITE</h1>
<ul id="nav">
<li><a href="#">CONTACT US</a></li>
<li><a href="#">STAFF</a></li>
<li><a href="#">FEED BACK</a></li>
</ul>
</li>
<a class="h1" href="">FORUM</a>
</td>
</tr>
<tr>
<td class="stage" height="700" align="left" valign="top" bgcolor="#FFFFFF"><div align="center"><span class="style2">Currently under cunstruction </span></div></td>
</tr>
<tr>
<td bgcolor="#000000"><div align="center"><span class="style1">© Copywrite of greenday.co.uk 2005/2006</span></div></td>
</tr>
</table>
</body>
</html>CSS
Code:
/****** Background scene ******/
body {font-family: Verdana, Geneva, Arial, helvetica, sans-serif; background-image: url(../graphics/bg.jpg);}
A:visited {color: #000000; font-size: x-small; text-decoration: none}
A:link {color: #000000; font-size: x-small; text-decoration: none}
A:active {color: #000000; font-size: x-small; text-decoration: none}
A:hover {color: #999999; background-color: lightslategray; font-size: x-small; text-decoration: underline overline}
A.h1:visited {color: #FFFFFF; font-size: x-small; v-align: bottom; text-decoration: none}
A.h1:link {color: #FFFFFF; font-size: x-small; v-align: bottom; text-decoration: none}
A.h1:active {color: #FFFFFF; font-size: x-small; v-align: bottom; text-decoration: none}
A.h1:hover {color: #CCCCCC; background-color: black; v-align: bottom; font-size: x-small; text-decoration: none underline overline}
/****** Tables ******/
td {font-family: Verdana, Geneva, Arial, helvetica, sans-serif;}
th {font-family: Verdana, Geneva, Arial, helvetica, sans-serif;}
table.main {background-color: #000000; border-color: #000000;}
td.menu{ background-color: #000000; color: #000000; vertical-align: top;}
td.stage{
height: 700px;
vertical-align: top;
border-right-color: #000000;
border-right-width: 1px;
border-right-style: solid;
border-left-color: #000000;
border-left-style: solid;
border-left-width: 1px;
}
/****** Text and Links ******/
a.h2 {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; vertical-align: bottom;
border-right-color: #000000;
border-right-color: #000000;
border-right-color: #FFFFFF;
width: 700px;
}
/****** Drop down menu (leave alone!!!!!)******/
h1.linktitle{font-family: Arial, Helvetica, sans-serif;
font-size: x-small; font-style: normal; font-weight: bold; font-variant: small-caps; white-space: normal; background-color: #010101; color: #FFFFFF; border-top-width: thin; vertical-align: top; list-style-position: inside; display: inline;}
a.h2 {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; vertical-align: bottom;}
ul {padding: 0; margin: 0; list-style: none; vertical-align: top;}
li ul {display: none; position: absolute; top: 1em; left: 0;}
li > ul {top: auto; left: auto;}
li:hover ul, li.over ul{ display: block; }
li {float: left; position: relative; width: 6em;JavaScript
Code:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
window.onload=startList;
}
}can someone look at it and give any hints..
Ta