SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: 3 issues

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 issues

    Hi all,

    I'm incorporating a new drop-down menu in an existing website and have run into a few issues that I'm having problems resolving. If anyone could take some time to look at these issues and the following code I'd appreciate it.

    1. I've set up each top-level link with a 4px right margin, however my bg color extends over the margin on mouse over. I can think of a way to resolve this using a bg image but didn't know if there was another way.

    2. I cannot figure out a way to have the top level text color to remain white when hovering over the drop-down items.

    3. Other than that the menu works fine in all browsers EXCEPT ie 5.01. Simply put, it's just an ugly mess there.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Title</title>
    <script type="text/javascript" language="JavaScript1.2"> 
    sfHover = function() {
    	var sfEls = document.getElementById("nav").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">
    <!--
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-color: #831818;
    }
     
    div#blacknav {
    	height: 27px;
    	border: solid 4px #000000;
    	background-color: #000000;
    	}
     
    #nav, #nav ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	}
     
    #nav li {
    	float: left;
    	display: block;
    	margin-right: 0px;
    	}
     
    #nav a {
    	display: block;
    	height: 100%;
    	padding-top: 6px;
    	padding-bottom: 7px;
    	width: 90px;
    	margin-right: 4px;
    	border: solid 1px #4D4D4D;
    	text-align: center;
    	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
    	color: #999999;
    	text-decoration: none;
    	line-height: 12px;
    	}
     
    #nav a:hover {
    	color: #fff;
    	background-color: #505050;
    	}
     
    #nav li:hover, #nav li.sfhover {
    	color: #fff;
    	background-color: #505050;
    	}
     
    #nav li ul {
    	position: absolute;
    	width: 185px !important;
      	width /**/:175px;
    	left: -999em;
    	border: solid 1px #cccccc;
    	}
     
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    	}
     
    #nav li ul li {
    	float: left;
    	display: block;
    	}
     
    #nav li ul a {
    	display: block;
    	width: 175px;
    	margin: 0px;
    	padding: 5px;
    	border: 0px;
    	background-color: #FFF7E7;
    	text-align: left;
    	font: 10px Verdana, Arial, Helvetica, sans-serif;
    	color: #666666;
    	}
     
    #nav li ul a:hover {
    	background-color: #FFEBC6;
    	color: #666666;
    	}
    -->
    </style></head>
     
    <body>
    <div id="blacknav">
            <ul id="nav">
              <li><a href="#">Services</a>
     
                  <ul>
                    <li><a href="#">Applied Social Science Research & Evaluation</a></li>
                    <li><a href="#">Consulting</a></li>
                    <li><a href="#">Democracy Education</a></li>
                    <li><a href="#">Early Childhood Development</a></li>
                    <li><a href="#">Economic & Public Policy Research</a></li>
     
                    <li><a href="#">Special Projects</a></li>
                    <li><a href="#">Training</a></li>
                    <li><a href="#">Workforce Development</a></li>
                  </ul>
              </li>
              <li><a href="#">Publications</a>
                  <ul>
     
                    <li><a href="#">Institute News</a></li>
                    <li><a href="#">Media Coverage</a></li>
                  </ul>
              </li>
              <li><a href="#">Press Room</a></li>
              <li><a href="#">About Us</a>
                  <ul>
     
                    <li><a href="#">Background</a></li>
                    <li><a href="#">Contract Opportunities</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Employment Opportunities</a></li>
                    <li><a href="#">Executive Management Bios</a></li>
                    <li><a href="#">Frequently Asked Questions</a></li>
     
                    <li><a href="#">Privacy Statement</a></li>
                    <li><a href="#">Staff</a></li>
                  </ul>
              </li>
              <li><a href="#">Contact Us</a></li>
              <li><a href="#">Site Map</a></li>
            </ul>
     
        </div>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it's been a long day, but I figured out #1 and #3. Seems IE5 would rather have width: 90px; and margin-right: 4px; declared in #nav li rather than #nav a.

    Now to tackle #2.

    Still looking for any takers!

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #2
    Instead of changing the colours on hovering the a, try changing them on hovering the li :
    Code:
    #nav li:hover a, #nav li.sfhover a {
        color: #fff;
        background-color: #505050;
        }
    Also, in your code you pasted above, notice how the colour changes partway through the first li ? The "&" should be escaped :
    Code:
    <li><a href="#">Applied Social Science Research &amp; Evaluation</a></li>

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for responding, Centauri. (And thanks for the reminder about my lazy &amp; mark-up)

    Once I read your suggestion I had a "Duh, of course!" moment. It implemented well. Ran into a small issue with all of the lower-level a's picking up the grey background, but I resolved it with this:

    Code:
    #nav li:hover ul a, #nav li.sfhover ul a {
    	color: #666666;
    	background-color: #FFF7E7;
    	}
    Thanks again!


Bookmarks

Posting Permissions

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