Menu shifts right

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

Menu shifts right

Poster: erik_c
Dated: Tuesday October 17 2006 - 17:00:00 BST

I have a sample page set up that looks all right on load, but when I mouse over a milonic menu, the top+bottom DIVs shift over to the right. Then mousing over another link at the bottom will shift the elements back. This happens in Internet Explorer, but not Firefox. The right-shift only happens when mousing over a milonic item.
This is using the latest menu 5.760.

Sample page at http://66.225.203.12/prods/shiftError.html

This seems similar to the post at http://milonic.com/forum/viewtopic.php?t=7918&highlight=jumps but I couldn't fix it with the information in that thread.

Poster: Ruth
Dated: Tuesday October 17 2006 - 21:20:22 BST

Hi,

Ok, it took some figuring but....

The problem has to do with the wide tables, when those tables are made smaller or removed everything worked fine. After some experimenting I got it to work by adding a div around those tables.

Code:

<div id=tablediv style="position:relative">
<TABLE style="BACKGROUND-COLOR: #fbfbfb" width=780 align=center border=1 bordercolor="red">
  <TBODY>
  <TR>
    <TD>
      <TABLE class=mainArea 
      style="BORDER-RIGHT: #ff00ff 2px solid; BORDER-TOP: #ff00ff 2px solid; BORDER-LEFT: #ff00ff 2px solid; BORDER-BOTTOM: #ff00ff 2px solid; BACKGROUND-COLOR: #f7f7f7" 
      width=768 align=center>
        <TBODY>
        <TR>
          <TD>
            <DIV class=pageTitle>Summary Table</DIV>
            <TABLE width=1400 border=0>
              <TBODY>
              <TR>
                <TD>Product Order (1 address)</TD></TR></TBODY></TABLE>
            <TABLE width=760 border=1 bordercolor="#CC00CC">
              <TBODY>
              <TR>
                <TD>1 total results<BR></TD></TR></TBODY></TABLE>
            <TABLE class=decorated cellSpacing=0 cellPadding=0 width=2000 
            border=0>
              <TBODY>
              <TR class=dark>
                <TD>This is a long table, because it will eventually contain 
                  lots of columns.</TD></TR></TBODY></TABLE><BR>&nbsp; 
      </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></div>

It doesn't do this at 800x600 resolution by the way.

Ruth

Poster: erik_c
Dated: Tuesday October 17 2006 - 21:49:48 BST

Thanks for the hard work on this. I copied your code into my test file and still get the same error. I'm not sure what the difference is with your version, but I still get the same error.
Unfortunately the middle tables have to be really wide. They are eventually going to contain a lot of columns and eventually stretch the horizontal scrollbar.

http://66.225.203.12/prods/shiftError2.html -- Is this file different than what you have?

I've tried absolute and relative positioning my top elements, but that hasn't helped. Things only shift when I mouse over the milonic menu. It's as though IE is changing its definition on width to match the whole page width, instead of the viewport.

Poster: Ruth
Dated: Tuesday October 17 2006 - 22:41:49 BST

Hi,

Well, this seems to be an IE 6 problem, I do not see that in IE5.5 or FF 1.07 or 1.5x So maybe it's something to do with css and IE6, I vaguely remember some issue about when divs go one below the other and something happens with the bottom and top 'meeting' borders or some such thing. I'll try to find it, it's on the forum.

I did find a solution, but it's weird.

Make your #top the following.

Code:

top {
width: 100%;
position: relative;
z-index: 2;
background: url("/images/layout/meta/body_bg.gif") no-repeat top center;
border:1px solid transparent;
}

The only reason I even found this was because I had put borders around all the divs so I could see the actual layout so when I compared the pages of course there were no borders around the divs and just out of desperation I put one around them and lo and behold the problem disappeared.

Ruth

Poster: erik_c
Dated: Wednesday October 18 2006 - 14:41:19 BST

Holy cow Ruth, you are amazing. I'm stumped as to why adding a border around the DIV stops it from shifting, but you're right.
If you come across the old links that you mention (abouyt DIVs moving below each other), I'd be interested in reading them.
Thanks for your help.

Poster: Ruth
Dated: Monday November 6 2006 - 8:02:07 GMT

Hi,

I finally found the info, it's at the w3c and it's margins not borders and I find it convoluted, then again, I find most of what the w3c does as convoluted...and I won't go on my hobby horse about that!

You want to go down to 8.3.1 on this page.

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

and here is the original post I found that led me to it...as you see it was a page design discussion.

http://www.forum4designers.com/message298348.html

Ruth

Industrial Strength JavaScript and DHTML Menus

Menu shifts right