Mac problems with IE/Safari

davidh · Post by **davidh** » Sun May 16, 2004 11:50 pm

Hi,

I'm having trouble getting a menu that looks fine in IE on Windows and in Mozilla to look acceptable in Mac IE and Safari.

Here's a slightly simplified page that show the problem:
http://dcaf.divad.org/Test/foo.shtml

And here's a direct link to the menu data:
http://dcaf.divad.org/Test/Includes/Menu/menu_data.js

If you don't have a Mac handy, I've posted some screen shots to give you an idea of how it looks on the Mac:
http://dcaf.divad.org/Test/problem/

In Safari, there are two problems:
1) the top menu extends expands beyond the usual width of its containing table by a couple pixels.
2) The border of the bottom menu is only visible on the right edge.

In Mac IE 5.2 there are three problems:
1) The top menu doesn't seem to respond to "menuwidth=100%" and stops short of the full width of its containing row/table.
2) The bottom menu stubbornly hugs the left margin despite all attempts to right justify it.
3) The presence of the menu causes the third column of the main table to double in width for no apparant reason.

Also, in the course of researching these problems, I noticed that the Relative Positioning (Table Bound) sample on the Milonic site doesn't work in either of these Mac browsers:
http://milonic.com/menusample9.php

I've tried removing the style sheets and fiddling with all sorts of things to no avail. Any ideas would be appreciated!

Post by **John** » Mon May 17, 2004 2:49 am

You're missing the closing ; in both drawMenus() in the HTML. Probably not the ultimate fix, but they should be there.

Still looking at it.

Post by **Ruth** » Mon May 17, 2004 3:02 am

There may be a problem with the position. Although you have the cell marked as align right, you have colspan 3, and the menu is 'relative position' in the other browsers it probably takes the align right, but in mac IE especially which messes up the world, it may just begin at the left side of the cell ignoring the align right. One solution would be to put a one cell table in that cell and align the table right and put the menu in that table. I don't have a mac to test it.

Ruth

davidh · Post by **davidh** » Mon May 17, 2004 3:39 pm

You're missing the closing ; in both drawMenus() in the HTML.

Oops, added those. As you suspected, no change in the output.

One solution would be to put a one cell table in that cell and align the table right and put the menu in that table.

Ok, I tried it with just a table in the cell, then a table with one row, then a table with one row and one cell, all aligned right. Just the table caused IE in Windows to left-justify the bottom menu and didn't change Mac IE. Adding either the cell, the row, or both got it back to working in Windows IE but made no difference in Mac IE.

Thanks for the quick responses! Any other ideas would be greatly appreciated.

Post by **Ruth** » Mon May 17, 2004 6:24 pm

For the menu width try also putting in itemwidth="100%"; for some reason some browsers want that in order to make the menu 100%. As to the other issue, sorry I wasn't clear on the one cell. I meant it would have one row, one column. You said that didnt' work, but I noticed when I went back to the site you have the new table you put in for that bottom menu coded at width="100%", so it's probably expanding the full width of the td colspan=3 again. But, I don't know if that will fix it either. Other than that, I don't know what to suggest and can't mess with it for safari or ie since I don't have a mac

Ruth

davidh · Post by **davidh** » Mon May 17, 2004 9:08 pm

Yay, Ruth! The table in a cell thing worked to position the menu on the right in IE on the Mac once I removed width=100%.

The itemwidth="100%" thing actually makes the top menu look better than before in most browser, but in Mac IE it makes every menu item only as wide as its text. It even wraps the two-word menu names and squishes the item down to the width of the longer word. I don't have a way to post an image at the moment, but imagine it being about half the width of the cell it's in.

Post by **John** » Mon May 17, 2004 9:27 pm

Try stickin' an   in between the words you don't want it to wrap; e.g.,
aI(text="do not wrap this;url=etc...;");.

Post by **Ruth** » Mon May 17, 2004 9:45 pm

I can visualize it. Here are a couple of things to try.
1. put a non-breaking line space between each word in the multiple word items so they won't wrap
[you might as well leave them there they won't hurt] and test again in mac ie, if that doesn't work
2. try removing the menuwidth="100%"
3. if that still doesn't fix it, change to menuwidth=700; which is what you have that table coded, get rid of itemwidth="100%"; and in each item itself code the actual itemwidth=66; that's about right I think.
4. specify an actual fontsize rather than 75%, perhaps mac ie is sizing the menu down to fit that 75% value, so try 12px or whatever you want

Ruth

davidh · Post by **davidh** » Wed May 19, 2004 6:19 pm

Thanks again, the non-breaking space worked great.

Of the other suggestions, only explicitly setting the itemwidth made any difference in Mac IE. So that's what I'll do.

As for the Safari problems, I haven't made any progress. Since the relevant demo on your site doesn't work either (menusample9), I guess I'll wait for a new version

If there's anything I can do to help you all figure out the Safari problems, please let me know.

Post by **Ruth** » Wed May 19, 2004 8:07 pm

I don't know what to try as far as making the top menu not extend a bit beyond the table. For the bottom menu in which you are not seeing the border except on the far right, a couple of things to try though I don't know that it will do anything, try putting another borderwidth=1 in the menu definition you have in the table, and also try putting cellpadding=1 in the table definition for that table, and remove the align=right from the td code since you have it in the table code which is putting the table to the right where you want it.

Ruth

davidh · Post by **davidh** » Mon May 24, 2004 7:27 pm

Thanks again, Ruth. I tried all those suggestions and no joy in Safari, for the bottom (second) menu.

In fact, adding the extra <table> in the cell (which fixed IE Mac) caused the menu to break pretty badly... instead of the highlight when you mouseover it goes all black.

So, for Safari the problems are still the missing border when it's not in an extra table, and the missing border plus the menu is broken when it is.

I'm nearly out of time. Plan B is junk the bottom menu and go with something more compatible.

Maz · Post by **Maz** » Mon May 24, 2004 7:41 pm

Sorry I haven't had time to look into this, but it could be a case of taking out itemwidth that caused a problem in Safari.

maz

Post by **Andy** » Mon May 24, 2004 8:08 pm

Version 5.2 should help fix some Mac bugs.

Let me know if anything else isn't working quite right

Cheers
Andy

davidh · Post by **davidh** » Tue May 25, 2004 5:07 pm

5.2 seems to have solved the Safari problems! And with two special cases for IE 5 on the Mac, both top and bottom menus are working fine:

http://new.divad.org/piece.php?id=16

Of course, Opera is still weird, but then most of my page looks like crap in Opera, so I'm not going to sweat it.

Thanks again for all the help.

Post by **Andy** » Tue May 25, 2004 7:43 pm

For the record. We are getting to the point where we are only prepared to support Opera 7.5+ - This browser is so much better than anything that has gone before it and it works great on Windows, Mac and Unix.

So if it works in Opera 7.5 great - If not let us know and we'll look into it.

Glad we got to the bottom of things in the end.

Cheers
Andy

Post by **John** » Tue May 25, 2004 8:04 pm

For those who don't know, 7.5 is out of beta and now a final release.