Menu position different in Safari/Firefox Mac and win IE/FF

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:13

Menu position different in Safari/Firefox Mac and win IE/FF

Poster: Rolobo
Dated: Saturday February 25 2006 - 10:06:26 GMT

I've been playing around with this for some time now and am completely stumped.... the following page renders perfectly in Safari and Firefox for mac, but the menu is off by approx 2 pixels in IE win and Firefox for windows. I've fixed the IE problem with a CSS hack but can't get the Firefox working right unless I change the position in menu_data which of course screws things up on the Mac browsers. I've puzzled because Firefox and Safari tend to render things the same--- but firefox for windows seems to be rendering more like IE (win) in this case. Any help would be greatly appreciated!

http://roland.netherweb.com/scilucent/

My css file...

http://roland.netherweb.com/scilucent/scilucent.css (the stuff at the very bottom)

and

http://roland.netherweb.com/scilucent/menu_data.js

Is this somehow related to the "box rendering" bug people have been talking about?

I would like to avoid a browser detecting script if at all possible.

Thanks,
Roland

Poster: Ruth
Dated: Saturday February 25 2006 - 14:33:18 GMT

Hi,

Before we try zillions of tests

try downloading the pre-release 5.743 and see if that fixes it. It says something about having a suppression of some errors for FF so maybe that was one of the problems. If that doesn't work, post back and we'll try and see if we can figure out what's up.

http://www.milonic.com/menuvinfo.php

Don't forget to log in on your main site log in name so you get your licensed version.

Ruth

Installed the new release

Poster: Rolobo
Dated: Saturday February 25 2006 - 18:30:36 GMT

I've installed the new release, but alas, the problem persists. I've commented out my little css hack to fix the problem in IE so the 2 pixel discrepancy should show in both Firefox and IE for Windows and work correctly on Safari and Firefox for mac.

I really appreciate the help :-)

Poster: Ruth
Dated: Saturday February 25 2006 - 20:33:21 GMT

Hi,

I'm still working on this. Like you, I cannot figure out the problem and since I do little css it's going to take me some time, if I ever find it.

I did find a workable solution, at least I think it is. I created two new images, the first one is a transparent with nothing on it so you won't actually see anything, you'll have to 'select all' and then copy it. The second is the circle with no line in it and the circle is 1px farther to the right. This is not exact, you'll have to take a look in all the browsers but since there is no longer a line in the menu images it might be acceptable.
They use your div border as the vertical line through the circle.

http://support.milonic.com/ruth/location1.gif

http://support.milonic.com/ruth/location1_on.gif

Just as an added note, you could save yourself some typing by creating a copyOf to use for the submenus that have the function in them.

Code:

subStyle1=new copyOf(submenuStyle); 
subStyle1.offfunction="Ex1.fader.fadeIn()"; 
subStyle1.onfunction="Ex1.fader.fadeOut()"; 

Paste that below the submenuStyle section, then remove the offfunction/onfunction from all the items and use subStyle1 as the style in the menus that need that function, for example:

Code:

with(milonic=new menuname("Solutions")){
left="offset=2";
style=subStyle1;
aI("showmenu=Medical; status=Development and Manufacture of Medical Products;text=Medical Products;url=http://www.a-q.co.uk/;");
aI("showmenu=Biologics; status=Develop and Support a Product;text=Biologics;url=http://www.a-q.co.uk/;");
aI("showmenu=Invest; status=Invest in a healthcare product company ;text=Invest in a Healthcare Company;url=http://www.a-q.co.uk/;");

}

Just a shortcut trick that saves some typing or copy and pasting

Ruth

almost good enough

Poster: Rolobo
Dated: Saturday February 25 2006 - 21:04:27 GMT

Ruth, thanks so much for the copyOf tip... very handy. I tried your trick with the transparent images---but unfortunately it's a bit too far off --- I think it would be fine if it was only off 1 pixel... in it looks decent in IE now but a off in Safari.... Lets play around with this a bit more and If we can't figure anything out I'll just go the separate css route.

Thanks again,
Roland

Poster: Ruth
Dated: Sunday February 26 2006 - 1:01:04 GMT

Hi,

The problem is someplace in the padding. I haven't been able to figure out where because it's probably some combination of things, padding, divs borders etc. I put padding=1; in the menuStyle and it shifted it where it belongs in IE and FF, however I don't know what will happen in the mac os, I don't have a mac.

You are aware that in FF, NN and IE [if accessibility is set in the latter], doing all this with that line to match up with the div is not going to matter, once you increase text size in any of the above circumstances the menu will get larger and that right side will shift farther right moving the image and therefore the line. The only way you can control something like that is to make your image and overimage include the text so that the size will not change. You can test it in FF by going to view, textsize and click increase.

Ruth

thanks for the help

Poster: Rolobo
Dated: Sunday February 26 2006 - 3:16:07 GMT

I'll play around with it.... Thank you Ruth

Poster: Migru
Dated: Monday February 27 2006 - 11:45:48 GMT

Hi

would you please post how this was settled? Im interested to get to know...

Michael

Industrial Strength JavaScript and DHTML Menus

Menu position different in Safari/Firefox Mac and win IE/FF

Installed the new release

almost good enough

thanks for the help