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

[vanarie]

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

[John]

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

Let us know if that helps.

[vanarie]

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;
}

[Ruth]

Hi,

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

Code: Select all

DIV#container {
	MARGIN: 0px auto; OVERFLOW: visible; WIDTH: 775px; POSITION: relative
}

Removing that seems to fix the issue.

Ruth

[vanarie]

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...

Code: Select all

<div style="position:absolute; text-align: center; top: 32px; left: 580px;"><img style="width: 15px; height: 15px;" alt="" src="../images/button_red.gif" align="middle"><a href="#" onClick="return overlay(this, 'News',420,55)">News: please read</a></div>

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.

[Ruth]

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

[John]

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

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!

[vanarie]

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?

[Ruth]

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

Code: Select all

DIV#wrapper {	text-align:center;}
div#main{MARGIN: 0px auto; OVERFLOW: visible; WIDTH: 775px;}

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

Code: Select all

<DIV id=wrapper>
<div id=main><!-- header table --><!-- menu table --><!-- SPLIT BODY AND RIGHT PANE -->

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

[vanarie]

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:

Code: Select all

<div style="position:absolute; text-align: center; top: 210px; left: 210px;">Text div:position:absolute</div>

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.

[Ruth]

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

[vanarie]

Thanks for your help Ruth.

[Ruth]

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