IE vertical offset problem - embedded in div tags (FIXED)

Poster: vanarie
Dated: Saturday November 25 2006 - 5:24:47 GMT

Account Id: 169307

Demo page:
http://www.listrocket.com/problem/example.html

I didn't have any problems at all when the menu was to the left top of the page, but my page redesign has the menu embedded in a table, which is inside of div tags that centers the entire page via CSS:

div#container {
width:775px;
margin: 0px auto;
margin-left: auto;
margin-right: auto;
overflow: visible;
position: relative;
}

Problem is that in IE, the vertical dropdown is offset to the right, and it gets WORSE the wider you make the browser window. Make the browser window "fit" the middle content box and it lines up, but go full screen and you can see the offset problem (in IE v5 anyway - haven't tried it in other versions)

There is no problem in Firefox.

I looked for a solution in the forums, but couldn't find a fix so far. Any ideas??

Thanks!

****************
*** SOLUTION ***
****************

The offset problem should be easily solved by adding the following to the bottom of your menu_data_ie.js file:

drawMenus();

This will draw the menus at source and not inside the DIV, this is the reason for the offset.

Hope this helps
Milonic Support

Poster: John
Dated: Monday November 27 2006 - 14:19:31 GMT

You'll need to upgrade first. Current is v5.764, you're at v5.760.

Let us know if that helps.

IE right offset issue still present

Poster: vanarie
Dated: Monday November 27 2006 - 15:35:38 GMT

I uploaded the new version, cleared out my cache, and the offset issue is still present. I played around with some settings, but I don't know how to fix it.

It's probably something simple - I hope. Is there anything else you need to troubleshoot this?

If I set the width to 100%, the problem goes away. But I need it to work with a centered layout.

div#container {
width:100%; <-- FIXES THE PROBLEM
width:750px; <-- BREAKS IE - CAUSES OFFSET
margin: 0px auto;
margin-left: auto;
margin-right: auto;
overflow: visible;
position: relative;
}

Poster: Ruth
Dated: Tuesday November 28 2006 - 2:54:16 GMT

Hi,

The problem is the position: relative in this css code line.



Removing that seems to fix the issue.

Ruth

fixes problem, but breaks other elements (sigh)

Poster: vanarie
Dated: Tuesday November 28 2006 - 3:32:15 GMT

True, that does cause the problem to go away, but I have other <div> elements positioned just where I want them within the #container, such as this...



If I take "position: relative;" out of the #container style, these other <div> elements don't float over the page, they displace everything.

There must be some other fix I can work into Milonic, isn't there. A hack of some sort maybe? OH, do I *hate* designing for multiple browsers. Can't they all just get along??

BTW, I have no problem using an IE centric version of the menu code - that's how it works anyway for this page.

Poster: Ruth
Dated: Tuesday November 28 2006 - 5:57:02 GMT

Hi,

I don't see that div any place in the example. To figure out a solution for your issue we'd need the actual page as designed for you layout as you want it.

For example, with another layout that had a shift problem the solution was to switch the margin setup for the container with that of a contained div switching the 10 and 0 margins around. But without the full layout I would not have been able to figure that out.

Ruth

Re: fixes problem, but breaks other elements (sigh)

Poster: John
Dated: Tuesday November 28 2006 - 13:45:54 GMT


No such thing here. That's what the mmenudom code is for - all browsers that are DOM compliant. Unfortunately, as you suggest, they all have their own idea of just exactly what that is.

Listen to Ruth - she's good!

Poster: vanarie
Dated: Tuesday November 28 2006 - 14:39:27 GMT

Ok, I put the <div> text in the example. If you like, you can login to the main site as demo/demo, but it's the same page, only stripped down to make it easier to troubleshoot.

Thanks for your help! Hope we can think of a solution. I can't imagine that this type of layout is rare. Is it?

Poster: Ruth
Dated: Wednesday November 29 2006 - 6:39:33 GMT

Hi,

I downloaded the actually page you get after login and worked on that since I would be able to better see all the stuff and see if what I did caused problems.

Try the following

Substitute for your DIV#container css



Then on the page in place of the div id=container put



and add a closing div tag at the end to match the two divs now on the page.

I tested at 800x600, 1028x768, and 1152x864 IE5.5, I.E. 6 and FF1.2, 1.5.08 [I couldn't go any higher on my computer monitor setup] At these resolutions I couldn't see any change in the page or the things on the page, and the submenus open correctly.

Ruth

Poster: vanarie
Dated: Wednesday November 29 2006 - 16:20:14 GMT

I tried the mods on the page, but I need to be able to position things within the <div id="container"> like popups and text blocks. Such as:



For example, in the demo account you can see that the "News: IE Users, please read" is in a <div> that is positioned like the example above.
http://www.listrocket.com/problem/problem1.jpg

When you click it, a popup appears below it. This popup is also positioned relative to the <div id="container">.

I updated the test page a little:
http://www.listrocket.com/problem/example.html

Thanks for your help.

Poster: Ruth
Dated: Thursday November 30 2006 - 0:26:55 GMT

Hi,

OK, this is the only solution I have found. It is probably not what you want, but it works and your divs position correctly.

EDIT: Link removed.

I'd like to mention a couple of things for you to keep in mind. Unless you plan on using images for your items, you are going to have problems when someone changes their font size. The menu will expand and depending on the font size chosen it will cover the logout section. Images are the only way to avoid this, and that makes the menu not as usable for anyone who needs a larger font.

Have you considered putting that log out into the menu, setting the menu at the top of the page, using screenposition='center'; top=0; menuwidth=775; menualign=left; This will always keep the menu centered on the page even if the font size is changed by the user. At larger fonts the menu will expand, but it would still be centered.

PS: I know you wanted a css style and div solution, but I was unable to find one. The problems are involved, the different way different browsers treat position and size divs, margins padding, the fact that the menu programming itself uses divs, tables spans etc to create the menu and so on.

Ruth

Poster: vanarie
Dated: Thursday November 30 2006 - 17:34:25 GMT

Thanks for your help Ruth.

Poster: Ruth
Dated: Thursday November 30 2006 - 19:41:55 GMT

Hi,

You're welcome. I hope this works OK for you. As you saw the page looks the same and the one advantage to this is that since the logout is in the same table but in a separate cell from the menu if font size is increased the menu will not go over the logout because the table will expand.

Ruth