15 replies [Last post]
Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

Hello! I am new here, looking for a CSS forum I landed here. After years of working/thinking in tables I recently changed to CSS. I like it a lot, but I stil run into problems now and then...
I made a website for a client and used the horizontal menu from this site (multi level light weight drop down menu) and adjusted it a little (colours and stuff) to fit into my website.

All worked fine, I work on an Apple, in different browsers. I thought... Until the client asked me why the submenus are empty. He sees no text! I believe he uses MIE 6.

I changed some things and I was wondering if you guys could check for me if the menu (and submenus) now work on PC-browsers. And if not, what do I have to do to get them to work.

http://www.esthermols.net/clients/clearwood/index.html

THANKS A LOT!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 7 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSS/JS menu check in PC-browsers

Nice looking site, but while nothing disappears, it does look very different in IE and Firefox.

I suspect a main cause is your use of absolute positioning. I can't see anything on the page that couldn't be done without that, and absolute positioning is well known to cause problems, especially with Internet Explorer.

Nice to see a site with valid xhtml though. Laughing out loud

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

ukgeoff
Offline
Enthusiast
Last seen: 14 years 7 weeks ago
Joined: 2005-03-10
Posts: 77
Points: 0

CSS/JS menu check in PC-browsers

Last year I put a tutorial together on how to create css driven menus, both vertical and horizontal.

It goes through all the basics you need to know without moving onto some of the finer styling points.

It may help your understanding and you can get at;
http://www.1ontheweb.net/downloads/Creating_a_CSS_driven_menu_system.pdf

Regards
Geoff

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 30 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

CSS/JS menu check in PC-browsers

I like the effect you have achieved with id="current". You could emphasise this a little more by using a slightly darker color, ie decrease lightness rather than hue, as the background-color.

Hope this helps

Tech

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 26 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS/JS menu check in PC-browsers

ukgeoff wrote:
It may help your understanding and you can get at;
[url]http://www.1ontheweb.net/downloads/Creating_a CSS_driven_menu_system.pdf[/url]

That link doesn't work.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

CSS/JS menu check in PC-browsers

Thanks for the suggestions!
But is it still the same that in IE6 on a PC the sub-menu is empty (no text)? Because if that is the case I need to find another menu. Any suggestions?

Thanks again!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 26 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS/JS menu check in PC-browsers

The javascript looks like it comes from the Suckerfish example but your CSS doesn't look the same. Perhaps take a look at the most recent article on the subject: http://www.htmldog.com/articles/suckerfish/dropdowns/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

CSS/JS menu check in PC-browsers

I used this one: http://www.csscreator.com/menu/multimenu.php
I think it was based on the suckerfish example.
I adjusted the CSS a little. Mayby I should start allover with the suckerfish example. Thats probably the safest way.

Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

CSS/JS menu check in PC-browsers

Ok, I adjusted the menu following the Suckerfish dropdown menu. In Safari, Netscape and Firefox, on A Mac, it looks ok now. How about the PC-browsers?
Could you guys please take a look one more time?
THANKS!

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

CSS/JS menu check in PC-browsers

The positioning of the dropdown ul is off in IE (to the right iirc) you will need possibly to ensure #nav li has position relative to give the nested dropdown ul a reference point and also you may need to use 0 instead of auto and IE prefers to have both offset positions declared:

#nav li:hover ul, #nav li.sfhover ul { left: 0;top:30px; )

Can't test for this in IE at the moment.

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

Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

CSS/JS menu check in PC-browsers

Thanks Hugo, I tried this. On the Mac-browsers nothing changes, so that is ok. Let's see what happens on the PC-browsers!

ukgeoff
Offline
Enthusiast
Last seen: 14 years 7 weeks ago
Joined: 2005-03-10
Posts: 77
Points: 0

CSS/JS menu check in PC-browsers

Appologies for the duff link posted previously. I missed one of the underscores out. This one is correct.

http://www.1ontheweb.net/downloads/Creating_a_CSS_driven_menu_system.pdf

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

CSS/JS menu check in PC-browsers

Es it looks fine now in IE6 on XP.

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

Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

CSS/JS menu check in PC-browsers

Hugo wrote:
Es it looks fine now in IE6 on XP.

Thanks!!

jlhaslip
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

CSS/JS menu check in PC-browsers

Just tried using NN7/mac and the submenus all pop-up on the extreme left-hand side of the display, so it is impossible to activate the third or fourth sub-menu because by the time you move the mouse over, the sub-menu is replaced by another one caused by rolling over the intervening menu items. Of course, how many of these old Browsers wll be viewing your page is a good question to ask yourself. Might not be a problem.
Don't know if you needed to hear that, but that is how I saw the site.

I'm having a good day...so far.

Es
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2006-04-27
Posts: 8
Points: 0

CSS/JS menu check in PC-browsers

jlhaslip wrote:
Just tried using NN7/mac and the submenus all pop-up on the extreme left-hand side of the display...

Thanks a lot! I have Netscape 7.2 (also Mac) and there it looks ok. I don't know, I am trying to get it to work in as much browsers as possible of course. But I think I need to focus on the most-used. But thanks anyway for your effort!