Alignment problem using Spry
by Jody Garner
on
Jun 8, 2009 at 7:08:24 pm
I need some assistance. I'm in the process of creating a site utilizing a vertical and horizontal spry menu and an accordion panel. Everything works the way it should and looks the way it should except in IE. In IE the accordion panel was misaligned, which caused the vertical panel to be misaligned. I searched this site for answers and determined I needed to upgrade to Spry 1.5. Now in IE as well as Firefox I lost the functionality of the vertical and horizontal menus as well as the accordion panels. Also the newer 1.5 version did not fix the alignment problem I was having in IE.
I backed out of Spry 1.5. Now I have the original problem of the misalignment in IE.
Can you tell me what may have went wrong and how I can address this problem?
Re: Alignment problem using Spry by Jody Garner on Jun 8, 2009 at 7:35:24 pm
Hi Richard,
Thanks for your prompt help.
It's a government site so I would prefer to not post it to the public.
Is there any other way to get the information to you?
Re: Alignment problem using Spry by Richard Williams on Jun 8, 2009 at 8:29:45 pm
ideally, it would be better to post it if it is an internet site so everyone can see the issues and resolutions for the future.
If you are really adamant that you do not want to keep the link up, post the link here, then edit the post and delete it again, myself and Fernando will recieve the post by email instantly, which will have the details on it, but the post will have the info deleted by you so no one else will see it in the future
Re: Alignment problem using Spry by Jody Garner on Jun 8, 2009 at 10:00:15 pm
It looks good in Firefox, but IE displays the page with the accordion panels shifted to the right, which causes the right column to also shift to the right (and the left panel is poking out a little) again, no problems in Firefox.
Second question. Once this problem is corrected how can I implement Spry 1.5 without losing my spry menu's and accordion ?
Re: Alignment problem using Spry by Jody Garner on Jun 10, 2009 at 3:50:40 pm
Hi Richard,
The solution did not work.
I've attached 2 screen images of the problem. The first one is firefox version 3 and there are no problems.
The second screen shot is IE 7. You will notice how the accordion panel gets aligned to the right which causes the right column to shift from underneath the top navigation menu.
Can you take a look and let me know if you have any suggestions?
Re: Alignment problem using Spry by Richard Williams on Jun 10, 2009 at 4:12:38 pm
I'll take a look later, its going to take me some time to work through it as there is SO much css there.... give me a couple of hours and i'll post back then
Re: Alignment problem using Spry by Richard Williams on Jun 10, 2009 at 4:15:59 pm
Quick Question...
Did you write all of the CSS or did you take it from a template or something somewhere? Do you understand fully what every rules is doing on your site?
Re: Alignment problem using Spry by Richard Williams on Jun 10, 2009 at 5:07:02 pm
ok, the problem is that you are flaoting the right content to the right... (i realise that sounds odd, but this is the problem.
What you really want it the left and right content floated to the left, but unfortunately it is not quite as simple as this...
The problem is the left content in the code. What you need to do is move the left content div up above the right content, then float both left.
I have done it for you here to help out.
This way, floating everything left, means that the divs will squash up next to eachother which is what you want. Floating it right will mean it wil concentrate on being right, so if bowsers interprit inforation differently elswhere on the page, it will always keep the content to the right.
So, copy this code over the top of yours and then set the rightcontent div to float left as well as the left content.
Now all browsers should look the same.
Hope this helps, let us know. (You will probalbly still need to do some work around margins of the two divs to get it in the final position you want it)
<script type="text/javascript" language="JavaScript" src="searchfunc.js"> </script>
<!-- ******************** END of search results output code ********************** -->
<div id="headimage">
<img src="images/main_header1.jpg" alt="Earth Science Data Systems" width="952" height="120" /><h1>Earth Science Data System Working Group</h1>
</div>
<div class="clear">
</div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" title="ESDSWG Home" class="MenuBarItemSubmenu">ESDSWG</a>
<ul>
<li><a href="#" title="Latest News">News</a></li>
<li><a href="#" title="Strategic Evolution of ESE Data Systems">SEEDS Study</a></li>
</ul>
</li>
<li><a href="#" title="Working Group Pages" class="MenuBarItemSubmenu">WORKING GROUPs</a>
<ul>
<li><a href="#" title="Metrics Planning and Reporting">MPAR</a></li>
<li><a href="#" title="Reuse and Reuse Frameworks ">REUSE</a></li>
<li><a href="#" title="Standards and Interfaces ">SPG</a></li>
<li><a href="#" title="Technology Infusion ">Tech Infusion</a></li>
</ul>
</li>
<li><a href="#" title="Reporting tool" class="MenuBarItemSubmenu">REQUIRED REPORTING</a>
<ul>
<li><a href="#" title="E-book Reporting Tool">E-books</a> </li>
<li><a href="#" title="Metrics reporting Tool">Metrics </a></li>
</ul>
</li>
<li><a href="#" title="Project Site" class="MenuBarItemSubmenu">PROJECT'S</a>
<ul>
<li><a href="#" title="Making Earth Science Data Records for Use in Research Environments ">MEaSUREs</a></li>
<li><a href="#" title="Advancing Collaborative Connections for Earth System Science">ACCESS</a></li>
<li><a href="#" title="Research, Education and Applications Solutions Network ">REASoN</a></li>
</ul>
</li>
</ul>
<div class="clear">
</div>
<div id="contentwrapper">
<!-- Content Wrapper, this div surrounds the main content and the Left Nav -->
<div id="leftcontent">
<!-- Left content div (left side, includes the left nav) --><!-- Begin Left Nav -->
<div id="lefttitle">
<h2></h2>
</div>
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="#" title="ESDSWG Home" class="MenuBarItemSubmenu">ESDSWG</a>
<ul>
<li><a href="#" title="Latest News">News</a></li>
<li><a href="#" title="Strategic Evolution of ESE Data Systems">SEEDS Study</a></li>
</ul>
</li>
<li><a href="#" title="Working Group Home " class="MenuBarItemSubmenu">WORKING GROUPs</a>
<ul>
<li><a href="#" title="Metrics Planning and Reporting">MPAR</a></li>
<li><a href="#" title="Reuse and Reuse Frameworks ">REUSE</a></li>
<li><a href="#" title="Standards and Interfaces ">SPG</a></li>
<li><a href="#" title="Technology Infusion ">Technology Infusion</a></li>
</ul>
</li>
<li><a href="#" title="Reporting Tool" class="MenuBarItemSubmenu">REQUIRED REPORTING</a>
<ul>
<li><a href="#" title="E-books Reporting Tool">E-books</a> </li>
<li><a href="#" title="Metric Reporting Tool">Metrics</a></li>
</ul>
</li>
<li><a href="#" title="Project Site" class="MenuBarItemSubmenu">PROJECTs</a>
<ul>
<li><a href="#" title="Making Earth Science Data Records for Use in Research Environments ">MEaSURES</a></li>
<li><a href="#" title="Advancing Collaborative Connections for Earth System Science">ACCESS</a></li>
<li><a href="#" title="Research, Education and Applications Solutions Network">REaSONs</a></li>
</ul>
</li>
</ul>
<!-- END Left Nav -->
<div class="fact">
<h3>What's New </h3>
<ul>
<li>
ESDSWG 2008 Year-End Report
<ul>
<li>Capability Vision
<br />
<br />
</li>
</ul>
</li>
</ul>
</div>
<p> </p>
</div>
<!-- END Left content div -->
<div id="rightcontent" class="blackback">
<a name="skipping" id="skipping"></a>
<!--
**********************************
**** START MAIN CONTENT HERE. ****
**********************************
-->
<h2 class="txonly">Earth Science Data Systems Working Group</h2>
<!-- Begin two-column layout within the main content div (3 columns total visually.) -->
<div class="twocol"><!-- Two column Wrapper Div -->
<div class="urone"><!-- Left column inside the wrapper -->
<h2> </h2>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">> ESDSWG is faced with a new set of challengs</div>
<div class="AccordionPanelContent" style="display: block">Among those challenges are:
<p></p>
<li>Enabling flexibility within data systems to adapt to new data streams or to changes in current processing streams. </li>
<li>Assuring products flowing from processing streams meet the needs of the focus area science teams: scientists working in conjunction with data systems experts, and in consultation with their communities. </li>
<li>Identifying and creating interfaces that facilitate the flow of data to modeling efforts (e.g. carbon assimilation): one size does not fit all. </li>
<li>Enabling seamless hooks into data mining and high performance computing environments. </li>
<li>Evolving from past instrument-focused processing systems to measurement-oriented data systems within an interoperable framework that will help guide the flow of information and services, improve performance and access, be measurement focused, and be distributed geographically and logically. </li>
<p>Both established and future data systems must be able to support this new era. This work uses the lessons learned from existing systems and from the 2003 <a href="/SFormHome.html">Formulation Studies</a> to meet these challenges. </p>
<p>Four Working Groups identified in the REASoN CAN were initiated to address issues of interest identified during Formulation. Go to the <a
href="/WG/index.html">Working Groups Page</a> for more information.</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">> News</div>
<div class="AccordionPanelContent" style="display: none">
<p><strong>Previous ESDSWG Meetings</strong></p>
<li><a href="http://esdswg.eosdis.nasa.gov/7th_agenda.htm">Seventh Earth Data Systems Working Group (ESDSWG) Meeting</a></li>
<li> <a href="http://esdswg.eosdis.nasa.gov/7th_agenda.htm"></a><a href="http://esdswg.eosdis.nasa.gov/6th_agenda.htm">Sixth Earth Science Data Systems Working Group (ESDSWG) Meeting</a></li>
<li> <a href="http://esdswg.eosdis.nasa.gov/6th_agenda.htm"></a><a href="http://esdswg.eosdis.nasa.gov/5th_annual_esdswg_meeting_minutes.htm">Fifth Earth Science Data Systems Working Group (ESDSWG) Meeting</a></li>
<li> <a href="http://esdswg.eosdis.nasa.gov/5th_annual_esdswg_meeting_minutes.htm"></a><a href="http://esdswg.eosdis.nasa.gov/JWG_final_agaenda.htm">Fourth Earth Science Data Systems Working Group (ESDSWG) Meeting</a></li>
<li> <a href="http://esdswg.eosdis.nasa.gov/JWG_final_agaenda.htm"></a><a href="http://esdswg.eosdis.nasa.gov/agendas.htm?currentPage=agenda">Third Earth Science Data Systems Working Group (ESDSWG) Meeting</a></li>
<li> <a href="http://esdswg.eosdis.nasa.gov/agendas.htm?currentPage=agenda"></a><a href="http://esdswg.eosdis.nasa.gov/joint_working_group_agenda.html">Second Earth Science Data Systems Working Group (ESDSWG) Meeting</a></li>
<li> <a href="http://esdswg.eosdis.nasa.gov/joint_working_group_agenda.html"></a><a href="http://esdswg.eosdis.nasa.gov/first_annual_esdswg_meeting.htm">First Earth Science Data Systems Working Group (ESDSWG) Meeting</a></li>
<a href="http://esdswg.eosdis.nasa.gov/first_annual_esdswg_meeting.htm">
<p></p>
<p> </p>
</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">> ESDSWG Year End Report's</div>
<div class="AccordionPanelContent" style="display: none">
<li>Earth Science Data Systems Working Group 2008 Year-End Report</li>
<li>Earth Science Data Systems Working Group 2007 Year-End Report</li>
<p> </p>
</div>
</div>
</div>
</div>
<!-- END left column -->
<div class="urtwo"><!-- Right column inside the wrapper -->
<div class="newfeat2">
<h2>Featured Documents</h2>
<dl>
<dt>Reuse Enablement Systems (RES) Trade Study</dt>
<dd>
<ul class="linklist">
<li><a href="http://www.esdswg.org/softwarereuse/Resources/reuse-enablement-system-res/RESTradeStudy.pdf/view">View this website</a></li>
</ul>
</dd>
</dl>
</div>
<div class="newfeat2">
<h2></h2>
<dl>
<dt>Software Reuse with the Earth Science Community</dt>
<dd>
<ul class="linklist">
<li><a href="http://www.esdswg.org/softwarereuse/Resources/library/Publications/2006_IGARSS-Survey_Paper.pdf/view">Visit this website</a></li>
</ul>
</dd>
</dl>
</div>
<div class="newfeat2">
<h2></h2>
<dl>
<dt>Technology Transfer Guidelines</dt>
<dd>
<ul class="linklist">
<li><a href="http://www.esdswg.org/softwarereuse/Resources/guidelines/techtransfer_v2.pdf/view">Visit this website</a></li>
</ul>
</dd>
</dl>
</div>
</div><!-- END Right column -->
<div class="clear"></div>
</div><!-- END of Two Column Wrapper Div -->
<!--
**** END MAIN CONTENT HERE. ****
-->
</div>
<!-- END Main content div -->
</div>
<!-- END Content Wrapper, this div surrounds the main content and the Left Nav -->
<div id="nasafoot">
<div id="nasafootplus">
<ul>
<li>
<a href="http://www.nasa.gov/about/highlights/HP_Privacy.html" target="_blank">Privacy Policy & Important Notices</a>
</li>
<li>
<a href="mailto:Jody.S.Gibson@nasa.gov" target="_blank">Contact Us</a>
</li>
</ul>
</div>
<div id="nasafoothome">
<a href="http://www.nasa.gov/" target="_blank"></a>
</div>
<div id="nasafootlinks">
<ul>
<li>
NASA Official: <a href="mailto:Stephen.W.Wharton@nasa.gov">Dr. Stephen W. Wharton</a>
</li>
<li>
Curator: <a href="mailto:jody.gibson@nasa.gov">Jody.S.Gibson</a>
</li>
<li>
Page Last Updated: 06/10/2009
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>