Forums Archive Index > SmartMenus 5 > Mac submenu problem when using relative positioning
Date: 20 Nov 2005 11:44 pm
I can get this to work on a PC, but on a MAC the fly outs submenu on the nav don't work (when using relative positioning). The <script> is right before the </body> tag so the nav shows up on top of the leftnav DIV.
You can see an example at
--> http://staging.relatedr entals.com/index.asp
If you strip off the index.asp you can see all of the script files (located in the _js folder)
Date: 21 Nov 2005 12:29 pm
Let me follow up with more details...
The menu system works correctly on IE on a Mac. However the menu doesn't show up at all in Safari. If I switch to absolute positioning it works as expected in Safari (but obviously doesn't work in the design).
Date: 21 Nov 2005 4:02 pm
Maxout wrote:
The menu system works correctly on IE on a Mac. However the menu doesn't show up at all in Safari. If I switch to absolute positioning it works as expected in Safari (but obviously doesn't work in the design).
Yep, I have been testing it for some time today. There is definitely something in the CSS layout of the page that Safari doesn't like. I will try to find the answer ASAP..
Date: 21 Nov 2005 5:37 pm
Thanks.. For most sites I don't care about the Mac, but this site requires Mac support.
Date: 22 Nov 2005 5:53 am
I found the cause for the problem. In the following file "/_includes/lpf.css" REMOVE the following (it's in the beginning of the file):
Code:
* {
position:static; /* IE5/Mac likes this, doesn't like ...:relative;. */
/* hide from IE5/Mac */
/* \*/
position:relative; /* rumored to help with some IE problems (other than IE5/Mac. */
/* */
text-align:left; /* IE sometimes decides to center stuff for the heck of it */
font-size:1em;
}
This rule sets position:relative to ALL elements on the page in ALL browsers except IE5/Mac. This is one of the worst approaches to address some possible browser quirks I have seen. Note, that it can potentially cause problems to any part of your page layouts in many different browsers.
Date: 22 Nov 2005 1:32 pm
I commented out the entire chunk of code. Now the flyouts work on Mac/Safari, but it is left aligned instead of relatively positioned.
It still functions correctly on a PC which is good.
Date: 23 Nov 2005 12:35 pm
It looks OK in Safari 1.2. :? What version of Safari are you using?
Date: 23 Nov 2005 5:59 pm
Sorry for the confusion. We put the code back the way it was so the menu would at least line up.
So to be clear, you are seeing the submenus fly out of the nav on Safari like PC/IE? That was the orig. issue.
(I'm not at the office and don't have access to a Mac right now)
Thanks...
Date: 24 Nov 2005 5:33 am
At the moment the flyouts are not appearing. This is because you haven't removed the code I told you to remove. Commenting hasn't worked because that block relies on parsing bug in IE5/Mac anyway and when you have tried to comment the block, you have created even worse mess.
So now please REMOVE the following from the "/_includes/lpf.css" file:Code:
* {/* position:static; IE5/Mac likes this, doesn't like ...:relative;. Justin commented out... *//* hide from IE5/Mac */ /* \*/ /* position:relative; /* rumored to help with some IE problems (other than IE5/Mac. *//* *//* text-align:left; /* IE sometimes decides to center stuff for the heck of it *//* font-size:1em;}
* { position:static; /* IE5/Mac likes this, doesn't like ...:relative;. *//* hide from IE5/Mac */ /* \*/ position:relative; /* rumored to help with some IE problems (other than IE5/Mac. *//* */ text-align:left; /* IE sometimes decides to center stuff for the heck of it */ font-size:1em;}
and the flyouts should appear. The code above is found immediately after the copyright notice.
I also noted that now the page layout isn't any more center aligned in Safari. It's left aligned. I suppose you have changed something else in your CSS.. :?