Cross browser differences.

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

Cross browser differences.

Poster: ritchied
Dated: Wednesday November 19 2008 - 16:39:18 GMT

I am just testing for a new deployment, the test page can be seen at http://www.s1communications.co.uk/tst/ I am using the Blackforest menu downloaded from this site.

I want the menu to be displayed in the centre of the page, I have a <div style="text-align:center"> around the code, and I have tried it with and without separate menu definitions as instructed in the relative positioning guide.
I have some text below the images which is centred properly according to the body definition. body {text-align:center}

In IE7 the menu is in the right place (centre)
However - The menu fails to render the gray and white arrows correctly.

In Safari & Firefox, the menu is displayed hard to the left. The text below the images is centered.
Both the gray and white arrows are displayed correctly.

If you think that the image fading script is interfering, another page index2.htm s in the same location without that.
I know that the css is causing the arrow problem, but I have yet to discover why or how. My main issue is the positioning of the menu, and I would like to avoid tables.

Suggestions please ?

Re: Cross browser differences.

Poster: Ruth
Dated: Wednesday November 19 2008 - 22:50:39 GMT

Hi,

I'm not sure why you are doing the relative position. It would be easier to just set the menu as

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=20;
itemwidth=150;
orientation="horizontal";
style=menuStyle;
top=15;
screenposition='center';

Just put it back in the data file and put the drawMenus(); at the end of the data file and just call it on the page as you have it now, removing the main menu from the page itself.

I just took a guess at the top position, it looked like it was about 15px from the top of the page. This way you don't have to worry about the relative positioning which can be different in some browsers depending on css or how the browser treats divs etc. By using screenposition='center'; it will always be in the center of the screen no matter what the browser resolution, i.e. in 800x600 it will center in the 800, in 1028 by 768 it will center in the 1028 and so on.

If this isn't acceptable, you'll need to give me the page you talked about with the text and such, since the one I went to on the link had no text on it.

Ruth

PS. Duh, I see the text at the bottom, so I have the page if you still need it to be in the div and relative positioned let me know.

Re: Cross browser differences.

Poster: ritchied
Dated: Wednesday November 19 2008 - 23:53:16 GMT

Hi Ruth
Thanks for the reply.
I did see the screenposition option, but I wanted to use css to determine where the menu would display within the page. Pretty much the way you can in a table with the relative command.
It is curious that IE does follow the div but FF/Safari do not

Any ideas as to why the images display incorrectly in IE, my css has img {filter:alpha(opacity=100);} for the fade script, all of the images display OK except the two arrows.
This is OK in FF/Safari.

Thanks

Re: Cross browser differences.

Poster: Ruth
Dated: Thursday November 20 2008 - 2:33:08 GMT

Hi,

I'm sorry but I do not understand what it is you want to do. You do not have any positioning using css for that div unless you mean the text-align, but that doesn't really have anything to do with the positioning of the div, only of the text inside. For example, let's say you want the div to be centered and that you want the menu to be in it. You would need to create a class for the div and set a size and set the left and right margins to auto.

Try this css code, it has a border in it so you can see the div itself, I set it at 750 since your items are 150 and there are 5 of them.

Code:

div.centerIt {
   border: 1px solid red;
   font-family: "Verdana", Tahoma, arial;
   font-size: 10pt;
   width: 750px;
  margin-left: auto;
  margin-right: auto;
}

Then put your div on the page with the main menu in it[or its file if you put the main menu into its own file] Note that since you are placing the menu into the div relatively positioned as you have you need to call the program files immediately after the body tag. This is because they need to be built before the main menu is built.

Code:

<BODY onload=photoGallery()><!--
    Milonic DHTML Website Navigation Menu Version 5.0+
    Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.
    Please visit http://www.milonic.com/ for more information.
-->
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<SCRIPT src="mmenudom.js" type=text/javascript></SCRIPT>
<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT>

<DIV class="centerIt"><!-- **** JavaScript Menu HTML Code -->
<script type='text/javascript'>
with(milonic=new menuname("Main Menu")){
position='relative';
alwaysvisible=1;
itemheight=20;
itemwidth=150;
orientation="horizontal";
style=menuStyle;
aI("align=center;text=Home;url=http://www.s1consulting.co.uk/;");
aI("align=center;showmenu=S1;text=S1;");
aI("align=center;showmenu=Partners;text=Partners;");
aI("align=center;showmenu=Links;text=Links;");
aI("align=center;showmenu=MyCustomers;text=Customers;");
}
drawMenus();
</script>
</DIV>

Now, as to the images, I have no idea what you are doing about the transitions thing. That will not work in any browser but Internet explorer, the transitions and filters are proprietary to IE. So, can you tell me what it is you are trying to do? It is because of that opacity 100% that the images in IE are showing all of them, even the so-called transparent part. If you remove that from the css code the images look just the same in IE and FF and NN and Opera.

Ruth

Industrial Strength JavaScript and DHTML Menus

Cross browser differences.

Re: Cross browser differences.

Re: Cross browser differences.

Re: Cross browser differences.