Thanks for your time Ryan, I think I'll try using MooTools 1.2 for everything, jsfiddle looks to be very helpful so I'll try that if I have any problems with the design in MooTools.
Thanks Again Jamie On 1 July, 18:23, Ryan Florence <[email protected]> wrote: > 1) Any chance you can use just MooTools 1.2 ? (no need for prototype and > moo.fx together) Moo.fx is a little old. > > 2) Using tools like jsfiddle.net where you can demonstrate the issue you're > having gets you lots of help, posting your all of your page's code in an > email doesn't usually get you any, unfortunately :( While we are totally > happy to provide help, none of use really have the time to look at ALL of > your code and find a problem. > > 3) You've got prototype, moofx and jquery all in one page? Why not ditch > prototype and moo.fx and just use jquery? Or ... see item 1. > > On Jul 1, 2010, at 10:24 AM, JamieLovesDumbCats wrote: > > > Hi there I'm new to the forum having disovered it whilst trying to fix > > a problem with our website at work, I'm sorry to say that my first > > post is a cry for help. I'm not an experienced web coder but have been > > tasked with designing our company website. I've built it using moo.fx > > and prototype to have a Horizontally moving accordion using a couple > > of web tutorials. It displays fine in Firefox, Chrome and Safari yet > > in Internet Explorer the accordion opens up erratically and doesn't > > behave the same when clicking each tab. I currently don't have the > > site uploaded to the web so hopefully someone can point me in the > > right direction from the code. Hopefully this is everything, the page > > also uses thickbox.js and jquery-1.3.2.js, The $ shortcut is actually p > > $ in all the code below to avoid it clashing with thickbox and jquery > > which also used $ shortcut. Thanks in advance for any help you guys > > can give me, even if it involves redoing the accordion effect with > > mootools rather than moofx. > > > Site HTML > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ > > TR/xhtml11/DTD/xhtml11.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > > <title>Welcome To The Giant Website</title> > > <meta http-equiv="Content-Type" content="text/html; > > charset=iso-8859-1" /> > > <style type="text/css" media="screen"> > > @import "Java/thickbox.css"; > > </style> > > <style type="text/css"> > > body{ > > text-align:center; > > margin: 0; /* it's good practice to zero the margin and padding of > > the body element to account for differing browser defaults */ > > padding: 0; > > background-color:#000; > > background-image:url(Images/Background.png); > > color: #FFF; > > font-size: 14px; > > overflow:hidden; > > font-family: helvetica; > > background-repeat: no-repeat; > > background-position: center top; > > } > > #header { > > height: 263px; > > width: 955px; > > } > > #header h1 { > > margin: 0; /* zeroing the margin of the last element in the #header > > div will avoid margin collapse - an unexplainable space between divs. > > If the div has a border around it, this is not necessary as that also > > avoids the margin collapse */ > > padding: 0px 0; /* using padding instead of margin will allow you to > > keep the element away from the edges of the div */ > > } > > p{ > > margin: 0; > > padding: 5px; > > line-height: 1.5em; > > } > > #wrapper{ > > width: 955px; > > margin: 0 auto; > > } > > .display{ > > float: left; > > width: 45px; > > margin: 0 0px 0 0; > > font-family: helvetica; > > font-size: 18px; > > } > > .HeadingText{ > > font-family: Tahoma, Geneva, sans-serif; > > font-size: 18px; > > text-shadow:#000 0px 0px 5px; > > margin-top: 10; > > margin-right: 0px; > > margin-bottom: 0; > > margin-left: 0; > > padding-top: 0px; > > padding-right: 0px; > > padding-bottom: 0px; > > padding-left: 5px; > > } > > .ParagraphText{ > > font-family: Tahoma, Geneva, sans-serif; > > font-size: 12px; > > text-shadow:#000 0px 0px 5px; > > margin-top: 0; > > margin-right: 0px; > > margin-bottom: 0; > > margin-left: 0; > > padding-top: 0px; > > padding-right: 5px; > > padding-bottom: 0px; > > padding-left: 0px; > > } > > #content { > > width:955px; > > overflow:hidden; > > margin: 0px; > > } > > .stretcher{ > > float: left; > > width: 730px; > > overflow:hidden; > > margin: 0px; > > } > > #footer { > > padding: 0; > > margin: 0px; > > bottom: 0px; > > height: 47px; > > width: inherit; > > position: fixed; > > } > > #footer p { > > margin: 0; /* zeroing the margins of the first element in the footer > > will avoid the possibility of margin collapse - a space between divs > > */ > > padding: 0px 0; /* padding on this element will create space, just as > > the the margin would have, without the margin collapse issue */ > > } > > a:link { > > color: #DA1983; > > } > > a:visited { > > color: #DA1983; > > } > > a:hover { > > color: #DA1983; > > } > > a:active { > > color: #DA1983; > > } > > </style> > > <script type="text/javascript" src="Java/jquery-1.3.2.js"></script> > > <script type="text/javascript" src="Java/thickbox.js"></script> > > <script type="text/javascript" src="Java/prototype.lite.js"></script> > > <script type="text/javascript" src="Java/moo.fx.js"></script> > > <script type="text/javascript" src="Java/moo.fx.pack.js"></script> > > <script type="text/javascript"> > > function init(){ > > var stretchers = document.getElementsByClassName('stretcher'); > > var toggles = document.getElementsByClassName('display'); > > var myAccordion = new fx.Accordion( > > toggles, stretchers, {opacity: true, height: true, width: true, > > duration: 500, transition: fx.sineInOut}); > > //hash functions > > var found = false; > > toggles.each(function(h3, i){ > > var div = Element.find(h3, 'nextSibling'); > > if (window.location.href.indexOf(h3.title) > 0) { > > myAccordion.showThisHideOpen(div); > > found = true; > > } > > }); > > if (!found) myAccordion.showThisHideOpen(stretchers[0]); > > } > > function MM_preloadImages() { //v3.0 > > var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); > > var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; > > i<a.length; i++) > > if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+ > > +].src=a[i];}} > > } > > > function MM_swapImgRestore() { //v3.0 > > var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+ > > +) x.src=x.oSrc; > > } > > > function MM_findObj(n, d) { //v4.01 > > var p,i,x; if(!d) d=document; > > if((p=n.indexOf("?"))>0&&parent.frames.length) { > > d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} > > if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) > > x=d.forms[i][n]; > > for(i=0;!x&&d.layers&&i<d.layers.length;i++) > > x=MM_findObj(n,d.layers[i].document); > > if(!x && d.getElementById) x=d.getElementById(n); return x; > > } > > > function MM_swapImage() { //v3.0 > > var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; > > for(i=0;i<(a.length-2);i+=3) > > if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) > > x.oSrc=x.src; x.src=a[i+2];} > > } > > </script> > > </head> > > <body onload="MM_preloadImages('RecentWork/ > > EpadThumbRoll.png','RecentWork/4MusicThumbRoll.png','RecentWork/ > > BritishConnectionThumbRoll.png','RecentWork/ > > CastrolPenaltyThumbRoll.png','RecentWork/ > > Film4WeekendsThumbRoll.png','RecentWork/ > > HereComeTheGirlsThumbRoll.png','RecentWork/ > > KitchenPharmacyThumbRoll.png','RecentWork/ > > MTVSummerThumbRoll.png','RecentWork/OxfamThumbRoll.png','RecentWork/ > > SonyAXNThumbRoll.png','RecentWork/TotalThumbRoll.png','RecentWork/ > > GeniusOfBritainThumbRoll.png')"> > > <div id="header">FTP SITE GOES HERE</div> > > <div id="wrapper"> > > <div id="content"> > > <table width="955" border="0" cellspacing="0" cellpadding="0"> > > <tr> > > <td></table> > > <h3 class="display" title="one"><img src="Images/Tab1Front.png" > > alt="Home" width="45" height="510" /></h3> > > <div class="stretcher"> > > <table width="730" border="0" cellspacing="0" cellpadding="0" > > summary="Table To Fit TabShadow On Left Hand Side"> > > <tr> > > <td width="25" align="left" valign="top"><img src="Images/ > > Tab1Side.png" width="25" height="510" alt="TabShadow" /></td> > > <td align="left" valign="top"><table width="705" border="0" > > cellspacing="0" cellpadding="0"> > > <tr> > > <td width="705" height="25"><img src="Images/Tab1Top.png" > > alt="" width="705" height="25" /></td> > > </tr> > > <tr align="center"> > > <td width="705" height="485" valign="top"><table > > width="705" border="0" cellspacing="0" cellpadding="0"> > > <tr> > > <td align="center" valign="top"><table width="705" > > border="0" cellpadding="0" cellspacing="0"> > > <tr align="center" valign="middle"> > > <td height="300" valign="top"><table width="406" > > border="0" cellpadding="0" cellspacing="0"> > > <tr valign="middle"> > > <td width="406" height="300" align="left" > > valign="top"><img src="Images/SpaceComp.png" alt="" width="400" > > height="300" border="0" usemap="#Map" /></td> > > </tr> > > </table></td> > > <td width="300" align="left" valign="top" > > class="HeadingText">Welcome To Giant Video Post Production<br /> > > <span class="ParagraphText">Giant is the Video > > arm of The Jungle Group (Jungle, Zoo and Marmalade) allowing you > > to do everything under one roof. <br /> > > At Giant we deliver the same level of > > excellence and expertise with picture as you would expect from Jungle, > > Zoo and Marmalade. Giant prides itself on delivering a highly creative > > and professional service at competitive rates. </span><br /> > > </p></td> > > </tr> > > </table></td> > > </tr> > > <tr> > > <td height="140" valign="bottom"><table width="705" > > border="0" align="center" cellpadding="0" cellspacing="0"> > > <tr align="center" valign="bottom"> > > <td width="10" height="10" align="right"><img > > src="Images/BoxTL.png" alt="" width="10" height="10" border="0" > > align="right" /></td> > > <td width="10" height="10"><img src="Images/ > > BoxTC.png" alt="" width="675" height="10" border="0" align="right" /></ > > td> > > <td width="10" height="10" align="left"><img > > src="Images/BoxTR.png" alt="" > > ... > > read more »
