Pulldown menu not aligned when using table to center content.

This post has 3 replies

Not Ranked
Posts: 3
plemmen
Reply
plemmen Posted: Thu May 5, 2005 @ 6:50 AM
Hello,

I'm developing a site for a client who wants to have the content centered horizontally and vertically on the page. I'm using a simple table construct with some stylesheet elements to achieve this.

Unfortunately, when I add your menu component, the pulldown menus are not aligned with the main menu. Specifically, they are positioned roughly the same distance below the menu component, as the menu component is positioned below the top of the page. If I resize the window, the distance between the component and the pulldown menus changes equally.

Is there any way to modify this behaviour?

Regards,

Peter.
Not Ranked
Posts: 3
plemmen
Reply
plemmen Posted: Thu May 5, 2005 @ 7:49 AM
Additionally, it seems to work perfectly in Firefox (1.0.3). The behaviour I described above is present in IE (6.0).
Top 10 Contributor
Posts: 6,009
stephen
Reply
stephen Posted: Thu May 5, 2005 @ 9:56 AM
Is the menu positioned on the page by your table, or with the usage of css positioning? Relative positioning in particular is known to have some issues with our group positioning code.
Stephen Hatcher, Developer Support Manager
Not Ranked
Posts: 3
plemmen
Reply
plemmen Posted: Fri May 6, 2005 @ 2:09 AM
A combination actually.
The content part of the page is a construction of div's with are positioned through css. Mostly with absolute positioning.
The whole content part, however, is wrapped in a table to center it on the screen.

Something along the lines of: 

<html>
...
<body>
  <table class="centerScreen">
    <tr><td>
      <div id="placeHolder">
        ...
        <div id="menuHolder">
          <ca:Menu id="menuMain" ... >
        </div>
        ...
      </div>
    </td></tr>
  </table>
</body>
</html>


html and body have 100% height and width set through css, as does the centerScreen table, tr and td. The td also has vertical and horizontal centering set.
The placeHolder div has a fixed height and width and other styling information.
The menuHolder div has an absolute position, fixed height and width and other styling information.

If we use javascript to position the placeHolder div then the menu component works fine in both IE and Firefox. (But then there's an anoying jump in the page as it is first rendered and then repositioned.) The problem with the pulldown menu's started when I added the table for positioning.
Page 1 of 1 (4 items)