Frames by CSS vs. the Menu vs. different browsers

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
Totentanz
Beginner
Beginner
Posts: 1
Joined: Sun Mar 19, 2006 10:44 pm

Frames by CSS vs. the Menu vs. different browsers

Post by Totentanz »

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: Select all

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;
}
The menu data file (taken from the sample, changed only positioning and orientation)

Code: Select all

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://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://milonic.com/cbuy.php;");
aI("image=frame/img/contact.gif;overimage=frame/img/contact_on.gif;url=http://milonic.com/contact.php;");
aI("image=frame/img/news.gif;overimage=frame/img/news_on.gif;url=http://milonic.com/newsletter.php;");
aI("image=frame/img/faq.gif;overimage=frame/img/faq_on.gif;url=http://milonic.com/menufaq.php;");
aI("image=frame/img/forum.gif;overimage=frame/img/forum_on.gif;url=http://milonic.com/forum/;");
aI("image=frame/img/lic.gif;overimage=frame/img/lic_on.gif;url=http://milonic.com/license.php;");
aI("image=frame/img/privacy.gif;overimage=frame/img/privacy_on.gif;url=http://milonic.com/privacy.php;");
aI("image=frame/img/licenses.gif;overimage=frame/img/licenses_on.gif;url=http://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://milonic.com/login.php;");
aI("image=frame/img/invoices.gif;overimage=frame/img/invoices_on.gif;url=http://milonic.com/myinvoices;");
aI("image=frame/img/support.gif;overimage=frame/img/support_on.gif;url=http://milonic.com/reqsupport.php;");
aI("image=frame/img/details.gif;overimage=frame/img/details_on.gif;url=http://milonic.com/mydetails.php;");
}

drawMenus();
Found nothing about it in the FAQ, can anyone help or give a hint?

Thank you!
Top
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:
Contact Ruth

Post by Ruth »

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://milonic.com/tablemenu.php

http://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
Top
Post Reply

Return to “Help & Support for DHTML Menu Version 5+”