Frames - Ho Hum!

markwickens · Post by **markwickens** » Wed Nov 15, 2006 9:16 am

:cry:

Arrghhh!

I am building a small and simple site that uses two vertical frames. One frame - the left hand side - is a static navigaiton bar. Content is loaded into the right hand frame. I have folowed all the instructions for modifying the menus to work with frames and everything is fine and dandy on the navigation front.

However, I have a horizontal and vertical mis-alignment with my sub-menus. Unfortunately, the mis-alignment is not consistent between my two test browsers (Safari 2.04 and Firefox 1.5.0.8 both running under OS X 10.4.8). Unfortunately (again), my site is currently sitting behind a firewall on my development machine and won't go into the big bad world for another three weeks or so. Consequently, I can't just point anybody at its URL (quite happy to post the files though)!

Does anybody have any idea were I should start looking for the cause - all I am trying to get is consistency between the two browsers since once that is acheived I can tweak the sub-menu positions with the offests. Safari appears to be the problem, as it displays the sub menus slightly too high, and slightly too far to the left (about 5 pixels in each case) in relation to the edge of the frame. Any thoughts or suggestions would be greatly apprecaited. I could probably live with the horizontal displacement, but the vertical displacement looks UGLY! BTW, even though the Safari version is too far to the left, the seb-menu borders are complete.

Any help would be appreciated!

Regards

Mark

Post by **Ruth** » Wed Nov 15, 2006 10:31 am

Hi,

What you can do is post the html, the menu_data files and any css here so we can make up a frameset and test what's up. Actually, all that would be needed on the data is your main and one sub since that should give us the alignment issue to test. That's about the only way we can do anything. We could guess a hundred things and none of them be right: margin, padding, divs in css tables and so on.

Ruth

markwickens · Post by **markwickens** » Wed Nov 15, 2006 11:17 am

Ruth

Thanks for the response.

Here's the framset html doc:

Code: Select all

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>Brick And Mortar - You Build On Our Experience</title>
</head>
<frameset framespacing="0" border="0" frameborder="0" cols="137,*">
      <frame name="side" scrolling="no" noresize src="Sidebar.html">
	  <frame name="main" noresize src="Intro.html">
  <noframes>

  </noframes>
</frameset>
</html>

Followed by the Sidebar.html doc:

Code: Select all

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>Brick And Mortar Navigation Bar</title>

<script type="text/javascript" src="/menu_jvs/milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/menu_jvs/mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=/menu_jvs/mmenudom.js><\/scr"+"ipt>");
</script>
<script language=JavaScript src="/menu_jvs/side_menu_data.js" type=text/javascript></script>
<script type="text/javascript" src="/menu_jvs/mm_navframe.js"></script>
</head>

<body>
<table width="125" border="0" cellpadding="0" cellspacing="0">
	<tr><td>
		<img alt="Brick And Mortar Logo" src="/Images/Acorn4.jpg"><br />
	</td></tr>
	<tr style="text-align: center"><td>
	
	</td></tr>
</table>
</body>
</html>

Followed by Intro.html:

Code: Select all

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>Brick And Mortar: Self Build Training Courses and Seminars</title>

<script type="text/javascript" src="/menu_jvs/milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=/menu_jvs/mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=/menu_jvs/mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="/menu_jvs/menu_data_body.js"></script>
</head>

<body>
<br>
<table width="675" border="0" cellpadding="0" cellspacing="0">
	<tr style="text-align: center"><td>
		<div style="font-family:Papyrus, Arial; font-size:22pt; color:#008000">Welcome to Brick And Mortar<br /><br />		
	</td></tr>
	<tr style="text-align: left"><td>
		<div style="font-family:Papyrus, Arial; font-size:10pt; color:#008000">
		<b>A</b />XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br /><br />
		<b>A</b />XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br /><br />
		<b>A</b />XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX		
	</td></tr>
</table>
</body>
</html>

Followed by the navbar script file (side_menu_data.js):

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=0;
_subOffsetTop=0;
_subOffsetLeft=0;


with(menuStyle=new mm_style()){
itemwidth=130;
bordercolor="#000000";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="65%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#008000";
offbgcolor="#ffffff";
offcolor="#008000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
aI("text=Home;url=http://milonic.com/;target=main;");
aI("text=Home;url=Intro.html;target=main;");
aI("text=Seminars;showmenu=Seminars;target=main;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Our Experience;url=Our-Experience.html;target=main;");
aI("text=FAQ;url=FAQ.html;target=main;");
aI("text=Bookings;showmenu=Bookings;target=main;onfunction=openSubmenu();offfunction=closeSubmenu();");
aI("text=Attend;url=Attend.html;target=main;");
}
drawMenus();

and finally the body script file (menu_data_body.js):

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=0;
_subOffsetTop=0;
_subOffsetLeft=0;


with(menuStyle=new mm_style()){
bordercolor="#000000";
itemwidth=120;
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="65%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#008000";
offbgcolor="#ffffff";
offcolor="#008000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}


with(milonic=new menuname("Seminars")){
style=menuStyle;
aI("text=Introduction;url=Seminar-Intro.html;")
aI("text=Hosted Seminars;url=Hosted-Seminars.html;")
aI("text=Web Seminars;url=Web-Seminars.html;")
}


with(milonic=new menuname("Bookings")){
style=menuStyle;
aI("text=Web Seminar;url=http://www.a-q.co.uk/;");
aI("text=Hosted Seminar;url=Booking-Form-1.html;");
}
drawMenus();

Let me know what you think.

Regards

Mark

markwickens · Post by **markwickens** » Wed Nov 15, 2006 1:16 pm

Ruth

Thanks for the offer of help - but I've now tracked down the problem. It turned out to be an issue with the way I had coded the frames:

Code: Select all

marginwidth="0" marginheight="0"

for eacch frame fixes the problem!

TVM anyway

Regards

Mark

Post by **Ruth** » Wed Nov 15, 2006 4:51 pm

You're very welcome, though I didn't do anything

Ruth