Absolute positioning problems IE and Firefox.

Poster: jigr69
Dated: Friday May 19 2006 - 15:41:09 BST

Hi there.

I've inherited the corporate website and am in the middle of a redesign, part of which is to include a drop down menu. The website is built using absolute positioning styles in CSS, using <DIV> tags.

When I build the menu, in Firefox, its perfect no problems. In IE it positions the sub menus approximately 110 pixels below where it should. So the first sub menu is 110 pixels below the main menu, a sub menu from the sub menu appears 110 pixels below the original sub menu, and 220 pixels below the main menu (or where it should be).

Thus to work around this problem for IE you set the parameter top="offset=-110";. Now obviusly in Firefox this positions the sub menu's 110 pixels higher than they should be. The number 110 comes from the absolute position of the <DIV> tag controlling the positioning of the menu bar (horizontal).

The only way I can get Firefox and IE to display the sub menus in the same position is to use the position="relative"; in the sub menus, however you cannot adjust the position of this using offsets at all.

I've removed the main menu element on the drawMenus(); function from the javascript and into the actual <DIV> tag but to no avail. Judging by the number of bugs within the IE implementation of CSS I would say its IE having the problems, but how to fix it anyone?

Poster: jigr69
Dated: Friday May 19 2006 - 16:04:40 BST

Searching around etc, I found that if I include the code

top="offset=2";
if(ie)
top="offset=-110";

in each sub menu declaration, it gets around the problem...

Poster: vikenk
Dated: Friday May 19 2006 - 16:21:16 BST

Hi,

1) Do you have a DOCTYPE declaration on the top of your page? If not, the menu may act strangely if placed in a DIV. Milonic strongly suggests NOT putting the menu in a DIV because DIVs are supported equally amongst all browsers. Without the DOCTYPE, IE will be in quirks mode.

2) Check your CSS for margins and padding. Since the menu itsself is based on tables and DIVs, any global styling of these elements may affect the styling of the menu. So you should avoid generic statements like: div { margin: whatever; padding: whatever } and instead use classes: div.whatever { margin: whatever; padding: whatever }

3) Since you're placing the menu in a DIV, I assume that you want it to part of the "flow" of your website. When placed in a DIV you need to follow the same rules as placing the menu in a table. You need to set position=relative and remove the "top" and "left" settings, if I recall correctly.

Some code or a URL would be big help.

Hope this helps.

Poster: vikenk
Dated: Friday May 19 2006 - 16:31:15 BST



That should read:

Milonic strongly suggests NOT putting the menu in a DIV because DIVs are NOT supported equally amongst all browsers. Without the DOCTYPE, IE will be in quirks mode.


Sorry for the mistake.