...

View Full Version : drop down



timgolding
09-05-2007, 02:40 PM
Hi

I am having some difficulties with a drop down menu i am creating it works perfectly in FF but in IE the drop down has some problems

code:


<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jamie's Computers</title>
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css" />
<link href="./stylesheets/drop-down.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="jamies computer club, jamie's computers, disposal, WEEE, recycling, IT training, PC sales"/>
<script>
<!--
function toggle(obj) {
var el = document.getElementById(obj);
var i=1;
var string='submenu';
// close any open ones
for(i=1;i<=6;i++)
{
string+=i
var el2= document.getElementById(string);
if (obj!=string)
{
if (el2.style.display == 'block' ) {
el2.style.display = 'none';
}
}
string='submenu';
}

if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = 'block';
}

}
//-->
</script>
</head>
<body>
<div class="nav_bar">
<table id="top_nav">

<tr>
<td> <ul id="submenu1" onMouseout="toggle('submenu1')">
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
<a href="about.html" onMouseover="toggle('submenu1')">About us</a></td>

<td>
<ul id="submenu2" onMouseout="toggle('submenu2')">
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
<a href="recycling.php" onMouseover="toggle('submenu2')">Recycling</a></td>

<td>
<ul id="submenu3" onMouseout="toggle('submenu3')">
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
<a href="sales.html" onMouseover="toggle('submenu3')">Sales</a></td>

<td>
<ul id="submenu4" onMouseout="toggle('submenu4')">
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
<a href="training.php" onMouseover="toggle('submenu4')">Training</a></td>

<td>
<ul id="submenu5" onMouseout="toggle('submenu5')">
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
<a href="partners.html" onMouseover="toggle('submenu5')">Partners</a></td>

<td style="border-right:none;">

<ul id="submenu6" onMouseout="toggle('submenu6')">
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
<a href="contact.html" onMouseover="toggle('submenu6')">Contact us</a></td>

</tr>
</table>
</div>
</body>
</html>

CSS:


/* General CSS*/

body, tr, td
{
font-family: Verdana, Arial, sans-serif;
color:#183c47;
font-size:12px;
_font-size:100%;
margin:0;
padding:0;
vertical-align:top;
}


a, a:visited
{
color:#0081c6;
}







a:hover
{
color:#183c47;
}



p
{
font-family: Verdana, Arial, sans-serif;
color:#183c47;
font-size:12px;
_font-size:100%;
}






div#page
{
width:100%;
text-align:center;
}



ul
{
list-style-type: square;
margin-left:3em;
padding:0;
}

.nav_bar
{
height:30px;
width:760px;
background-color:#183c47;
overflow:hidden;
}



div#footer
{
text-align:center;
clear:both;
}

body
{
margin-top:0;
}




table#top_nav
{



}



table#top_nav tr td
{
border-right:2px groove #183c47;
_border-right-color:#8b9da3;
width:10%;
height: 26px;
padding-left:2px;
padding-right:2px;
padding-top:5px;
text-align:center;
}



table#top_nav tr td a
{
display:block;
text-decoration:none;
color:white;
border:2px outset #183c47;
_border-left-color:#8b9da3;
_border-top-color:#8b9da3;
}



table#top_nav tr td a:hover
{
color:white;
/*text-decoration:underline;*/
border:2px inset #183c47;
_border-right-color:8b9da3;
_border-bottom-color:8b9da3;
}

table#top_nav ul
{
display:none;
list-style:none;
position:absolute;
top:0;
bottom:0;
width:125px;
}



table#top_nav ul li
{
background-color:#183C47;
}




Any ideas whats causing this?

kosstr12
09-06-2007, 03:44 AM
What exactly are the problems, and could you give us a link to your page?


thanks,
koss

gemguy
09-06-2007, 06:33 AM
hi tim

i think the drop down issue have been discussed many times in this forum and still many of us starting a new thread for it. Its better to have a search in this forums related to that drop down issue and move for new thread.

timgolding
09-06-2007, 10:20 AM
I did :( but the problem is specific to this code and the nav bar must stay in the style.

ahallicks
09-06-2007, 12:42 PM
IE might be having a problem because it's working in quirksmode because of the xml statement before your doctype?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum