|
| |
|
|
tineyang
Posts: 5
Joined: 7/28/2008
Status: offline
 |
CS3 Spry Horizontal Menu Troubleshooting - 7/28/2008 18:15:20
Basic info:
Temporary website: http://playerstheatretest.bravehost.com/.
Problem:
The website displays differently in various browsers. I'm mainly having trouble with the spry horizontal navigation bar:
Safari (3.1.2): The website displays perfectly, submenus open up under navigation bar, no borders or padding around buttons.
Firefox (3.0.1): White borders appear around the tabs of my navigational bar. I'm not sure where these come from. Submenus open fine though.
Internet Explorer (5.2 for mac): Submenus don't appear at all when you hover the mouse over the main navigation bar.
I've also been told that in other versions of Internet Explorer, the submenus open up laterally and covers up other menu buttons. I don't have those versions on my computer, so I haven't been able to check.
I'm quite new to working in Dreamweaver, so could someone take a look at my code and find out what the problem is? Or how to rectify this?
|
|
|
|
tineyang
Posts: 5
Joined: 7/28/2008
Status: offline
|
RE: CS3 Spry Horizontal Menu Troubleshooting - 7/29/2008 13:59:00
Thanks jaybee!
I've managed to erase the white borders around my menu bar in Firefox.
But in Internet Explorer 6 & 7, I'm still having trouble with the drop-down menu. They all open horizontally instead of vertically. How do I correct this?
Also, the menu bar has a blue border in IE, which I'm guessing is because the active text links on my page are all blue. Is there a way to delete the blue around the menu bar links, yet still have my text links in blue?
| |
|
|
|
TexasWebDevelopers
Posts: 202
Joined: 2/22/2002
From:
Status: offline
|
RE: CS3 Spry Horizontal Menu Troubleshooting - 7/29/2008 20:16:32
You have two <head> tags; two <body> tags; two (different!) DOCTYPES...
It's a "do over"...
ul.MenuBarHorizontal ul a {
text-align: left;
}
-->
</style>
</head>
<body onload="MM_preloadImages"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">
#sBar {text-align: center; margin: 0; margin-bottom: 10px; padding: 5px 0px; width: 728px; background-color: #fff; border: 1px solid #dfdfdf;}
#sBar li {display: inline; }
#sBar li a, #sBar li a:visited {font: bold 11px tahoma,arial; text-decoration: underline; color: #004891; margin: 0px 15px;}
</style>
</head>
<body>
| |
|
|
|
tineyang
Posts: 5
Joined: 7/28/2008
Status: offline
|
RE: CS3 Spry Horizontal Menu Troubleshooting - 7/31/2008 18:34:07
I've revamped my navigational bar with one from Stu Nichols' site, and it solved most of the problems. Thanks guys!
| |
|
|
|
treetopsranch
Posts: 1141
From: Cottage Grove, OR, USA
Status: offline
|
RE: Browser Compatibility Issue - 8/19/2008 19:31:53
That menu seems to be one of the most complicated menu scripts I have ever seen.
May I make several comments?
!. On Firefox, the HOME submenu "EXEC BIOS" has so many entries that they are off the page on the bottom on my monitor (800x600). You may want to make the font smaller so that all can be seen without scrolling the page.
2. All those ads and blocked popup's on the top really are distracting. Put them on the bottom (or better yet don't use them at all.)
Since most savvy Firefox users use the popup blocker they will not see some of the ads anyway. (IE 6 blocks some of your ads also)
3. It looks like you also may have some duplicate body tags but that isn't causing the IE 6 problem.
_____________________________
Don from TreeTops Ranch, Oregon
"I've got a taste for quality and luxury"
| |
|
|
|
tineyang
Posts: 5
Joined: 7/28/2008
Status: offline
|
RE: Browser Compatibility Issue - 8/19/2008 20:18:27
Treetopsranch:
Thanks for replying so quickly:) Actually, that webpage is just a temporary one before I move it to a school's server. The ads and popups won't be there in the actual version (bravenet just has them by default). I'll look into the body tags. Thanks!
Does anyone know what's causing the IE 6 problem though?
| |
|
|
|
TexasWebDevelopers
Posts: 202
Joined: 2/22/2002
From:
Status: offline
|
RE: Browser Compatibility Issue - 8/20/2008 19:13:49
you are using hover on the list items:
#pmenu li:hover > ul {display:block; position:absolute; top:0px; left:201px; padding:0px 0px 0px 0px; background:transparent url(transparent.gif); width:200px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:0px; top:50px;}
ie6 only supports hover on anchors.
You could use a whatever:hover script to get around this problem and you can find one here http://www.xs4all.nl/~peterned/csshover.html
However, treetopsranch is correct--there are css/javascript menus that support images that are cleaner to use than this one. (Google tiered menus)
We rarely use these types of tiered menus because of useability issues.
See Jacob Neilson's alert box for useability tips.
Here is an excerpt of an old interview:
"Many designers use dropdown and cascading menus, because it's
a tough challenge to reveal enough content to users, make
categories understandable and differentiable, all without putting
too much information on the page. By using dropdown menus,
designers think they can keep the page simple, while still
providing information on the homepage. A couple of major usability
problems often plague dropdown and cascading menus.
First, many menus give no visual affordance that they have
information lurking beneath, so people often don't know that they
are there. In fact, many users are startled when they hover over
an area of the screen and a new element pops up unexpectedly.
Users only discover the menus if they felt sufficiently convinced
that the menu choice was correct enough to go to it. This negates
any "benefit" from putting the submenu items on the homepage,
because it means that the hierarchy of the site is only revealed
to those who already have a pretty good understanding of it.
Another problem is that users can only see one dropdown menu at a
time, so if the user isn't clear about the difference between main
navigation items, he or she must access each one individually,
remember what was on each one of them, and try to determine which
main item to choose. That's a lot of work.
Another problem is that the menus often use tiny fonts and place
the items very close together. This means the user must have
precise mousing skills in order to select the right item. In many
of our studies, we've seen users select incorrect menu items from
dropdowns.
If you're going to use dropdown or cascading menus, then, they need
to have some sort of visual cue that they have a dropdown. Also,
avoid small fonts and allow adequate space between menu items.
Often you can avoid the dropdown dilemma by not trying to make
your homepage a completely democratic representation of all of
your content. It's much better to give top billing to the highest
priority items and feature some of the content in those categories
directly on the homepage and provide simple links to other
categories rather than to try to cram equal depth on all features on
the homepage."
| |
|
|
|
treetopsranch
Posts: 1141
From: Cottage Grove, OR, USA
Status: offline
|
RE: Browser Compatibility Issue - 8/20/2008 22:17:11
Amen
_____________________________
Don from TreeTops Ranch, Oregon
"I've got a taste for quality and luxury"
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
). It works perfectly in Firefox, Safari, and IE 7. In IE 6, the drop-down menus don't appear when hovered over. 