View Full Version : Drop-down menu troubles.

08-27-2010, 01:02 AM
Hello! I've been working on a website and learning CSS as I go along. The navigation bar was working fine until I decided to try and implement a drop down menu function. I've been struggling for a few days and I have a few questions!

The site in question is here: http://www.neuk.ca/cssconfusion/

1) In Firefox, when I roll over the drop down, the green selection highlight covers up the text, and if I move the cursor around, the selection grows and shrinks, as if there were a gap between the buttons. I'd like for the buttons to be immediately next to each other, highlight fully, and for the highlighted text to show. What part of my code is controlling all of this?

2) The drop down menu item bars highlight with green only half-way through. Separating the item bars, I have a white line, which also only goes as far as the green selection highlight and leaves the rest transparent. Why does this happen? I would like for the item bars to highlight fully and for the white line separating the bars to carry through full-length as well.

3) In IE, not only does the drop down menu not work at all, but the navigation bar is set to the left. I know there's a ton of compatibility issues between the different browsers, although I thought I had that covered with some javascript. How would I go about fixing it for IE?

I would appreciate any help! Thank you! :o

08-27-2010, 05:02 AM
Comment removed by poster.

08-27-2010, 07:57 AM
Comment removed by poster.

Haha, why did you remove your post?

I hear what you're saying. I've considered accomplishing what I'm aiming for by using the simple navigation bar and then anchors on each individual page, but, I would still like to figure out how to make the drop-down menus work, since I believe the result will be better!

Any ideas, Dr. Varney? Even if it takes changing a substantial portion of my code to make it work, I would appreciate help from this forum.

08-27-2010, 05:56 PM
Oh sorry - did you read it before I removed it?

I removed it because, on reflection, I thought it might appear that I was attempting to sway you away from creative use of CSS, by saying "put your links in a list, style it up nicely and be done with it!". I reckoned that might be seen as not altogether helpful to your learning curve, but I do think there is some sense in what I think.

The truth is, I have a strong artistic eye for layout and most of my skills are in conceiving of aesthetically pleasing design. The problem for me is that I don't understand enough about CSS to make it happen, so my 'dazzling concepts' end up in a whirl of coding frustration, making it eventually to the bin, by the folder.

Perhaps my advice might be of some use, if we take into context your current ability with CSS... The fact is, the one thing that should be bullet proof across all browsers (aside from your message/content) is the navigation. If that breaks, it's even worse than ripping the index out of a book. At least with a book, you can still turn the pages - but a web site without rock-steady navigation simply fails.

I'll stop rambling now and step aside, to allow the more skilled & experienced coders to wade in and help, though I shall end with the warning, that I have seen nav-bars on professional sites fall apart in certain browsers, which seriously jeapoardizes their chances of a sale, if the user can't navigate to a product, just because of a link or two disappearing.

I'm holding off, until I really know what I'm doing, before going back to fancy drop-down menus. For now, I know I can rely on a simple, linear list and I can make it look nice.

I'm so sorry I can't be of more help on the technical issue. Best of luck with this.

PS I really like your design. Very slick!

Dr. V

08-27-2010, 07:05 PM
lol There are tons of predefined styles for most anything on the web. CSS is HARD..lol There is a tabs tool called Tabs Designer thats free, but they style simple single level tabs. Also, if you use Dreamweaver, it has a spry menu function wizard that designs very nice drop down menus that can be style to your own preferences. I suck at CSS too! lol

08-27-2010, 09:26 PM
My point is that it's all too complicated for the beginner. If just one thing goes wrong, then the whole site is screwed. The old adage is, that if there exists only the absolute necessary parts to a machine, there is less to go wrong. The same is true for web page design.

Tabs designer sounds great but tabs are more of an image/design thing. You can make your link buttons look like tabs quite easily. With extra programming techniques, how can we be 100% sure they will work in all browsers and if they do, how can we be sure they will work properly in browsers that haven't been invented yet?

This is part of the reason that despite us having moved on to embrace web standards, the same old table layouts that were written years before CSS P became standard practice, are still holding together. Look at any porn site (wait 'till you're at home of course!) and look under the bonnet. The crux of the point is, these sites make a LOT of money for their owners and are written in old, very un-W3C standards code. I'm not saying any of us should resort to building like that, but it is a sentiment worth bearing in mind, IMO.

And by the way - d'you know WHY I don't design in tables? Because I'm even MORE crap at tables.

Dr. V

08-29-2010, 02:19 PM
It looks quite OK visually, in some of the recent browsers (including IE8). But underneath there are CSS errors. For instance, the following are invalid property values: left:none, position:none. There are several missing semi-colons at the ends of lines. There are missing px units on several of the non-zero margin values.

You'll need to check your CSS with the validator (http://jigsaw.w3.org/css-validator/) and go to work on fixing those errors. It looks a bit like you may have inadvertently coded your way around some of the errors, while leaving them unfixed, and that's why the page currently looks OK in some browsers.

Regarding the JavaScript, there's a few problems there too. Locate the script in the head, not above the head. The CDATA delineators should be just // <![CDATA[ at the start, and // ]]> at the end. The parameter in the getElementById call should be "nav1" here, not "nav". And the script will only work for IE the way it is. To make it work for other browsers, add the highlighted line:

if (window.attachEvent) window.attachEvent("onload", sfHover);
else window.addEventListener("load", sfHover, false);

Good luck with it.