Menu Horizontal Offset Issue IE Broke

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

Menu Horizontal Offset Issue IE Broke - FF Works

Poster: nick.clasen __at__ gmail.com
Dated: Thursday January 11 2007 - 17:09:28 GMT

Okay I've done some searching and I have found some threads that discuss offset issues, but not exactly in the same fashion as the problem I am having.

For starters my site is http://www.wakeaction.com/mm5/merchant.mvc.

My site has a div tag that centers the nested tables and and other items in it. The div is set to a certain width(955px) and ONLY IN IE does the submenu jump to the right tremendously.

It is tremendously frustrating and I'm not sure how to fix it. I would greatly appreciate any advice and I can pass on code or files if necessary.

Thanks,
-Nick

Poster: Ruth
Dated: Thursday January 11 2007 - 18:29:32 GMT

Hi,

The first thing you have to do is update, the current version is 5.766 so you're 10 levels back.

I don't know if that will fix it, but I'll work on it in the meantime.

Ruth

Poster: nick.clasen __at__ gmail.com
Dated: Thursday January 11 2007 - 19:12:24 GMT

Do I have to rewrite the menu to update or what does it require?

Poster: Ruth
Dated: Thursday January 11 2007 - 19:18:22 GMT

Hi,

You would go to the main Milonic site, log in under whatever name you registered when you first bought the menu and click the download button. Because you're logged in it should download your licensed version. IF the name of your data file is still menu_data.js do NOT unzip all the files to the folder where you now have your menu files, you'll lose all your data. I suggest to start you unzip the menu to a new folder, then make sure you have kept a back up of the milonic_src.js, mmenudom.js, mmenuns4.js files you now have on your site, then upload the 3 new ones. Those are the only files you upload, your data file will be the same it doesn't get changed unless you do something to it.

Ruth

Poster: nick.clasen __at__ gmail.com
Dated: Thursday January 11 2007 - 19:46:28 GMT

I've updated the three files, and while it did not resolve my initial issue it has now modified the layout of the table that retains the menu. Not sure if that is due to an offset that might need to be updated or not.

Well at least up i'm to the current version. Now if only I could figure out what was causing my IE problem.

Thank you,
-Nick

Poster: Andy
Dated: Friday January 12 2007 - 13:17:40 GMT

Hi,

This is actually caused by a bug in the browser. Internet Explorer is hiding the content based on the fact that the containing DIV is relative but the containing TABLE inside the DIV is not.

The workaround is to set the position of the main TABLE within the relative DIV to also be relative. Note that the default position for all HTML elements is not relative like most people think.

Here is how your HTML should look:

Code:

<div style="z-index: 1; position: relative;">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="955" style="position:relative;">
<tr>
<td width="330" height="51" align="left" valign="top" background="/graphics/headerbkgd.gif"><img src="/graphics/headerlogo.png"></td>
<td width="406" valign="top" background="/graphics/headerbkgd.gif"><!--DWLayoutEmptyCell--> </td>
<td align="right" valign="top" width="219"><img src="/graphics/custservice.gif"/></td>
</tr>
<tr>
<td align="left" valign="bottom" colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="955px" align="center">
<tr>
<td align="left">
<script type="text/javascript" src="/menu2/prim_menu.js"></script>
</td>
</tr>
</table>

Note the addition of style="position:relative;" added to the first opening table tag. This should help fix this annoying bug.

Hope this helps,
Andy

Poster: nick.clasen __at__ gmail.com
Dated: Saturday January 13 2007 - 21:59:40 GMT

Andy,

Greatly appreciate the suggestion. I've updated the table as suggested and still my menu fly's out quite a ways to the right of the source. Not sure why this works so well in firefox and Safari, but IE refuses to cooperate.

Any other suggestions?

Poster: Ruth
Dated: Sunday January 14 2007 - 2:51:09 GMT

Hi,

Can you set it up like the following? I don't do a lot of css and divs, but this seemed to work and it seemed to keep the look you had

Code:

<DIV style="LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP:  0px;z-index:-1;"><IMG 
style="WIDTH: 100%" src="holidaybackground.jpg"> </DIV>
<DIV style="Z-INDEX: 1; ">
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=955 border=1 bordercolor='aqua'>
  <TBODY>
  <TR>
    <TD vAlign=top align=left width=330 
    background=headerbkgd.gif height=51><IMG 
      src="headerlogo.png"></TD>
    <TD vAlign=top width=406 background=headerbkgd.gif><!--DWLayoutEmptyCell--> </TD>
    <TD vAlign=top align=right width=219><IMG 
      src="custservice.gif"></TD></TR>
  <TR>
    <TD vAlign=bottom align=left colSpan=3>
      </TD></TR></TBODY></TABLE>
     </div>
     <TABLE cellSpacing=0 cellPadding=0 width=955 align=center border=0>
        <TBODY>
      <tr><td><img src="spacer.gif" width="1" height="10" border="0"></td></tr>
        <TR>
          <TD align=left>
            <SCRIPT src="prim_menu.js" 
            type=text/javascript></SCRIPT>
          </TD></TR><tr><td><img src="spacer.gif" width="1" height="10" border="0"></td></tr>
        </TBODY></TABLE>
       
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD> </TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=955 border=0><!--DWLayoutTable-->
  <TBODY>
  <TR>
    <TD vAlign=top width=721 height=641>
      <DIV class=MainContent 
      style="BACKGROUND: #ffffff; WIDTH: 719px; HEIGHT: 641px" align=center>
      <TABLE cellSpacing=0 cellPadding=0 width=719 border=0><!--DWLayoutTable-->

I didn't post the whole page that's just the top part down to where you begin the Div class=MainContent. The rest of the page is just as you have it. Try that and see what happens. Note that I put a transparent spacer in the bottom of the menu table to space it out so it looked the other set up.

Ruth

Industrial Strength JavaScript and DHTML Menus

Menu Horizontal Offset Issue IE Broke - FF Works