...

View Full Version : drop down menu - doesn't work for ie pc



lehdesigns
04-30-2006, 04:51 AM
This works fine in ff. But ie on the pc -- I can choose. Either have the drops look correct (all words on one line) OR the links can work. Cannot get both!! I've tried so many different things I don't know where to look anymore.
Sometimes I can get them to link when they look right, but only if you sneak up on the words just right. Argh.
Please help me keep my hair!


<!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=ISO-8859-1" />

<title>tsglabs.com | testing services group</title>

<script type="text/javascript" language="JavaScript">
<!--
sfHover = function() {
var sfEls = document.getElementById("navdrop").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//-->
</script>

<style type="text/css">
<!--
html {
background-color:#9ec1a0;
}
body {
font-size: 76%;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:center; /*centered in ie*/
color:#000;
background:#9ec1a0 url(../images/headerback.jpg) repeat-x top left;
}
#wrapper { /*keep layout tidy*/
width:56em;
margin: 0 auto;
text-align:left;/*puts text back properly*/
border:1px solid #999;
background-color:#e6e6e6;
}
#navigation {
width:37em;
height:2em;
background-color:#ccc;
float:left;
}
/*navitation and drop handling*/
#navigation ul {
margin:0;
padding:0;
list-style:none;
font-size:1em;
float:left;
text-transform:lowercase;
}
#navigation ul li {
position:relative;
display:block;
float:left;
width:12.18em;
border-right:2px solid #fff;
height:2em;
}
#navigation ul li a {
display: block;
text-decoration: none;
color: #000;
padding: 5px 0 2px;
background-color:#ccc;
font-weight:bold;
letter-spacing:.1em;
text-align:center;
}
#navigation #navind {
border-right:none; /*take out right white line*/
}
#navigation li ul {
position: absolute;
left: 0;
top: 2.1em;
display: none;
}
#navigation ul li ul li {
border:none; /*take out right white line on dropdowns*/
height:1.6em;
}
/* lists nested under hovered list items */
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul {
left: 1px;
margin-left: -1px;
display: block;
}
#navigation ul li ul li a { /*change dropdown items */
color:#000;
background-color:#9ec1a0;
font-size:.92em;
font-weight:normal;
letter-spacing:0;
width:100%;
}
#navigation ul li ul li a:hover { /*hover to gray background */
background-color:#f0f0f0;
}
#powernav a:hover, #servicesnav a:hover, #aboutnav a:hover, #newsnav a:hover {
color:#000; /*keeps links from changing to other hover treatments*/
text-decoration:none;
}
/*change background for current section*/
#capabilities #navcap, #capabilities #navcap a, #methodologies #navmeth, #methodologies #navmeth a, #industries #navind, #industries #navind a {
background-color:#666;
color:#fff; /* first id here matches body id for sections in html */
}
#capabilities #navcap ul li a, #methodologies #navmeth ul li a, #industries #navind ul li a {
background-color:#9ec1a0; /*keeps dropdowns looking same as others when in current selection*/
color:#000; }
#capabilities #navcap ul li a:hover, #methodologies #navmeth ul li a:hover, #industries #navind ul li a:hover {
background-color:#f0f0f0; /*and back to grey for current selection dropdowns*/
}
-->
</style>
</head>
<body id="tab">
<div id="wrapper">
<div id="navigation">
<ul id="navdrop">
<li id="navcap"><a href="#">capabilities</a>
<ul><li><a href="#">facility highlights</a></li>
<li><a href="#">testing and evaluation</a></li>
<li><a href="#">field service and support</a></li>
</ul></li>
<li id="navmeth"><a href="#">methodologies</a>
<ul><li><a href="#">quality accreditation</a></li>
<li><a href="#">confidentiality</a></li>
<li><a href="#">safety</a></li>
<li><a href="#">cleanliness/sanitary</a></li>
</ul></li>
<li id="navind"><a href="#">industries</a>
<ul><li><a href="#">automotive</a></li>
<li><a href="#">marine</a></li>
<li><a href="#">recreation</a></li>
<li><a href="#">small engine</a></li>
<li><a href="#">portable fuel containers</a></li>
<li><a href="#">large spark ignition</a></li>
</ul></li>
</ul>
</div><!--end navigation -->
</div><!--end wrapper div -->
</body>
</html>

_Aerospace_Eng_
04-30-2006, 05:15 AM
They work fine for me in IE PC. Please use


your code
tags to post your code.

lehdesigns
04-30-2006, 05:24 AM
Thanks Aerospace. Maybe it's just the old version of ie I have here? My two main pc testers have given me exact opposite feedback through the process so I was testing on my ancient pc here (code on a mac). Well, that's good news you've given, so thank you!
Sorry I forgot to
code the text. Appreciate the reminder.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum