Centering background image in IE7

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

Centering background image in IE7

Poster: phlee
Dated: Friday May 1 2009 - 19:42:00 BST

Hi,

I have used the Milonic menu for a while and was always able to get it to work the way I wanted it to.
I've had to re-layout a page from top/left aligned to centered. The new layout has a background image in the body tag (center top, no-repeat).

This looks fine in FF, Safari, Chrome even IE6. In IE7, however, this bg image is offset (i.e. not centered anymore). I have gone through my code and have identified the milonic menu scripts (embedded_main_menu.js) as the culprits. I.e. when I remove the main menu the bg image is properly centered in IE7. And even if the main menu is in but small enough (horizontal orientation), it is not an issue either, but when then horizontal menu gets wider it moves the bg image in the body tag to the right (as if the body was wider bc of the menu).

Does anyone have an idea how I could get this to work properly in IE7?

Thanks
ph

Re: Centering background image in IE7

Poster: Ruth
Dated: Friday May 1 2009 - 19:55:02 BST

Hi,

I can probably help, but I need to see the page so I can see all the codes

Ruth

Re: Centering background image in IE7

Poster: phlee
Dated: Friday May 1 2009 - 20:04:31 BST

Hi Ruth,

That would be great.
Have a look here: http://ohqc.mesh-test.com/en/index_v5.php

(this a test server, and we're working on the page, so it's work in progress; but I'm going to leave the bg image issue for IE7 for now so you should be able to see the problem if you call the page up w/ IE7)

Also, the connection to the test sever may be slow, but have a try!

Thanks
ph

Re: Centering background image in IE7

Poster: Ruth
Dated: Saturday May 2 2009 - 2:11:25 BST

Hi,

OK, took me a bit to find. Open your embed_main_menu.js file. Look toward the bottom, this is what I see

Code:

aI("text=|;");
aI("text=Feedback;url=/en/feedback.php;");
position="relative";
}

drawMenus();

Notice that after the closing); of the last aI there position="relative"; then the closing bracket for that main menu. Now, that has to be removed and put at the top, like this

Code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
//top=119;
//left=218;
alwaysvisible=1;
orientation="horizontal";
position="relative";

Try fixing that and see if the problem persists, if it does you have to give me your resolution settings. At my settings everything is centered, but do to that error in the data file, I get a very long horizontal/bottom scroll bar. So, let me know if that fixes it.

Ruth

Re: Centering background image in IE7

Poster: phlee
Dated: Saturday May 2 2009 - 4:41:15 BST

Hi Ruth,

Thank you very much for looking into this.
I have changed the embedded_main_menu.js file as per your description.

This has greatly improved the situation, although I still have some strange behaviour in IE7.

When I load the page now, the background actually positions correctly. When I mouseover the first three items in the navigation everything is fine. When I reach the fourth item, the horizontal scroll bar appears at the bottom again, and increases as I mouseover the 5th and then 6th item in the navigation. As the browser seems to think that the page has become wider it also repositions the background image (it is noticeable on the 5th and 6th items on my screen). The screen resolution I have on this computer is: 1280 X 1024.

Regards
ph

Re: Centering background image in IE7

Poster: phlee
Dated: Saturday May 2 2009 - 4:45:41 BST

Hi again,

Sorry, I just noticed now, that IE6 is now also having problems with the background image.
It is positioning it wrong right off the bat (it was actually Ok before the change).

Regards
ph

Re: Centering background image in IE7

Poster: Ruth
Dated: Saturday May 2 2009 - 7:08:55 BST

Hi,

I am not seeing that problem so I investigated a bit more. You are using a menu that is 5 years out of date. There's no way I can try and fix anything in that menu, the thing I did fix was actually an error in how the data file was coded. Anyway, the reason I guess I'm not seeing the problem is I used my menu program files and they are up to date, version 5.819. What you are saying is happening is not happening in the newest version. You are going to have to upgrade. Put your existing 3 program files someplace so you don't overwrite them, then download and use the newest version from http://www.milonic.com/

Ruth

Re: Centering background image in IE7

Poster: phlee
Dated: Monday May 4 2009 - 5:10:46 BST

Hi Ruth,

Thanks again for looking into this. I am sorry that you had to spend some time on this I should have thought of upgrading the code before I posted my question. So thank you very much. I think the line switch you mention above was still needed though to make it work properly.

Regards
ph