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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down Navbar - CSS, IE complications

    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)

    Code:
    #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

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    // 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.
    Code:
    #zUL li.iehover ul {
    	left: auto;
    I added this code to my page between the <head> and </head> tags

    Code:
    <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

  • #4
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Am I supposed to be able to click the links that come up when I hover over the buttons?

  • #5
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #6
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm, check out this script. I think it does what you want. I doesn't use htc.

  • #8
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Shutez; 07-21-2005 at 04:56 AM.

  • #9
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    never mind the centering thing. I figured it out. Previous questions still stand though!

    Tim


  •  

    Posting Permissions

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