0

I am still experiencing a strange menu problem (the last menu item of the top navigation wraps) using Firefox 3.6 on Mac OS X of a contao-based website (www.medivas.de) I've implemented last month. A few days ago I asked a similar question and some Mac users tested for me and could not see any problem (please see my old question: strange-horizontal-menu-problem-with-firefox-on-mac. Now, the english content is published and there happens the strange menu wrap of the last menu item. No item is over-sized nor are the paddings to high for the entries.

Once again, the menu-wrap problem only happens with the english content of the website on Mac using FF 3.6, nowhere else. All other browsers (as I know of) work fine, even Safari on Mac shows no problem.

The designer of the layout used an old Firefox 1.5 version on her Mac, in both website content languages, the menu worked without any flaw. Then she updated her Firefox to the recent version (3.6.13 or 14) and now, in english content, the menu wraps at the last entry.

So, once again, I ask a you Mac users with FF and Firebug installed on Mac OS X to have a quick look at the website and maybe give me a hint what the problem could be of that misterious menu wrap.

Like stated in the old question: I use jquery to add paddings to the menu entries so they get evenly distributed on the container width of the menu. But I suppose that is not the problem, since it works in other browsers without any problem.

Thanks very much in advance, hopefully I can solve that issue with your great help. Maybe i can improve the menu-html / css some where. I have no Mac (Only Linux) so this makes all even worst since I can not test and try. I am out of ideas for now.

Andreas

Community
  • 1
  • 1
Andreas W. Wylach
  • 723
  • 2
  • 10
  • 31

1 Answers1

0

I'm testing on Windows/Firefox, and I can't recreate your problem. I'm going to guess a solution anyway:

  • On #nav-main-top, add overflow: hidden.
  • On .nav-main-top, adjust the width from 685px to something more excessive, for example:
    width: 750px.

After doing that, the site is visually identical for me, but hopefully it will have fixed the Mac issue.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thanks Thirtydot, your solution is not working for me. For some reason, the overflow: hidden; prepends a 15-20px wide "gap" before the first menu entry (home) inside the menu wrapper. Did I do something wrong? I am working with Ubuntu and FF 3.6.13, also do not know what Mac and FF say to this. – Andreas W. Wylach Mar 08 '11 at 13:46
  • @Andreas W. Wylach: You're using JavaScript to resize the buttons. I didn't realise this before. Because your site is screwed without JavaScript enabled anyway, let's try applying those same styles using jQuery. This is a nasty fix, but let us see if it works for you. I made a demonstration here: http://jsbin.com/equwe5 / http://jsbin.com/equwe5/edit - see below ``. – thirtydot Mar 08 '11 at 14:38
  • Yes, the menu items get paddings added for the distribution over the full width of the container. This is done by jquery (as stated in my question). I have not added the fallback method yet (in case of JS disabled). Considering the menu, do you have a better idea to distribute the items evenly, without JS? If yes, let me know and I am more than happy to implement it! I will try your demo and let you know. – Andreas W. Wylach Mar 09 '11 at 11:52
  • 1
    OK, that jquery css modification addition after processing the menu works now, that reported my partner using his Mac with FF. Should have though about adding your CSS to jquery before instead of adding it to the CSS defs. Anyways, I will have to think of a better way how to work out the top navigation and menu item distribution. Not very happy with the overall solution yet. Thanks for your help! – Andreas W. Wylach Mar 10 '11 at 03:55