Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:10
Frames by CSS vs. the Menu vs. different browsers
Poster: Totentanz
Dated: Sunday March 19 2006 - 22:01:57 GMT
Hello!
First, here is a bare bone test website:
http://www.metalmafia.de/totentanz/temp/test.php
Some explaination:
I divided the website with CSS and DIV into three parts (see the borders):
1st .. FRTOP, fixed position frame for displaying an image, located at the top of the window
2nd .. FRLEFT, fixed position frame for displaying the Milonic Menu, located at left
3rd .. FRMIDD, scrollable frame for content
The Milonic Menu with submenus opens in FRLEFT and FRMIDD. Tested it with Opera 6.xx, Opera 8.xx
Firefox 1.5, IE 6.x and every browser displayed it different AND wrong (except the Firefox).
Here my CSS file for the frames:
Code:
body
{
position:absolute;
}
html, body
{
top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
background-color:#000000;
}
#frtop1
{
position:fixed;
top:0; left:0; right:0;
margin:0;
height:130px;
z-index:3;
}
#frtop2
{
background-color:#000000;
position:absolute;
top:0; left:0; right:0; bottom:0;
height:100%;
z-index:3;
margin:0;
padding:0;
}
#frleft
{
background-color:#000000;
position:fixed;
top:130px;
left:0;
width:145px;
height:100%;
padding: 0;
z-index:4;
color: #bbbbbb;
font-family:Arial; font-size:10px;
}
div#frleft a:visited, div#frleft a:link,div#frleft a:active
{
color:#bbbbbb;
text-decoration:none;
}
#frleft a:hover {color:#ff0000;}
#frleft img {border:none;}
#frmidd
{
margin:0;
font-size:10pt;
padding-top:130px;
padding-left:150px;
padding-right:10px;
padding-bottom:10px;
z-index:2;
color:silver;
font-family: Arial
}
#frmidd a:visited, #frmidd a:link
{
color:#FFFFFF;
text-decoration:none;
}
#frmidd a:hover
{
color:#FF0000;
text-decoration:none;
}
#frmidd a:active
{
color:#EEEEEE;
text-decoration:none;
}
/* Nun für den MSIE */
* html, * html body
{
overflow:hidden;
bottom:0;
height:100%;
}
* html #frtop1
{
position:absolute;
width:100%;
padding-right:16px;
}
* html #frleft
{
position:absolute;
}
* html #frtop2
{
height:100%;
position:static;
}
* html #frmidd
{
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
{
position:absolute;
}
html, body
{
top:0; left:0; right:0;
min-height:100%;
margin:0;
padding:0;
width:100%;
background-color:#000000;
}
#frtop1
{
position:fixed;
top:0; left:0; right:0;
margin:0;
height:130px;
z-index:3;
}
#frtop2
{
background-color:#000000;
position:absolute;
top:0; left:0; right:0; bottom:0;
height:100%;
z-index:3;
margin:0;
padding:0;
}
#frleft
{
background-color:#000000;
position:fixed;
top:130px;
left:0;
width:145px;
height:100%;
padding: 0;
z-index:4;
color: #bbbbbb;
font-family:Arial; font-size:10px;
}
div#frleft a:visited, div#frleft a:link,div#frleft a:active
{
color:#bbbbbb;
text-decoration:none;
}
#frleft a:hover {color:#ff0000;}
#frleft img {border:none;}
#frmidd
{
margin:0;
font-size:10pt;
padding-top:130px;
padding-left:150px;
padding-right:10px;
padding-bottom:10px;
z-index:2;
color:silver;
font-family: Arial
}
#frmidd a:visited, #frmidd a:link
{
color:#FFFFFF;
text-decoration:none;
}
#frmidd a:hover
{
color:#FF0000;
text-decoration:none;
}
#frmidd a:active
{
color:#EEEEEE;
text-decoration:none;
}
/* Nun für den MSIE */
* html, * html body
{
overflow:hidden;
bottom:0;
height:100%;
}
* html #frtop1
{
position:absolute;
width:100%;
padding-right:16px;
}
* html #frleft
{
position:absolute;
}
* html #frtop2
{
height:100%;
position:static;
}
* html #frmidd
{
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}
The menu data file (taken from the sample, changed only positioning and orientation)
Code:
fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(AllImagesStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
fontstyle="normal";
fontweight="normal";
padding=3;
}
with(menuStyle=new mm_style()){
position="relative";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="frame/img/arrow.gif";
subimagepadding=2;
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=0;
position="relative";
orientation="vertical";
style=AllImagesStyle;
top=0;
aI("image=frame/img/all_home.gif;overimage=frame/img/all_home_on.gif;status=Back To Home Page;url=http://www.milonic.com/;");
aI("image=frame/img/samples.gif;overimage=frame/img/samples_on.gif;showmenu=aa Samples;");
aI("image=frame/img/milonic.gif;overimage=frame/img/milonic_on.gif;showmenu=Milonic;");
aI("image=frame/img/links.gif;overimage=frame/img/links_on.gif;showmenu=Links;");
aI("image=frame/img/mymilonic.gif;overimage=frame/img/mymilonic_on.gif;showmenu=My milonic;");
}
with(milonic=new menuname("aa Samples")){
overflow="scroll";
style=menuStyle;
aI("image=frame/img/allimages.gif;overimage=frame/img/allimages_on.gif;url=/menusample.php?sampleid=18;");
aI("image=frame/img/xpstyle.gif;overimage=frame/img/xpstyle_on.gif;url=/menusample.php?sampleid=12;");
aI("image=frame/img/static.gif;overimage=frame/img/static_on.gif;url=/menusample.php?sampleid=16;");
aI("image=frame/img/horizontal.gif;overimage=frame/img/horizontal_on.gif;url=/menusample.php?sampleid=1;");
}
with(milonic=new menuname("Milonic")){
style=menuStyle;
aI("image=frame/img/purch.gif;overimage=frame/img/purch_on.gif;url=http://www.milonic.com/cbuy.php;");
aI("image=frame/img/contact.gif;overimage=frame/img/contact_on.gif;url=http://www.milonic.com/contactus.php;");
aI("image=frame/img/news.gif;overimage=frame/img/news_on.gif;url=http://www.milonic.com/newsletter.php;");
aI("image=frame/img/faq.gif;overimage=frame/img/faq_on.gif;url=http://www.milonic.com/menufaq.php;");
aI("image=frame/img/forum.gif;overimage=frame/img/forum_on.gif;url=http://www.milonic.com/forum/;");
aI("image=frame/img/lic.gif;overimage=frame/img/lic_on.gif;url=http://www.milonic.com/license.php;");
aI("image=frame/img/privacy.gif;overimage=frame/img/privacy_on.gif;url=http://www.milonic.com/privacy.php;");
aI("image=frame/img/licenses.gif;overimage=frame/img/licenses_on.gif;url=http://www.milonic.com/mylicenses.php;");
}
with(milonic=new menuname("Partners")){
style=menuStyle;
aI("status=(aq) Web Server Hosting & Services;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
aI("text=WebSmith;url=http://www.softidiom.com/;");
}
with(milonic=new menuname("Links")){
style=menuStyle;
aI("image=frame/img/apache.gif;overimage=frame/img/apache_on.gif;status=Apache Web Server, the basis of Milonic's Web Site;url=http://www.apache.org/;");
aI("image=frame/img/mysql.gif;overimage=frame/img/mysql_on.gif;status=MySQL, Milonic's Prefered Choice of Database Server;url=http://ww.mysql.com/;");
aI("image=frame/img/php.gif;overimage=frame/img/php_on.gif;status=PHP - Web Server Scripting as used by Milonic;url=http://www.php.net/;");
}
with(milonic=new menuname("My Milonic")){
style=menuStyle;
aI("image=frame/img/login.gif;overimage=frame/img/login_on.gif;url=http://www.milonic.com/login.php;");
aI("image=frame/img/invoices.gif;overimage=frame/img/invoices_on.gif;url=http://www.milonic.com/myinvoices;");
aI("image=frame/img/support.gif;overimage=frame/img/support_on.gif;url=http://www.milonic.com/reqsupport.php;");
aI("image=frame/img/details.gif;overimage=frame/img/details_on.gif;url=http://www.milonic.com/mydetails.php;");
}
drawMenus();
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(AllImagesStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
fontstyle="normal";
fontweight="normal";
padding=3;
}
with(menuStyle=new mm_style()){
position="relative";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="frame/img/arrow.gif";
subimagepadding=2;
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=0;
position="relative";
orientation="vertical";
style=AllImagesStyle;
top=0;
aI("image=frame/img/all_home.gif;overimage=frame/img/all_home_on.gif;status=Back To Home Page;url=http://www.milonic.com/;");
aI("image=frame/img/samples.gif;overimage=frame/img/samples_on.gif;showmenu=aa Samples;");
aI("image=frame/img/milonic.gif;overimage=frame/img/milonic_on.gif;showmenu=Milonic;");
aI("image=frame/img/links.gif;overimage=frame/img/links_on.gif;showmenu=Links;");
aI("image=frame/img/mymilonic.gif;overimage=frame/img/mymilonic_on.gif;showmenu=My milonic;");
}
with(milonic=new menuname("aa Samples")){
overflow="scroll";
style=menuStyle;
aI("image=frame/img/allimages.gif;overimage=frame/img/allimages_on.gif;url=/menusample.php?sampleid=18;");
aI("image=frame/img/xpstyle.gif;overimage=frame/img/xpstyle_on.gif;url=/menusample.php?sampleid=12;");
aI("image=frame/img/static.gif;overimage=frame/img/static_on.gif;url=/menusample.php?sampleid=16;");
aI("image=frame/img/horizontal.gif;overimage=frame/img/horizontal_on.gif;url=/menusample.php?sampleid=1;");
}
with(milonic=new menuname("Milonic")){
style=menuStyle;
aI("image=frame/img/purch.gif;overimage=frame/img/purch_on.gif;url=http://www.milonic.com/cbuy.php;");
aI("image=frame/img/contact.gif;overimage=frame/img/contact_on.gif;url=http://www.milonic.com/contactus.php;");
aI("image=frame/img/news.gif;overimage=frame/img/news_on.gif;url=http://www.milonic.com/newsletter.php;");
aI("image=frame/img/faq.gif;overimage=frame/img/faq_on.gif;url=http://www.milonic.com/menufaq.php;");
aI("image=frame/img/forum.gif;overimage=frame/img/forum_on.gif;url=http://www.milonic.com/forum/;");
aI("image=frame/img/lic.gif;overimage=frame/img/lic_on.gif;url=http://www.milonic.com/license.php;");
aI("image=frame/img/privacy.gif;overimage=frame/img/privacy_on.gif;url=http://www.milonic.com/privacy.php;");
aI("image=frame/img/licenses.gif;overimage=frame/img/licenses_on.gif;url=http://www.milonic.com/mylicenses.php;");
}
with(milonic=new menuname("Partners")){
style=menuStyle;
aI("status=(aq) Web Server Hosting & Services;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
aI("text=WebSmith;url=http://www.softidiom.com/;");
}
with(milonic=new menuname("Links")){
style=menuStyle;
aI("image=frame/img/apache.gif;overimage=frame/img/apache_on.gif;status=Apache Web Server, the basis of Milonic's Web Site;url=http://www.apache.org/;");
aI("image=frame/img/mysql.gif;overimage=frame/img/mysql_on.gif;status=MySQL, Milonic's Prefered Choice of Database Server;url=http://ww.mysql.com/;");
aI("image=frame/img/php.gif;overimage=frame/img/php_on.gif;status=PHP - Web Server Scripting as used by Milonic;url=http://www.php.net/;");
}
with(milonic=new menuname("My Milonic")){
style=menuStyle;
aI("image=frame/img/login.gif;overimage=frame/img/login_on.gif;url=http://www.milonic.com/login.php;");
aI("image=frame/img/invoices.gif;overimage=frame/img/invoices_on.gif;url=http://www.milonic.com/myinvoices;");
aI("image=frame/img/support.gif;overimage=frame/img/support_on.gif;url=http://www.milonic.com/reqsupport.php;");
aI("image=frame/img/details.gif;overimage=frame/img/details_on.gif;url=http://www.milonic.com/mydetails.php;");
}
drawMenus();
Found nothing about it in the FAQ, can anyone help or give a hint?
Thank you!
Poster: Ruth
Dated: Sunday March 19 2006 - 22:44:10 GMT
Hi,
That is not actually 'frames'. You're using divs to simulate that. The menu doens't like being in divs, mostly because all the browsers seem to treat things like position differently. However, if you want it set up like that I know others have used the menu in a div and seem happy with it. But you have to use the directions for relative positioned menus [table based] The reason you are having the great differences is that relative positioned menus require a specific method for putting them on the page. This should fix the problem with the submenu position, though you will probably have problems in the div on the Mac IE5 [which is a dead browser, but some still have it]
Table / relative positioned menu
http://www.milonic.com/tablemenu.php
http://www.milonic.com/menusample9.php
http://support.milonic.com/beginners/ta ... /index.htm
If you really want frames there is a frames version 5 of the menu. It comes in the download and the following is a link to a demo for it.
http://support.milonic.com/demos/frames/index.htm
Ruth