» Forums
» DynarchMenu forum
» Support
» Context Menu Positioning + Max Number of setupContent calls
» Misaligned SubMenus in IE6 when inside table
Misaligned SubMenus in IE6 when inside table
2005/06/04 19:58
Viewed 7876 times
Replies: 1/2
by Ed

Hi again,

It is the weekend, so you probably have not seen the post above. ;-)


So... I just purchase DynarchMenu.  It was very easy to setup, even for complex stuff.  Most of my troubles had to do with generating the hierarchical syntax properly from the database rows.  it gets tricky if you have unlimited levels, etc. but that is a function of my data not your tool.

Anyway, besides the 2 questions above I run into an actual problem.  It has to do with with the <!DOCTYPE> declaration in IE 6.  DynarchMenu does not correctly align the popup of a menu inside a table when the declaration is present.

Here is a test file.  Place it under the hmenu-2.4.2/ directory in the standard distribution and it should run.  It will misalign the popup menu in IE6.  It will work as intended if you remove the 1st line.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'DTD/xhtml1-transitional.dtd'>
<htm  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">@import url("./src/skin-xp.css");</style>
<script type="text/javascript">_dynarch_menu_url = "./src/";</script>
<script type="text/javascript" src="./src/hmenu.js"></script>
</head>

<body onload='DynarchMenu.setup("trail-menu",{electric:1000});'>

<table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
        <td>
            <ul id="trail-menu">
                <li>_Bugger</li>
                <li>_Misalign-me
                    <ul>
                        <li><a href="/test-201">test-201</a></li>
                        <li><a href="/test-202">test-202</a></li>
                        <li><a href="/test-203">test-203</a></li>
                    </ul>
                </li>
            </ul>
        </td>
    </tr>
</table>

</body>
</html>

OMG!!!

Is there hope?  Am I doing something wrong? -- besides using IE that is.

Thanks!
Re: Misaligned SubMenus in IE6 when inside table
2005/06/05 04:42
Viewed 10212 times
Replies: 1/1
by Ed

Found a workaround...

body { margin: 0; }

Then

<body>
    <div id='contents' style='margin:10px 10px 10px 10px;'>
       * your whole web page goes here *
    </div>
</body>

Not sure what will happen in other browsers, but it is okay in IE6 and Firefox 1.0.2

Let me know if there is a better fix.
last
Re[2]: Misaligned SubMenus in IE6 when inside table
2005/06/05 17:22
Viewed 11604 times
Replies: 0/0
by Mihai Bazon

Not necessarily better, but yes, there's a different workaround. Just embed the menu <ul> in a <div style="position: relative">.

I recently discovered that if you put the menu in a <div style="position: absolute">, IE will also misalign it—but it appears that if it's inside a table it does the trick :-)  So your code becomes:

<table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
        <td>
          <div style="position: relative">
            <ul id="trail-menu">
                <li>_Bugger</li>
                <li>_Misalign-me
                    <ul>
                        <li><a href="/test-201">test-201</a></li>
                        <li><a href="/test-202">test-202</a></li>
                        <li><a href="/test-203">test-203</a></li>
                    </ul>
                </li>
            </ul>
          </div>
        </td>
    </tr>
</table>

and you don't need to set a "margin: 0" for the <body>, even when the DOCTYPE is present.

This should go in the FAQ as many asked it...
last
Google