Menu shifts right

erik_c · Post by **erik_c** » Tue Oct 17, 2006 5:00 pm

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? ... ight=jumps but I couldn't fix it with the information in that thread.

Post by **Ruth** » Tue Oct 17, 2006 9:20 pm

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: Select all

<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

erik_c · Post by **erik_c** » Tue Oct 17, 2006 9:49 pm

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.

Post by **Ruth** » Tue Oct 17, 2006 10:41 pm

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: Select all

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

erik_c · Post by **erik_c** » Wed Oct 18, 2006 2:41 pm

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.

Post by **Ruth** » Mon Nov 06, 2006 9:02 am

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