21 replies [Last post]
Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

I found a CSS drop down menu by Stu Nicholls - http://www.cssplay.co.uk/menus/dropdownfun.html

Just like he says, it does not validate. But the rest of the code and all the CSS in my pages does validate.

The problem is getting the drop down menu to drop down over top of the content below it, instead of pushing the content down.

Here's the link so you can see what's happening: nopeople.com/Premier
Please go easy on me, I've been working on this quite a while and there are still a lot of things that are going to change before it's done.

While we're at it, can everyone do a browser check on it too?

Anonymous
Anonymous's picture
Guru

Trying something new

Was there supposed to be a drop down menu somewhere on that page? :?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Trying something new

Yep - you have to "ply your mouse" - I found Projects in IE/Win to the right of About Us - but only because Opera actually shows it in all its glory. In Fx/Win I get a bit of interference on the left of the line under About Us.

Excavator - you are trying to use a very clever piece of code there and you can't be using it exactly as Stu Nicholls is, 'cos it ain't working for you although it works on Stu's site in all the browsers. Sorry, but I don't have the time to compare your code with Stu's, also bare in mind as Stu says himself "it's just for fun".

Anonymous
Anonymous's picture
Guru

Trying something new

Lorraine wrote:
Yep - you have to "ply your mouse"
Ah, I found it. My pointer activates when you roll over the area circled on the attached image but nothing is there.

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

Wow Triumph, your browser really breaks it. Here's what it's supposed to look like:

and here's what the menu is doing when it's opened. You can see how it's pushed the content down instead of opening over top of it.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Trying something new

It's not just Triumph's browser. In IE6/Win I cannot see the text that says Projects (until I happen to find the right area with the mouse). In Fx1.5/Win, however, there are other positioning problems.

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

The caps I posted are IE6/win. Why does yours show it broken?

redsmurf
redsmurf's picture
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2005-08-05
Posts: 18
Points: 0

Trying something new

Alright I think I have found it. I didn't try it but in firefox but it should work. Start with a complete doctype because you never know. Then in your css, add .menu {display:none;} you forgot that part. Then in your html change this <DIV id=menu> to <div class="menu"> and that should fix most of it.

But the links are to long so they wrap around to the next line but don't push the other links down.

hope that helps

May the Lord ever keep you in the palm of His hand, and may He never make a fist.

redsmurf
redsmurf's picture
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2005-08-05
Posts: 18
Points: 0

Trying something new

Sorry I didn't take into account the layout.css so the menu drops down but it goes behind the bodyblock. That is beyond my expertise I will try to figure it out but it probably has something to do with position:absolute
see http://www.cssplay.co.uk/menus/drop_down.html

But like I said beyond my expertise Sorry

May the Lord ever keep you in the palm of His hand, and may He never make a fist.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Trying something new

We may have different rendering in IE because of caching issues. I have cleared my cache but still get the same display.

If you copied the code from Stu Nicholls, you must have changed it, not only because of the missing double quotes around the class names, but also because of the capitalised tags. Maybe some other 'typos' have crept in. Also, you have not used the same, complete doctype and there are some vital pieces of code that are missing from your version. Stu explains why he has chosen his particular doctype.

If you validate Stu's demo page you'll see the validation result is very different to yours Shock

As I said earlier that is a clever piece of code, you have changed it and I note there are also two linked stylesheets in there making debugging a nightmare :?

You originally asked for a browser check. I have posted the problems in Fx and this attachment is as seen in Opera. This is exactly as the page opened (no hovering at all). In Fx and Opera the whole page is at the left of the screen, whereas in IE it is centered. Smile

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

Yeah, it's a mess.

I've changed a few things around, fixed the doctype (never even noticed that got changed - not a clue how it happened either). The Projects drop down still pushes the content down.
I can't believe how bad the page breaks in other browsers! When I was working on this last winter it was here at CSS Forums that I found help with it, mostly from ClaraTreva back then, remember him?

Anonymous
Anonymous's picture
Guru

Trying something new

Lorraine wrote:
If you validate Stu's demo page

What does this mean:

Quote:
Failed validation, 0 error
Laughing out loud

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

Well Loraine, I just went and looked at another IE6/Win on my Lan. Under my administrators account it looks fine but under my wifes account the Projects is missing until you mouse over it.

How wierd is that?

redsmurf
redsmurf's picture
Offline
Regular
Last seen: 14 years 6 weeks ago
Joined: 2005-08-05
Posts: 18
Points: 0

Trying something new

Alright this is what I have!

http://www.redsmurf.com/test

May the Lord ever keep you in the palm of His hand, and may He never make a fist.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Trying something new

Quotes from the Page:

Quote:
Before I go any further I must say that this one breaks all the rules!

Quote:
The IE version should work in IE5.01, IE5.5 and IE6,

Quote:
Well just for a bit of fun.

This is advanced stuff and relies on bending a lot of rules and of using techniques such as custom DTD's all things that if you do not understand you should avoid until such time as you do! and it does not look as though you do at this point in time; the mixed case in your rules worries me as it suggests not being in control somewhere. I say this as it looks like you are working on a commercial site rather than something for yourself, you really should not use these techniques on a commercial site they are theoretical techniques, and although they will have been tested to work on as many browsers as possible could still present problems.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

Hugo, the page 's not a commercial site yet as it's not public. As I said, it's a work in progress.

Quote:
I've been working on this quite a while and there are still a lot of things that are going to change before it's done.

As for avoiding it untill I understand it, we learn by doing don't you think?
Thanks for your thoughts though.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Trying something new

I ain't speaking for Hugo - he can do that well enough for himself Laughing out loud But I stayed up until 2:30am this morning playing around with this. If today had been a working day you would have been on your own and I would not have bothered with your problems at all, because they are of your own making. But I can be a fool to myself sometimes :mrgreen:

You're quite correct, we learn by doing. We also learn by checking our work. We learn by applying solid debugging techniques. We do not learn anything if we just ask others what we have done wrong before trying to sort it out ourselves. We learn by standing on our own two feet.

Harsh - maybe, but I had a very late night Smile

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

Wow... rough crowd here.
I didn't stay up late, I got up at 3:30am and re-wrote the whole page. I did not like how everyones browser was breaking it so bad. I took Triumphs advice and re-wrote it so it looks right in FireFox.

I think everything is fixed now and I can attempt the menu thing again.
How about another browser check at the new url?

ps Thanks for all your efforts Lorraine. And, yes, that was harsh, but I have thick skin so it's ok.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Trying something new

Yep - all browsers good to go. IE6, Fx1.5, Op8.02 (all on Win) - wait for Triumph for the definitive Mac users view Smile
Now don't go messing that good work up with a "cute" menu :roll: and kudos to you for taking my remarks in the spirit in which they were made =D>

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 5 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Trying something new

I agree that the cute menu should probably go. I can fix the validation errors then too - they are there now because I was keeping the doctype that worked with the cute menu.

So, what kind of menu do you suggest???
I still need a drop down of some sort. I guess that leaves java?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Trying something new

There was a discussion yesterday at http://www.csscreator.com/css-forum/sutra77820.html

The site suggested in the second post contains several pure CSS menus, but use with care - who knows, some of them (given the status of the contributors), could be very close to rocket science Wink . Hugo's later suggestions are for simpler dropdown menus achieved with the use of Javascript. Although the word "simpler" could be relative depending on your expertise with JS :roll:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Trying something new

I was not wishing to be harsh excavator just offering a note of warning there is a propensity for people to play with fire apropo of advanced CSS that relies on twisting the properties available to do something not originally conceived. It's all very interesting and I am in awe of the guys that can do this and have the time but at the end of the day they are techniques of an experimental nature and to use them in a production site might not be advisable, indeed one site showcasing complex source ordered and other advanced techniques for layouts notes that they would use the code with caution in a production site.

I looked at your page and noted that it was unlikely just a personal playground and that you would /could get in a right pickle attempting what you were, I know I have run into problems with example code from one of Stu's pages before and I was pretty methodical in my attention to what I was doing but still failed to get it working.

The suckerfish examples are relatively simple (even the Javascript to a certain degree) and used a lot.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me