...

View Full Version : Drop Down Navbar - CSS, IE complications



Shutez
07-20-2005, 07:03 PM
Hi-
This is my first post in this forum. I'm hoping you guys can help me. I'm a fairly new web designer, and just starting to work with css / dropdown menus. I'm having an issue with mine however.

here is the link: http://www.csfpa.com/newsite/index1.html

As you can see, the menu looks ok in firefox and netscape, but the spacing gets all off in IE. That is problem #1. Also, the drop down menus don't work in IE - that is problem #2. Problem #3, etc have to do with centering the dropdown menus in the space provided. I think I can work with #3, if I got some expert help with #1 and 2!

Here is the CSS code: (navbar.css)


#zUL a,
#zUL a:link,
#zUL a:visited {
text-decoration: none;
color: #4D4E4F;
}
#zUL img {
display: block;
}
#zUL, #zUL ul {
padding: 0;
margin: 0;
display: inline;
list-style: none;
}
#zUL ul li{
padding: 0;
margin: 0;
display: inline;
}
#zUL li {
float: left;
width: auto;
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#zUL li ul {
position: absolute;
top: 200px;
left:-900px
}
#zUL li ul a {
margin-left: 10px;
margin-right: 10px;
}
#zUL li ul li {
margin: 0;
border-bottom: 0;
font-family: arial, helvetica, sans-serif;
font-size: 13px;
}
fieldset p {clear: left}
#zUL li:hover ul, #zUL li.sfhover ul {
left: auto;
}

I have applied some javascript and an addition css file (msie.css) in an attempt to fix the IE problem (to no avail) so I would ignore those. Any suggestions would be greatly appreciated!

Tim

SpirtOfGrandeur
07-20-2005, 07:29 PM
Here is a link to help you with your IE problems.

http://www.xs4all.nl/~peterned/csshover.html

IE doesnt understand the :hover. After reading that site you will be able to fix it ;)

Shutez
07-20-2005, 08:15 PM
Hi - thanks for the link. That all made sense, and I've applied it. I now get some rollover effects in IE 5 (on the mac), however, IE 6 still does not work. I found some javascript that I implemented in my page. I'm attaching it below.


// Copyright (c) TJKDesign - Thierry Koblentz
// Setting all the Event Handlers Dinamically
function swap(){this.className="iehover"}
function swapBack(){this.className="trigger"}
function swapfocus() {this.parentNode.parentNode.parentNode.className="iehover"}
function swapblur() {this.parentNode.parentNode.parentNode.className="trigger"}
function TJKSetEvents(){
if (document.getElementById){
var LI = document.getElementsByTagName("li");
var zLI= LI.length;
for(var k=0;k<zLI;k++){
if(LI[k].parentNode.parentNode.className=="trigger"){LI[k].firstChild.onfocus=swapfocus;LI[k].firstChild.onblur=swapblur}
if(LI[k].className=="trigger"){LI[k].onmouseover=swap;LI[k].onmouseout=swapBack}
}
}
}
//-->

In addition, I added the "trigger" class to all my level 1 menu items that have submenu items, and added the following css.


#zUL li.iehover ul {
left: auto;

I added this code to my page between the <head> and </head> tags


<script type="text/javascript" src="/javascript/iefix.js"></script>

and I added this to the body tag <body ... onload="TJKSetEvents()">

Is there any reason this shouldn't be working? I get an "object expected" error on line 19 (the <body> tag) and still no rollover effects in IE 6. This has been a huge help so far! So thankyou, I feel like the solution is right around the corner.

Tim

Ranger56
07-20-2005, 08:17 PM
Am I supposed to be able to click the links that come up when I hover over the buttons?

SpirtOfGrandeur
07-20-2005, 09:33 PM
Shutez the code you added is an overkill. You must be using IE 6 on a WinXP-SP2 machine. If that is the case then you need to have specific header information inorder for an HTC file to work.


NOTE: The rules for HTCs have changed a bit in Windows XP SP2. Users with SP2 installed may not see it working correctly, because webservers have to send htc files with the mime-type set to text/x-component. For more info on this, check Aldo's blog.

It is located at the bottom of the link i gave you.

Shutez
07-21-2005, 03:00 AM
Hi - thankyou for all the thoughtful responses. I'm gonna redouble my efforts with the code and go over that page again. You're right - I was using IE 6 on a SP2 machine.

I think I've fixed the links where you can click on them. They don't take you anywhere yet, but the mouse should rollover properly. Let me know if you're still having problems.

My next question is much simpler I think: I'm using the {left:auto} command to bring the sub-menu back into the screen. However, this brings the submenu to underneath the parent element. This is fine for the first couple elements, just because it happens to center well. However, the far right elements' sub menus are too far to the right. Is there a way, using {:hover} or another command to center the submenu in the white space there? I could left justify everything, and set a specific absolute pixel placement for each individual menu, but we would prefer to keep the site centered. Any ideas?

Thanks!

Tim

_Aerospace_Eng_
07-21-2005, 03:03 AM
Hmm, check out this script (http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm). I think it does what you want. I doesn't use htc.

Shutez
07-21-2005, 03:51 AM
Hi - thanks! I'm working with that now, and having some success. It might be a good alternative to using css. Anyone know any reason I shouldn't do this menu entirely in javascript? Will search engines still be able to index it properly? Just curious on that matter.

On the technical side - any ideas how to center the sub-menu links? Thanks!

Tim

Shutez
07-21-2005, 04:00 AM
never mind the centering thing. I figured it out. Previous questions still stand though!

Tim



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum