collapsible modules Options

[xTINAA]

Alright, well I'm making a xanga site for my church and I'm trying to add the collapsible modules onto it. Well, it's not working. I'm not sure what's wrong but if I have the code so the original modules are not showing, the collapsible modules appear above the blog area. If I make it so the original modules are showing, the collapsible modules are kind of in the same place as the original modules (above them) but it needs to be aligned and I don't want the original modules there in the first place. I would very much like it to look like the preview provided in the script, but it's not working. Here's my code:

<!-- begin code provided by createblog.com --><br /><img src="http://img134.echo.cx/img134/7826/church3le.png"/><br /><br /><div style="<br />overflow: auto;<br />width: 550px;<br />height: 1000px;<br />margin-top: -265px;<br />margin-right: -240px;<br />overflow-x:hidden<br />"><br /><br /><style type='text/css'><br />table.footer, table.navigation, { display:none; }<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:525px;}<br /></style><br /><br /><br /><style type="text/css"><br />/*Korean Full Gospel Church*/<br />/*by M1SSxCHR1SSY*/<br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; <br />}<br /><br /><br />body {<br /> scrollbar-arrow-color: #954E5E;<br /> scrollbar-track-color: #D0C7C0;<br /> scrollbar-shadow-color: #954E5E;<br /> scrollbar-face-color: #D0C7C0;<br /> scrollbar-highlight-color: #954E5E;<br /> scrollbar-darkshadow-color: #D0C7C0;<br /> scrollbar-3dlight-color: #D0C7C0; <br /> }<br /><br />table.blogbody {<br />width:525px;<br />font-family: Tahoma;<br />font-weight: none;<br />font-size: 8pt;<br />color: #000000;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 525px;<br />padding: 3px;<br />text-align: justify;<br />}<br />.caption, .blogheader {<br />width: 525px;<br />padding: 3px;<br />font-family: Tahoma;<br />font-size: 8pt;<br />text-align: right;<br />color: #000000;<br />background-color:;<br />text-transform:;<br />margin-top: 10px;<br />border-bottom: #ffffff 0px solid;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: Tahoma; color: #000000; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#954E5E; text-transform: lowercaps; font-size:8pt;}<br />a:hover<br />{text-decoration: none; color:#954E5E; font-size: 8pt;;}<br />b, strong, {<br />/* edit colors when bold italic underline */<br />font-family: Tahoma;<br />font-size: 8pt;<br />color: #000000;<br />font-weight: bold; <br />text-transform: lowercaps;<br /><br /></style><br /><br /><style type=text/css><br />/* edit to your liking */<br />table.module { border: 0px solid #FFFFFF; width:160px; background-color:; }<br />table.module th { background-color: #;font: bold 11px Tahoma; text-transform: uppercase;color: #000000; border: none; }<br />table.module td {color: #000000; text-align: left; border: none; background-image: none; }<br /></style><br /><br /><!-- add this below all the CSS --><br /><br /><table border=0 width="660"><tr><td valign="top" width="160"><br /><table border="0" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="left" class="module"><b></b></th></tr><tr><td valign="top" class="module"> <br /><style type="text/css"><br />.menutitle{<br />cursor:pointer;<br />margin-bottom: 5px;<br />background-color:#;<br />color:#000000;<br />width:140px;<br />padding:2px;<br />text-align:justify;<br />font-weight:bold;<br />/*/*/border:0px solid #000000;/* */<br />}<br /><br />.submenu{<br />margin-bottom: 0.5em;<br />}<br /></style><br /><br /><script type="text/javascript"><br /><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')<br />}<br /><br />function SwitchMenu(obj){<br /> if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br />  if(el.style.display != "block"){ //DynamicDrive.com change<br />   for (var i=0; i<ar.length; i++){<br />    if (ar[i].className=="submenu") //DynamicDrive.com change<br />    ar[i].style.display = "none";<br />   }<br />   el.style.display = "block";<br />  }else{<br />   el.style.display = "none";<br />  }<br /> }<br />}<br /><br /></script><br /><br /><!-- Keep all menus within masterdiv--><br /><div id="masterdiv"><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub1')">Mission Statement</div><br /> <span class="submenu" id="sub1"><br />This is our church's mission statement:<br />It will be added shortly.<br />  <br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub2')">Members</div><br /> <span class="submenu" id="sub2"><br /> These are the members of your youth group:<br />It will be added shortly.<br /> </span><br /><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub3')">Pictures<span class='searchlite'></span></div><br /> <span class="submenu" id="sub3"><br /> View our picture site:<br />It will be added shortly.<br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub4')">Extras<span class='searchlite'></span></div><br /> <span class="submenu" id="sub4"><br /> It will be added shortly.<br /> </span> <br /></div></td></tr></table><br><br /></td><br /><br /><!-- end code provided by createblog.com -->

Sorry if that was a bit confusing.

[talcumpowder]

Sorry if I made this confusing. Really, all you edit now is the two div layers. Right now, they're set to appear directly over the blog. As the style is exactly the same.

<!-- begin code provided by createblog.com --><br /><img src="http://img134.echo.cx/img134/7826/church3le.png"/><br /><br /><script type="text/javascript"><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')<br />}<br /><br />function SwitchMenu(obj){<br /> if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br />  if(el.style.display != "block"){ //DynamicDrive.com change<br />   for (var i=0; i<ar.length; i++){<br />    if (ar[i].className=="submenu") //DynamicDrive.com change<br />    ar[i].style.display = "none";<br />   }<br />   el.style.display = "block";<br />  }else{<br />   el.style.display = "none";<br />  }<br /> }<br />}<br /><br /></script><br /><br /><!-- Keep all menus within masterdiv--><br /><!-- You're editing this here. Make the div layer oversized... So it doesn't push your blog down. --><br /><div id="masterdiv" style="overflow: none;width: 550px;height: 1000px;margin-top: -265px;margin-right: -240px;overflow-x:hidden><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub1')">Mission Statement</div><br /> <span class="submenu" id="sub1"><br />This is our church's mission statement:<br />It will be added shortly.<br />  <br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub2')">Members</div><br /> <span class="submenu" id="sub2"><br /> These are the members of your youth group:<br />It will be added shortly.<br /> </span><br /><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub3')">Pictures<span class='searchlite'></span></div><br /> <span class="submenu" id="sub3"><br /> View our picture site:<br />It will be added shortly.<br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub4')">Extras<span class='searchlite'></span></div><br /> <span class="submenu" id="sub4"><br /> It will be added shortly.<br /> </span></div><br /><br /><style type="text/css"><br />/*Korean Full Gospel Church*/<br />/*by M1SSxCHR1SSY*/<br />table.footer, table.navigation, { display:none; }<br />#rblEprops, #pnlEnabled table, #pnlEprops table { <br />width: auto !important; }<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:525px;}<br />body {<br /> scrollbar-arrow-color: #954E5E;<br /> scrollbar-track-color: #D0C7C0;<br /> scrollbar-shadow-color: #954E5E;<br /> scrollbar-face-color: #D0C7C0;<br /> scrollbar-highlight-color: #954E5E;<br /> scrollbar-darkshadow-color: #D0C7C0;<br /> scrollbar-3dlight-color: #D0C7C0; }<br />table.blogbody {<br />width:525px;<br />font-family: Tahoma;<br />font-weight: none;<br />font-size: 8pt;<br />color: #000000;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;}<br />div.smalltext{<br />width: 525px;<br />padding: 3px;<br />text-align: justify;}<br />.caption, .blogheader {<br />width: 525px;<br />padding: 3px;<br />font-family: Tahoma;<br />font-size: 8pt;<br />text-align: right;<br />color: #000000;<br />background-color:;<br />text-transform:;<br />margin-top: 10px;<br />border-bottom: #ffffff 0px solid;}<br />P, B, I, TD, TH <br />{font-family: Tahoma; color: #000000; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#954E5E; text-transform: lowercaps; font-size:8pt;}<br />a:hover<br />{text-decoration: none; color:#954E5E; font-size: 8pt;;}<br />b, strong, {<br />/* edit colors when bold italic underline */<br />font-family: Tahoma;<br />font-size: 8pt;<br />color: #000000;<br />font-weight: bold; <br />text-transform: lowercaps;}<br />.menutitle{<br />cursor:pointer;<br />margin-bottom: 5px;<br />background-color:#;<br />color:#000000;<br />width:140px;<br />padding:2px;<br />text-align:justify;<br />font-weight:bold;<br />/*/*/border:0px solid #000000;/* */}<br />.submenu{<br />margin-bottom: 0.5em;}<br />/* edit to your liking */<br />table.module { border: 0px solid #FFFFFF; width:160px; background-color:; }<br />table.module th { background-color: #;font: bold 11px Tahoma; text-transform: uppercase;color: #000000; border: none; }<br />table.module td {color: #000000; text-align: left; border: none; background-image: none; }<br /></style><br /><br /><div style="overflow: auto;width: 550px;height: 1000px;margin-top: -265px;margin-right: -240px;overflow-x:hidden"><br /><!-- end code provided by createblog.com -->

[xTINAA]

Hmm...that code still doesn't work. I'm not sure why.

[Teesa]

*BUMP*

[xTINAA]

Whew. I finally made it work. Now I would say this could be closed but I have THREE more questionS.

QUESTION 1: (Note: must be viewed in IE) If you view the xanga site : http://www.xanga.com/kfgcyg You can see that the modules are now working. The only thing that's messed up is that the blog is really stretched out. No matter how many times I change the width in the css it doesn't work. It still stays all stretched out like that across the whole page. I'm sorry if that is confusing, but hopefully someone will understand and be able to help. Here is my code; perhaps I did something wrong in it:

<!-- begin code provided by createblog.com --><br /><br /><style type=text/css><br />/* edit to your liking */<br />table.module { border: 1px solid #FFFFFF; width:160px; background-color:FFFFFF; }<br />table.module th { background-color: #FFFFFF;font: bold 11px arial; text-transform: uppercase;color: #000000; border: none; }<br />table.module td {color: #000000; text-align: justify; border: none; background-image: none; }<br /></style><br /><br /><!-- add this below all the CSS --><br /><br /><table border=0 width="820"><tr><td valign="top" width="160"><br /><table border="1" cellspacing="0" cellpadding="4" width="100%" class="module"><tr><th valign="top" align="right" class="module"><b></b></th></tr><tr><td valign="top" class="module"> <br /><style type="text/css"><br />.menutitle{<br />cursor:pointer;<br />margin-bottom: 5px;<br />background-color:#FFFFFF;<br />color:#666;<br />width:820px;<br />padding:2px;<br />text-align:center;<br />font-weight:bold;<br />/*/*/border:0px solid #000000;/* */<br />}<br /><br />.submenu{<br />margin-bottom: 0.5em;<br />}<br /></style><br /><br /><script type="text/javascript"><br /><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')<br />}<br /><br />function SwitchMenu(obj){<br /> if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br />  if(el.style.display != "block"){ //DynamicDrive.com change<br />   for (var i=0; i<ar.length; i++){<br />    if (ar[i].className=="submenu") //DynamicDrive.com change<br />    ar[i].style.display = "none";<br />   }<br />   el.style.display = "block";<br />  }else{<br />   el.style.display = "none";<br />  }<br /> }<br />}<br /><br /></script><br /><br /><!-- Keep all menus within masterdiv--><br /><div id="masterdiv"><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub1')">Mission Statement</div><br /> <span class="submenu" id="sub1"><br /> Our mission statement will be added shortly.<br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub2')">Members</div><br /> <span class="submenu" id="sub2"><br /> You will be able to view all church members shortly.<br /> </span><br /><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub3')">Pictures</div><br /> <span class="submenu" id="sub3"><br /> Please view our picture site: http://www.photobucket.com username: KFGCyg password: pictures.<br /> </span><br /><br /> <div class="menutitle" onclick="SwitchMenu('sub4')">Extra</div><br /> <span class="submenu" id="sub4"><br /> Extra...<br /> </span><br /><br /> <br /></div></td></tr></table><br><br /></td><br /><br /><MAP NAME='imgmap'><br /><AREA SHAPE='rect' COORDS='45,45,449,158' HREF='http://www.xanga.com/signin.asp' ALT='Log in'><br /><AREA SHAPE='rect' COORDS='32,166,490,240' HREF='http://www.xanga.com/private/home.aspx' ALT='Your xanga'><br /><AREA SHAPE='rect' COORDS='60,250,392,378' HREF='http://www.xanga.com/Private/SubscribeTo.aspx?user=KFGCyg' ALT='Subscribe'><br /><AREA SHAPE='rect' COORDS='456,95,792,159' HREF='http://www.xanga.com/Private/subs.aspx?' ALT='Your subscriptions'><br /><AREA SHAPE='rect' COORDS='498,165,809,271' HREF='http://www.xanga.com/claf/Default.asp' ALT='Look and feel'><br /><AREA SHAPE='rect' COORDS='496,276,801,419' HREF='http://www.xanga.com/guestbook.aspx?user=KFGCyg' ALT='Guestbook'><br /><AREA SHAPE='rect' COORDS='399,250,485,430' HREF='http://www.xanga.com/default.aspx?mode=logout' ALT='Log out'><br /></MAP><br /><br /><IMG SRC='http://img312.imageshack.us/img312/5793/woohoo7ov.png' border=0 width=838 height=472 USEMAP='#imgmap'> <br /><br /><div style="<br />overflow: auto;<br />width: 700px;<br />height: 2000px;<br />margin-top: -4000px;<br />margin-right: -5px;<br />overflow-x:hidden<br />"><br /><br /><style type='text/css'><br />.mainleft, table.footer, table.navigation, { display:none; }<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:600px;}<br /><br /><br />/*Korean Full Gospel Church*/<br />/*by M1SSxCHR1SSY*/<br /><br /><br />body {<br /> background-color: #FFFFFF;<br /> scrollbar-arrow-color: #000000;<br /> scrollbar-track-color: #FFFFFF;<br /> scrollbar-shadow-color: #000000;<br /> scrollbar-face-color: #FFFFFF;<br /> scrollbar-highlight-color: #000000;<br /> scrollbar-darkshadow-color: #FFFFFF;<br /> scrollbar-3dlight-color: #FFFFFF; <br /> }<br /><br />table.blogbody {<br />width:600px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 8pt;<br />color: #000000;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />div.smalltext{<br />width: 600px;<br />padding: 3px;<br />text-align: justify;<br />}<br />.caption, .blogheader {<br />width: 600px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 8pt;<br />text-align: right;<br />color: #000000;<br />background-color:;<br />text-transform:;<br />margin-top: 10px;<br />border-bottom: #ffffff 0px solid;<br />}<br /><br />P, B, I, TD, TH <br />{font-family: Arial; color: #000000; font-size: 8pt; }<br />A:link, A:visited, A:active<br />{color:#000000; text-transform: lowercaps; font-size:8pt;}<br />a:hover<br />{text-decoration: none; color:#FFFFFF; font-size: 8pt;;}<br />b, strong, {<br />/* edit colors when bold italic underline */<br />font-family: ARial;<br />font-size: 8pt;<br />color: #000000;<br />font-weight: bold; <br />text-transform: lowercaps;<br /><br /></style><br /><br /><!-- end code provided by createblog.com -->

QUESTION TWO: Why is it that the code only works in IE and doesn't work in Mozilla Firefox at all? In Mozilla, when you try to view the xanga, only the image is viewable and you can't scroll down and see the collapsible modules OR the blog. I'm not sure why this is. Please refer to the code I posted above...

Finally, QUESTION THREE: This question is not nearly as important as the others but is there any way to get rid of the original/regular leftside modules when viewing in Mozilla Firefox? They don't show up in IE but they do in Mozilla.

Sorry if that was all rather confusing. I hope someone can help because well, I desperately need it. Plus this is all really frustrating me. Thanks again.