Creative COW SIGN IN :: SPONSORS :: ABOUT US :: CONTACT US
ADOBE DREAMWEAVER: HomeDreamweaver ForumDreamweaver TutorialsFAQAdobe FlashWeb Design

Alignment problem using Spry

Cow Forums : Adobe Dreamweaver

<< PREVIOUS THREAD   •   VIEW ALL THREADS   •   PRINT   •   NEXT THREAD >>
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?

I can email you a link to the site.

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Richard Williams on Jun 8, 2009 at 7:47:19 pm

Hi Jody,

Just post a link up here and i will take a look

Richard Williams

Respond to this post   •   Return to posts index

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?

Ms Garner

Respond to this post   •   Return to posts index


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

Richard Williams

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Jody Garner on Jun 8, 2009 at 9:24:29 pm

ok
http://esdswg.eosdis.nasa.gov/test/index_two.html

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Richard Williams on Jun 8, 2009 at 9:47:22 pm

ok, got it, can you explain a little more deetail of the issues you are having? Explain the alignment issue please?

Richard Williams

Respond to this post   •   Return to posts index


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 ?

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Richard Williams on Jun 9, 2009 at 1:13:48 pm

WOW... What a style sheet :-O

Ok, well not sure what firefox version you are using, but for me this displays the same in every browser on the PC... aligned to the right.

The problem is in your common style sheet, under the setting of #rightcontentdiv.twocol div.urone

You have padding settings of 0 0 0 15px, and margin settings of 0 0 0 20px. making all of these zero would be better.

I would then add the margins in the spry accordion css, in the .accordionPannelContent margin 0 10px 0 10px or something like that.

Give that a go and tell me what you think

Richard Williams

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Jody Garner on Jun 9, 2009 at 10:48:26 pm

Thank you Richard,
I will do this in the am. By the way, do you have any improvement recommendations for my style sheet?

Respond to this post   •   Return to posts index


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?





Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Jody Garner on Jun 10, 2009 at 3:52:07 pm

I made a mistake. The first screen shot is IE 7.
The 2nd is Firefox ver 3.

Respond to this post   •   Return to posts index

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

Richard Williams

Respond to this post   •   Return to posts index


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?



Richard Williams

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Jody Garner on Jun 10, 2009 at 4:24:37 pm

Some of the css files are templates.

Respond to this post   •   Return to posts index

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)



</FORM><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Earth Science Data System Working Group</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/everyone.css" />
<style type="text/css" media="screen">@import url("css/style.css");
</style>
<!--[if gte IE 5]>
<style type="text/css" media="screen">@import url("css/style_iefixes.css");
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="doc-class" content="Living Document" />
<meta charset="UTF-8">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body id="oneon" class="lnoneon">
<div id="bkg_surround">
<div id="bkg_layer">
</div>
</div>
<div id="paper">
<div id="nasahead">
<div id="nasahome"> <a href="http://www.nasa.gov" target="_blank"><img src="images/nasa_header_logo1.gif" alt="NASA Logo, National Aeronautics and Space Administration" width="300" height="65" /></a> </div>
<div id="centername">
<h1>National Aeronautics and Space Administration</h1>
<h2>Goddard Space Flight Center</h2>
</div>
<div class="hidden"> <a href="#skipping" title="Skip Navigation" accesskey="2">Skip Navigation (press 2)</a> </div>
<div id="nasaheadlinks">
<ul>
<li> <a href="http://www.nasa.gov/" target="_blank">Visit NASA.gov</a> </li>
<li> <a href="mailto:Jody.S.Gibson@nasa.gov">Contact Us</a> </li>
</ul>
</div>
<div id="searchbox">
<h3>Search:</h3>
<form action="search.html" method="get" name="formSear" id="formSear" onsubmit="return qs();">
<script>function qs(){var f=document.formSear;var qe=f.searWords.value;if(window.encodeURIComponent)qe=encodeURIComponent(qe);if(f.area)if(f.area.value==2){document.location="http://www.google.com/search?q="+qe;return false;}var pt=document.location.href;var iq=pt.indexOf('?');if(iq!=-1)pt=pt.substring(0, iq);if(f.action)if(f.action!="")pt=f.action;var ue=pt+"?searWords="+qe;if(f.search)ue+="&search="+f.search.value;if(f.match)ue+="&match="+f.match.value;document.location=ue;return false;}</script>
<p align="center">
<input name="searWords" id="searWords" />
&nbsp;
<input name="Send" type="submit" value="Search ESDSWG" />
</p>
<p align="left">&nbsp;</p>
</form>
</div>
</div>
<!-- ******************** BEGIN of search results output code ******************** -->
<script type="text/javascript" language="JavaScript" src="webdata.js"> </script>

<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>&nbsp;</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>&nbsp;</h2>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">&gt; 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">&gt; 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>&nbsp;</p>
</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">&gt; 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>&nbsp;</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 &amp; 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>



Richard Williams

Respond to this post   •   Return to posts index


Re: Alignment problem using Spry
by Jody Garner on Jun 10, 2009 at 8:03:46 pm

This helped greatly (I did have to play around with the margins), thank you very much !

Respond to this post   •   Return to posts index

Re: Alignment problem using Spry
by Richard Williams on Jun 10, 2009 at 8:12:34 pm

you are welcome, I aim to please! Hopefully it was clear what i did too

Richard Williams

Respond to this post   •   Return to posts index

<< PREVIOUS THREAD   •   VIEW ALL THREADS   •   PRINT   •   NEXT THREAD >>


FORUMSTUTORIALSMAGAZINETRAININGVIDEOS - REELSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

© CreativeCOW.net All rights are reserved.

[Top]