CSS Layout, IE and Firefox Problems

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

CSS Layout, IE and Firefox Problems

Poster: lloyd_borrett
Dated: Wednesday November 2 2005 - 5:41:31 GMT

G'day,

I'm having problems getting Milonic DHTML Menu Version 5.733 to position correctly on a web page where most of the layout is CSS based. I can get it to work with MS IE v6, but not Mozilla Firefox v1.0.7.

Now I know I could just force the menu into an absolute position on the page, but then if the CSS file changes I'll have to redo it. And I know I could put the menu in a table and get it to work that way, but I'd prefer to stick with using CSS for the layout if possible. So just how do I get it to work on CSS based pages?

You can see an example page at http://www.winenergy.com.au/colophon.html

The problem I'm having is positioning the menu. I have it working fine in IE v6. I can choose to left, center or right align the menu just by changing the text-align setting in the appropriate style sheet.

Code:

#navitabs{
clear:both;
margin-bottom:0px;
margin-top:5px;
text-align:right
}

But in Firefox the menu stays left aligned no matter what I try.

Also, Firefox doesn't display the menu shadow, doesn't space away from the items above and below (padding, margin), and seems to ignore the submenu offset values.

What I'm doing wrong is probably obvious, but I just can't see it.

Best Regards, Lloyd.

Poster: Ruth
Dated: Wednesday November 2 2005 - 8:52:34 GMT

Hi,

Because IE doesn't some strange things, it seems in this instance it is for whatever reason reading the text-align:right; as aligning the menu right, but that is not correct. In most browsers that will only align text right. The only solution I could find was to put a table in the div and align the table to the right.

Code:

<DIV id=navitabs><table cellpadding=0 cellspacing=0 border=0 align="right">
<tr>
    <td><SCRIPT language=JavaScript type=text/javascript>
with(milonic=new menuname("Main Menu")){
style=horizStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
padding=5;
aI("text=Home;url=home.html;status=Home");
aI("text=Why WINenergy;url=why-winenergy.html;showmenu=Why WINenergy");
aI("text=Contact Us;url=contact-us.html;showmenu=Contact Us");
}
drawMenus();
</SCRIPT></td>
</tr>
</table>
</DIV>

Ruth

Industrial Strength JavaScript and DHTML Menus

CSS Layout, IE and Firefox Problems