css menu problem

[Paul F. Johnson]

Hi,

url : http://ahnews.music.salford.ac.uk/channelm/
stylesheet: http://ahnews.music.salford.ac.uk/channelm/css/chm-css.css

I currently have two problems, one of which is browser specific - any
advice would be appreciated.

Problem 1 (browser specific)

The site works under Mozilla, Netscape and Opera 7.11 (but the menus
aren't that happy under Opera - they get squished - is there a fix for
this?). Under IE, the menus
completely fail, so the top level links are enabled.

It looks like the problem is IE and hover. Can the style sheet be fixed so
IE users are also able to access the drop down menus?

Problem 2

As it stands, the site looks fine at 1024 x 768, except for the menu
positioning. I can fix this by adding padding-left: 20em; to the menubar
definition in the stylesheet. Unfortunately, when this is done and viewed
ay 800x600, the menu is messed up somewhat. I am unable to surround the
class in the html file with <div align="center"> and that only affects the
menu options and not the menubar itself. How do I go about centreing the
menu bar?

Thanks for any help on either problem.

TTFN

Paul

Website tested on Moz 1.5, Firebird 0.6, Opera 7.11 (Linux), Konqueror, IE
5.5 and IE 6.

 

[kchayka]

url : http://ahnews.music.salford.ac.uk/channelm/
stylesheet: http://ahnews.music.salford.ac.uk/channelm/css/chm-css.css

I currently have two problems,

No, you have more than two problems, you just don't realize it yet.

As it stands, the site looks fine at 1024 x 768

Possibly it does, however the layout degrades rather poorly at smaller
window sizes. Increase the text size and it gets even worse. The
content area is much too small, ghastly scrollbars appear, the schedule
items overlap the content, the menu bar line wraps and becomes partly
inaccessible... I'm sure there are more issues, too.

You really have too many top-level menu items to use a horizontal DHTML
menu effectively. It will be a usability problem for sure, perhaps an
accessibility problem as well. This many items would be better off in a
vertical list. Scrolling divs are also a horrible idea - they present
both usability and accessibility problems.

Thanks for any help on either problem.

Rethink your layout, please. BTW, don't mix <font> tags with CSS, it
just leads to trouble.

 

[Toby A Inkster]

It looks like the problem is IE and hover.

IE only supports :hover on links. :-(

Can the style sheet be fixed so
IE users are also able to access the drop down menus?

Not really, but take a look at the drop down menus on
http://devedge.netscape.com/ -- these are similar to your CSS menus but
have a little JavaScript that makes them work on IE5/IE6 too.

 

[Paul F. Johnson]

Hi,

By the process of poking various fingers onto keys Toby A Inkster generated this:

Paul F. Johnson wrote:

Not really, but take a look at the drop down menus on
http://devedge.netscape.com/ -- these are similar to your CSS menus but
have a little JavaScript that makes them work on IE5/IE6 too.

I'm really trying to avoid JS if I can get away with it. Full drop-down
menus with JS are quite simple, but can be a pain in the backside if
your browser doesn't support JS *or* is turned off. I'll look into them
anyway - thanks

TTFN

Paul

 

[Toby A Inkster]

I'm really trying to avoid JS if I can get away with it. Full drop-down
menus with JS are quite simple, but can be a pain in the backside if
your browser doesn't support JS *or* is turned off. I'll look into them
anyway - thanks

The Devedge ones only use JavaScript to cover over the CSS problems in
IE5, IE6 and Opera 6. In Opera 7 and Gecko the menus work via pure CSS
(they will work when JavaScript is disabled)