Smooth Menu and Safari

**Michael Mazzeo** · 01-06-2009, 03:31 AM

1) Script Title:Smooth Navigational Menu (v1.01)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: Firstly, I am not a web designer. I built my site in Dreamweaver.
The link is <http://www.michaelmazzeo.com/Current_Exhibition.html>
After having issues with a spry menu, I found DD's Smooth Menu. The menu works beautifully, except of course, in Safari, for which it is not optimized. The submenus are disconnected, and do not function properly, but if I reload the page or if I link to a page from another page within my site, the menu magically seems to work properly. So my question is, is there a workaround for Safari or is there a script that I can implement to automatically reload a page if the user's browser is Safari?
Please excuse my lack of html and javascript knowledge.
Thank you!

**ddadmin** · 01-06-2009, 09:12 AM

The menu was tested in Safari 3.x for Windows with no issues. Are you using a Mac? Unfortunately I don't have access to one, so can't debug for that OS.

**jscheuer1** · 01-06-2009, 11:39 AM

Well, actually the page at the URL given does have a problem with Safari 3 Win. I was looking at it earlier. I just didn't know how to advise you because the page needs a complete overhaul. It's heavy reliance upon absolute positioning is a poor design, and indirectly related to the problem in Safari. The styles are very spread out and confused, as is the order of tags in the head. So much so that the page is invalid. There are other issues along these lines. Also the slide show is of a poor design and should be replaced with:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

or some other better thought out javascript or Flash.

However, I have since realized that your immediate problem is that in Safari, that browser is deferring the loading of the pagetemplate.css file until after certain elements of the page are loaded in some way that affects the positioning of the drop downs. By refreshing, since the pagetemplate.css stylesheet is already cached, things work out better.

A quick fix would be to add the required styles right into the head here:

Code:

 . . . yle17 {color: #333333}
.style19 {
	color: #990000
}
#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:955px;
	height:630px;
	background-color:#FFFFFF;
	layer-background-color:#FFFFFF;
	border:1px none #000000;
	z-index:2;
	visibility: visible;
}
#apDiv2 {
	position:absolute;
	left:427px;
	top:13px;
	layer-background-color:#FFFFFF;
	border:1px none #000000;
	z-index:100;
	width: 514px;
	visibility: visible;
}
-->
</style>
</head>

<body onload="MM_preloadImages('../SpryAssets/SpryMenuBarDownHover.gif','../SpryAssets/SpryMenuBarRightHover.gif')">
<div id="apDiv1">
<div id="apDiv2"> 
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Artists</a>
  <ul>
  <li><a href="artists/gallery_art . . .

**Michael Mazzeo** · 01-06-2009, 12:31 PM

Originally Posted by ddadmin

The menu was tested in Safari 3.x for Windows with no issues. Are you using a Mac? Unfortunately I don't have access to one, so can't debug for that OS.

Yes, indeed, I'm using a Mac.

**Michael Mazzeo** · 01-06-2009, 12:36 PM

Originally Posted by jscheuer1

Well, actually the page at the URL given does have a problem with Safari 3 Win. I was looking at it earlier. I just didn't know how to advise you because the page needs a complete overhaul. It's heavy reliance upon absolute positioning is a poor design, and indirectly related to the problem in Safari. The styles are very spread out and confused, as is the order of tags in the head. So much so that the page is invalid. There are other issues along these lines. Also the slide show is of a poor design and should be replaced with:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

or some other better thought out javascript or Flash.

However, I have since realized that your immediate problem is that in Safari, that browser is deferring the loading of the pagetemplate.css file until after certain elements of the page are loaded in some way that affects the positioning of the drop downs. By refreshing, since the pagetemplate.css stylesheet is already cached, things work out better.

A quick fix would be to add the required styles right into the head here:

Code:

 . . . yle17 {color: #333333}
.style19 {
	color: #990000
}
#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:955px;
	height:630px;
	background-color:#FFFFFF;
	layer-background-color:#FFFFFF;
	border:1px none #000000;
	z-index:2;
	visibility: visible;
}
#apDiv2 {
	position:absolute;
	left:427px;
	top:13px;
	layer-background-color:#FFFFFF;
	border:1px none #000000;
	z-index:100;
	width: 514px;
	visibility: visible;
}
-->
</style>
</head>

<body onload="MM_preloadImages('../SpryAssets/SpryMenuBarDownHover.gif','../SpryAssets/SpryMenuBarRightHover.gif')">
<div id="apDiv1">
<div id="apDiv2"> 
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Artists</a>
  <ul>
  <li><a href="artists/gallery_art . . .

Wow, I didn't know it was that badly designed! I will certainly try your suggestion to fix the Safari issue and will also look into the DD Slideshow.
In your opinion, John, would it be difficult for someone with the proper skills to clean up my site and just how big a job do you think that would be?
I thank you for your time and consideration!

Michael

Thread: Smooth Menu and Safari

Thread Tools

Search Thread

Smooth Menu and Safari

Bookmarks

Bookmarks

Posting Permissions