Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning <li> Vertically in IE vs. Firefox

    Apologies if this has been addressed before, I missed it. I'll try to make this as straightforward as possible:

    This is correct:


    This is wrong:


    This Javascript is utilized in the template:
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    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;
    //--><!]]></script>
    Here is the CSS for the navigation:
    Code:
    /*** Dropdown Menu ***/
    ul.nav{
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	line-height: 1;
    }
    
    li.nav {
    	float: left;
    	position: relative;
    	padding-right:25px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight:bold;
    	display: block;
    	color: #FFFFFF;
    }
    
    li ul.nav {
    	display: none;
    	position: absolute;
    	top: 100%;
    	font-weight: normal;
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    li li.nav {
    	display: block;
    	background-color: #9999CC;
    	border:1px #336699 solid;
    	color:#FFFFFF;
    	font-weight:bold;
    	width:70px;
    }
    
    li li.nav a{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight:bold;
    	color:#ffffff;
    }
    
    ul li.nav:hover{
    	color:#ffcc99;
    	background-color:#336699;
    }
    
    li li.nav a:hover{
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	background-color:#336699;
    }
    
    li:hover ul.nav, li.over ul.nav{ 
    	display: block;
    	left: auto; 
    }
    Where did I mess up?
    Any help is greatly appreciated.

  • #2
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If this particular problem has already been addressed on here, I would appreciate a link to it.

    Thanks.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Race,
    I don't think this particular problem has been addressed before.
    The reason your not getting any help is that debugging someone elses dropdown menu code is so horribly complicated that nobody really wants to invest the time.
    If you didn't have the js in there, I would take a look. Since you do, there's no point.

    One thing I can tell you, anyone that does look at it will want to have a live link. The bit of code you supplied may or may not be the entire problem.

    There are some members here that could fix that for you, it's just a matter of finding someone looking for a project.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fair enough. Here's the link to the site:
    schoolpsychologistfiles.com

    I originally based it around the Suckerfish dropdown, but tweaked things here and there in an attempt to fix it.

    If there is a reliable way to do this without the JS, I am more than willing to drop the code and go strictly CSS.

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I ditched the JS, went to CSSplay.co.uk and tried to use the CSS-only Basic Drop-Down Menu.

    But it's not working in IE 6. In fact, it was a step backwards as it was showing up in IE 6 before.

    Here is my CSS file after copying it from CSSplay and tweaking it (to match style). Look towards the bottom (with the big copyright/disclaimer) to see what I used:
    Code:
    /* CSS Document */
    /* Layout */
    #pageNav{
    float:right;
    border-left:3px dotted #FFCC66;
    margin-left:8px;
    padding-left:-10px;
    }
    
    #top{
    float:right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    }
    
    #img{
    float:right;
    padding-left:10px;
    }
    
    
    #banner{background: #EAEAFD url(../images/topBannerBG.jpg);
           background-repeat:no-repeat; }
    
    /* Formatting */
    body {
    	background-color: #EAEAFD;
    }
    
    .pageHeader{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:18px;
    	font-weight:bold;
    	color:#666666;
    }
    
    .pageText{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333333;
    }
    
    .pageTextSM{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #333333;
    }
    
    .pageFooter{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	color: #FFFFFF;
    	margin-top:5px;
    }
    
    .secondaryHeader{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:15px;
    	font-weight:bold;
    	color:#666666;
    }
    
    .siteTitle{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:18px;
    	font-weight:bold;
    	color:#FFFFFF;
    	margin-right:-8px;
    	z-index:1000;
    }
    
    .siteTitleTail{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:14px;
    	font-weight:bold;
    	color:#FFFFFF;
    	float:right;
    	margin-right:-8px;
    	margin-top:-15px;
    	z-index:1000;
    }
    
    ol.page ul{
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    }
    
    ol.page ul ul{
    	font-family: Arial, Helvetica, sans-serif;
    	font-style:italic;
    	font-weight:normal;
    	font-size:10px;
    }
    
    /*  LINKS - Regular  */
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    
    /*  LINKS - Footer  */
    a.footer:link {
    	color:#6699CC;
    	text-decoration: none;
    }
    a.footer:visited {
    	text-decoration: none;
    }
    a.footer:hover {
    	color:#FFFFFF;
    	text-decoration: underline;
    }
    a.footer:active {
    	text-decoration: none;
    }
    
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at <a href="http://www.cssplay.co.uk/menus/basic_dd.html" target="_blank" class="m1">http://www.cssplay.co.uk/menus/basic_dd.html</a>
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    /* remove the bullets, padding and margins from the lists */
    .nav ul{
    	list-style-type:none;
    	padding:0;
    	margin:0;
    }
    
    /* make the top level links horizontal and position relative so that we can position the 
    sub level */
    .nav li{
    	float:left;
    	position:relative;
    	z-index:100;
    	top:-2px;
    }
    
    /* use the table to position the dropdown list */
    .nav table{
    	position:absolute;
    	border-collapse:collapse;
    	z-index:80;
    	left:-1px;
    	top:25px;
    }
    
    /* style all the links */
    .nav a, :visited {
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:10px;
    	font-weight:bold;
    	width:120px;
    	padding:5px;
    	color:#ffffff;
    	text-decoration:none;
    	text-align:center;
    }
    
    /* style the links hover */
    .nav :hover{
    	color:#FFCC00;
    	background:#336699;
    }
    
    /* style the links W/O sub-menus */
    .nav2 :hover{
    	color:#FFCC00;
    	display:none;
    	width:100px;
    }
    
    /* hide the sub level links */
    .nav ul ul {
    	visibility:hidden;
    	position:absolute;
    	width:120px;
    	height:0;
    	background-color:#99CCFF;
    }
    
    /* style the sub level list elements */
    .nav ul ul li a{
    	color:#FFFFFF;
    	background-color:#6699CC;
    	border-color:#336699;
    }
    
    .nav ul ul li a:hover{
    	color:#FFCC00;
    }
    
    /* make the sub level visible on hover list or link */
    .nav ul li:hover ul,
    .nav ul a:hover ul{
    	visibility:visible;
    }
    And here is my template HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    @import url("schoolpsych.css");
    -->
    </style>
    </head>
    
    <body TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <a name="Top"></a>
    <table width="700"  border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="21" rowspan="2"><img src="../images/topLeftEndBanner.jpg" width="21" height="78"></td>
        <td width="407" height="49" id="banner">&nbsp;</td>
        <td width="251" height="49" valign="bottom" background="../images/topBanner_O.gif"><div align="right" class="siteTitle">School Psychologist Files</div>
        </div></td>
    	<td rowspan="2" background="../images/topRightEnd.gif">&nbsp;</td>
      </tr>
      <tr>
        <td height="29" colspan="2" background="../images/topFill.gif">
    <div class="nav">
    <ul>
    	<li><a href="../index.html">Home</a></li>
    	<li><a>Disabilities<!--[if IE 7]><!--></a><!--<![endif]-->			  
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="../ADHD.html">ADHD</a></li>
    			<li><a href="../Aspergers.html">Aspergers</a></li>
    			<li><a href="../Autism.html">Autism</a></li>
    			<li><a href="../DevDelay.html">Developmental Disability</a></li>
    			<li><a href="../EmDisability.html">Emotional Disability</a></li>
    			<li><a href="../notDone.html">Hearing Impaired</a></li>
    			<li><a href="../notDone.html" target="_blank">Learning Disability</a></li>
    			<li><a href="../notDone.html" target="_blank">Mental Retardation</a></li>
    			<li><a href="../notDone.html" target="_blank">Orthopedic Impairment</a></li>
    			<li><a href="../notDone.html" target="_blank">Traumatic Brain Injury</a></li>
    			<li><a href="../notDone.html" target="_blank">Vision Impairment</a></li>
    		</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a>Special Education<!--[if IE 7]><!--></a><!--<![endif]-->			  
    <!--[if lte IE 6]><table><tr><td><![endif]-->			  
    		<ul>
    			<li><a href="../categories.html" target="_blank">Categories</a></li>
    			<li><a href="../laws.html" target="_blank">Laws</a></li>
    		</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a href="../schoolPsychology.html" target="_blank">School Psychology</a></li>
    	<li><a href="../notDone.html" target="_blank">Contact Us</a></li>
    </ul>
    </div>
    	<div class="siteTitleTail">.com</div>
    	</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td colspan="2" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="body" -->body<!-- TemplateEndEditable --></td>
        <td width="21" bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
      <tr>
        <td><img src="../images/bottomLeftEnd.gif" width="21" height="28"></td>
        <td valign="middle" background="../images/bottomFill.gif">
    	<div align="left" class="pageFooter"><span class="pageFooter"><a href="http://www.kingworks.net" class="footer" target="_blank">site design: Paul M. King</a></span></div>
        </td>
        <td valign="middle" background="../images/bottomFill.gif"><div align="right" class="pageFooter">Copyright © 2006-2007</div></td>
        <td><img src="../images/bottomRightEnd.gif" width="21" height="28"></td>
      </tr>
    </table>
    
    </body>
    </html>
    Live link to the site is here.

    This is driving me insane. I really need some help.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    IE6 doesn't understand HOVER on anything except links and so you need a small piece of javascript to simulate the effect in IE6 that more modern browsers handle automatically. The suckerfish menu scripts that are around usually come with a piece of Javascript specifically for that purpose.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice so far.

    OK, I have tried examples found on other sites, and have not been successful - I did manage to combine a couple of methods into something that works when I preview it in IE6 through Dreamweaver. But when I upload it and look at it "live" in IE6, the dropdown submenus don't appear!

    Here's where I'm at:

    CSS (navigation is towards the bottom):
    Code:
    /* CSS Document */
    /* Layout */
    #pageNav{
    float:right;
    border-left:3px dotted #FFCC66;
    margin-left:8px;
    padding-left:-10px;
    }
    
    #top{
    float:right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    }
    
    #img{
    float:right;
    padding-left:10px;
    }
    
    
    #banner{background: #EAEAFD url(../images/topBannerBG.jpg);
           background-repeat:no-repeat; }
    
    /* Formatting */
    body {
    	background-color: #EAEAFD;
    }
    
    .pageHeader{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:18px;
    	font-weight:bold;
    	color:#666666;
    }
    
    .pageText{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333333;
    }
    
    .pageTextSM{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #333333;
    }
    
    .pageFooter{
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	color: #FFFFFF;
    	margin-top:5px;
    }
    
    .secondaryHeader{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:15px;
    	font-weight:bold;
    	color:#666666;
    }
    
    .siteTitle{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:18px;
    	font-weight:bold;
    	color:#FFFFFF;
    	z-index:900;
    	float:right;
    }
    
    .siteTitleTail{
    	font-family: Arial, Helvetica, sans-serif;	
    	font-size:14px;
    	font-weight:bold;
    	color:#FFFFFF;
    	float:right;
    	z-index:1000;
    }
    
    ol.page ul{
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight:bold;
    }
    
    ol.page ul ul{
    	font-family: Arial, Helvetica, sans-serif;
    	font-style:italic;
    	font-weight:normal;
    	font-size:10px;
    }
    
    /*  LINKS - Regular  */
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    
    /*  LINKS - Footer  */
    a.footer:link {
    	color:#6699CC;
    	text-decoration: none;
    }
    a.footer:visited {
    	color:#6699CC;
    	text-decoration: none;
    }
    a.footer:hover {
    	color:#FFFFFF;
    	text-decoration: none;
    }
    a.footer:active {
    	text-decoration: none;
    }
    
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/basic_dd.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    /* remove the bullets, padding and margins from the lists */
    .nav ul{
    	list-style-type:none;
    	padding:0;
    	margin:0;
    	z-index:100;
    }
    
    /* make the top level links horizontal and position relative so that we can position the 
    sub level */
    .nav li{
    	float:left;
    	position:relative;
    	z-index:100;
    }
    
    /* use the table to position the dropdown list */
    .nav table{
    	position:absolute;
    	border-collapse:collapse;
    	z-index:100;
    	left:-1px;
    	top:20px;
    }
    
    /* style all the links */
    .nav a{
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:10px;
    	font-weight:bold;
    	width:90px;
    	padding:4px 4px 5px 4px;
    	color:#ffffff;
    	background:#336699;
    	text-decoration:none;
    	text-align:center;
    	z-index:100;
    }
    
    .nav2 a{
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:10px;
    	font-weight:bold;
    	width:50px;
    	padding:4px 4px 5px 4px;
    	color:#ffffff;
    	background:#336699;
    	text-decoration:none;
    	text-align:center;
    	z-index:100;
    }
    
    .nav3 a{
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:10px;
    	font-weight:bold;
    	width:110px;
    	padding:4px 4px 5px 4px;
    	color:#ffffff;
    	background:#336699;
    	text-decoration:none;
    	text-align:right;	
    	z-index:100;
    }
    
    .nav4 a{
    	display:block;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:10px;
    	font-weight:bold;
    	width:80px;
    	padding:4px 4px 5px 4px;
    	color:#ffffff;
    	background:#336699;
    	text-decoration:none;
    	text-align:right;
    	z-index:100;
    }
    
    
    /* style the links hover */
    .nav :hover{
    	color:#FFCC00;
    	background:#336699;
    	z-index:100;
    }
    
    /* hide the sub level links */
    .nav ul ul {
    	visibility:hidden;
    	position:absolute;
    	height:0;
    	z-index:100;
    }
    
    
    /* style the sub level list elements */
    .nav ul ul li a{
    	color:#FFFFFF;
    	background-color:#6699CC;
    	border-color:#336699;
    	z-index:100;
    }
    
    .nav ul ul li a:hover{
    	color:#FFCC00;
    	z-index:100;
    }
    
    /* make the sub level visible on hover list or link */
    .nav ul li:hover ul,
    .nav ul a:hover ul{
    	visibility:visible;
    	z-index:100;
    }
    HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body{behavior:url("Templates/csshover.htc"); font-size:100%;}
    </style>
    <![endif]-->
    
    <style type="text/css">
    <!--
    @import url("schoolpsych.css");
    -->
    </style>
    </head>
    
    <body TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <a name="Top"></a>
    <table width="800"  border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="21" rowspan="2"><img src="../images/topLeftEndBanner.jpg" width="21" height="78"></td>
        <td width="425" height="49" id="banner">&nbsp;</td>
        <td width="342" height="49" valign="bottom" background="../images/topBanner_O.gif"><div class="siteTitle">
          <div align="right">School Psychologist Files</div>
        </div>
          <div align="right">
            </div>
        </div></td>
    	<td rowspan="2" background="../images/topRightEnd.gif">&nbsp;</td>
      </tr>
      <tr>
        <td height="29" colspan="2" valign="top" background="../images/topFill.gif">
    <div class="nav">
    <ul>
    	<li class="nav2"><a href="index.html" >Home</a></li>
    
    	<li><a href="#">Disabilities<!--[if IE 7]><!--></a><!--<![endif]-->			  
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="ADHD.html" >ADHD</a></li>
    			<li><a href="Aspergers.html">Aspergers</a></li>
    			<li><a href="Autism.html">Autism</a></li>
    
    			<li><a href="DevDelay.html">Developmental Disability</a></li>
    			<li><a href="EmDisability.html">Emotional Disability</a></li>
    			<li><a href="notDone.html">Hearing Impaired</a></li>
    			<li><a href="notDone.html">Learning Disability</a></li>
    			<li><a href="notDone.html">Mental Retardation</a></li>
    
    			<li><a href="notDone.html">Orthopedic Impairment</a></li>
    			<li><a href="notDone.html">Traumatic Brain Injury</a></li>
    			<li><a href="notDone.html">Vision Impairment</a></li>
    		</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    
    	<li><a href="#">Special Education<!--[if IE 7]><!--></a><!--<![endif]-->			  
    <!--[if lte IE 6]><table><tr><td><![endif]-->			  
    		<ul>
    			<li><a href="categories.html">Categories</a></li>
    			<li><a href="laws.html">Laws</a></li>
    		</ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    
    	<li  class="nav3"><a href="schoolPsychology.html" >School Psychology</a></li>
    	<li class="nav4"><a href="mailto:schoolpsychologistfiles@gmail.com" >Contact Us</a></li>
    </ul>
    </div>
    	<div class="siteTitleTail">.com</div>
    	</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td colspan="2" bgcolor="#FFFFFF"><!-- TemplateBeginEditable name="body" -->body<!-- TemplateEndEditable --></td>
        <td width="21" bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
      <tr>
        <td><img src="../images/bottomLeftEnd.gif" width="21" height="28"></td>
        <td valign="middle" background="../images/bottomFill.gif">
    	<div align="left" class="pageFooter"><span class="pageFooter"><a href="http://www.kingworks.net" class="footer" target="_blank">site design: Paul M. King</a></span></div>
        </td>
        <td valign="middle" background="../images/bottomFill.gif"><div align="right" class="pageFooter">Copyright © 2006-2007</div></td>
        <td><img src="../images/bottomRightEnd.gif" width="21" height="28"></td>
      </tr>
    </table>
    
    </body>
    </html>
    OTHER:
    Live link to the site.
    cssHover.htc is being used - no changes to file available from sperling.com (and other sites).

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Check this link with your IE6 Browser. I have confirmed it works in Opera 9.1, Firefox 2.0.1 and IE6. Don't have IE7, yet.
    Also, ran it throiugh the w3c (x)html validator and the jigsaw CSS validator, too.

    http://www.jlhaslip.trap17.com/menu/drop_down.html
    Last edited by jlhaslip; 02-14-2007 at 05:31 AM. Reason: add validation info

  • #9
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wound up using CSSPlay's Basic Drop-Down by importing line-by-line and then slowly modifying each detail and testing it.

    I think the problem I was having before (at least with this approach) stemmed from Dreamweaver eliminating the conditional statements when I tried modifying the links through the control panel instead of coding them directly.

    I think.

    At any rate, it seems to work now - even if it doesn't line up exactly right. Some tweaks to the spacing and it will be done.

    Thanks to all who helped.

  • #10
    New to the CF scene
    Join Date
    Aug 2008
    Location
    S. Calif
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jlhaslip View Post
    Check this link with your IE6 Browser. I have confirmed it works in Opera 9.1, Firefox 2.0.1 and IE6. Don't have IE7, yet.
    it's not just the hover issue, it's also the DOM mods made by IE

    Code:
    1- capture the UserAgent and save it
    2- access the DOM based upon the User Agent
    3- avoid the hover and use onMouseOver and onMoueOut instead
    get this to run using onLoad
    1-
    Code:
     var Layer;   //   = new String();
     var Style;   //   = new String();
     UAid;        //   = new String();
    function checkBrowserId() {     
          if (navigator.userAgent.indexOf('MSIE') != -1) {
              Layer = '.all';
              Style = '.style';
              UAid =  'IE';
          } else if(navigator.userAgent.indexOf('Nav') != -1) {
              Layer = '.layers';
              Style = "";
              UAid =  'Nav';
          } else if(navigator.userAgent.indexOf('Gecko') != -1) {
              Layer = '.layer';
              Style = '.style';
              UAid =  'FF';
          } else {
               // alert('UserAgent: ' + navigator.userAgent);
               UAid = 'FF';  // emulate
          }
    }
    2-
    Code:
        function showMe(name) { 
          thisObject = document.getElementById(name);
          if (UAid == "FF") {
            eval(thisObject.setAttribute('class','jsfok'));
          } else {
            thisObject.className = 'jsfok';
          }
          return true; 
        }  
        function hideMe(name) {
          thisObject = document.getElementById(name);
       
          if (UAid == "FF") {
            eval(thisObject.setAttribute('class','jsfdiv'));
          } else {
            thisObject.className = 'jsfdiv'; 
          }
          return true;
        }
    3-
    Code:
     <some object id="xx" onMouseOver="showMe(xx);" onMouseOut="hideMe(xx);" >
    your JS and CSS will then work everywhere
    Last edited by jobeard; 08-25-2008 at 11:24 PM. Reason: conclusion

  • #11
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Quote Originally Posted by Race View Post
    I wound up using CSSPlay's Basic Drop-Down by importing line-by-line and then slowly modifying each detail and testing it.

    I think the problem I was having before (at least with this approach) stemmed from Dreamweaver eliminating the conditional statements when I tried modifying the links through the control panel instead of coding them directly.

    I think.

    At any rate, it seems to work now - even if it doesn't line up exactly right. Some tweaks to the spacing and it will be done.

    Thanks to all who helped.
    I use CCSPlay's menu and Dreamweaver. But I always hand code is so I never had the problem you are describing. I go three levels deep and the only problem I had was a missing closing for tables in IE6. It's the one in my signature if you want to see it in action.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #12
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Race View Post
    I wound up using CSSPlay's Basic Drop-Down by importing line-by-line and then slowly modifying each detail and testing it.

    I think the problem I was having before (at least with this approach) stemmed from Dreamweaver eliminating the conditional statements when I tried modifying the links through the control panel instead of coding them directly.

    I think.

    At any rate, it seems to work now - even if it doesn't line up exactly right. Some tweaks to the spacing and it will be done.

    Thanks to all who helped.
    This program may help you. You can view with several browsers.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #13
    New to the CF scene
    Join Date
    Aug 2008
    Location
    S. Calif
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oops; forgot to show ccs

    in post #7 above, I should have added

    .jsfdiv { background-color:#90f0f0;
    visibility:hidden;
    display:none;
    position:relative;
    left:0px;
    top:0px;
    }
    .jsfok { visibility:visible;
    display:table-cell;
    position:relative;
    left:0px;
    top:0px;
    }
    .jsfalt { background-color:yellow;
    color:#ff0000;
    visibility:visible;
    display:table-cell;
    position:relative;
    left:0px;
    top:0px;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •