2 replies [Last post]
robg
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2004-08-02
Posts: 6
Points: 0

Hi,

I'm trying to create horizontal navigation with drop-down menus using strictly CSS. I've followed the tutorial located at: http://www.htmldog.com/articles/suckerfish/dropdowns/ but instead of having text for the main navigation, I'm using a transparent PNG and having text for strictly the drop-down section. To create the background of the navigation, I'm simply changing the background: property since the PNG images are transparent.

My problem is that the navigation isn't lining up correctly. It's irratic. Each PNG has absolutely no white space in front of or after it, so it's not that. It simply isn't lining up how it should. I wanted it to be right next to each other and I could simply adjust the width inbetween each one with the margin: property, but I can't get it working.

The page can be found here:

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/css/xcage.css

Could someone take a look at the source and CSS and try to tell me what I'm doing wrong? If it comes down to it, I'll even pay someone $10 via PayPal to fix the problem and create working code for me - in CSS.

Thanks.

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 16 years 19 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

CSS navigation not setting width correct - $10 paypal

It looks good to me. Are you bothered with the first level or second level menus? Included is a screenshot of the first level menus.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

robg
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2004-08-02
Posts: 6
Points: 0

CSS navigation not setting width correct - $10 paypal

Hi,

Actually - I fixed the problem. I have a new problem:

First, I'm using the java/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/

Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty.

I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla

Could you look at the code and tell me whats wrong?

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/styles/xcage.css
http://serve5.net/xcage/nav/scripts/sfhover.js
Thanks.

Also, instead of each <li> appearing on its own line (in the submenu), its simply going right after one another. Could you take a look at that, too and see what's wrong?