Skip navigation
ricocheMedia
Currently Being Moderated

I want my spry horizontal accordian in explorer content table to be closed and also wont align left

Mar 25, 2013 10:08 PM

I've tried everything.  my accordian will stay closed when landing on the page in all browsers except explorer and also I can't get the tab text to align left no matter what I do.

 

Here is the page http://www.lohud.com/legacy/advertising/mediakit/tjn_content_guide.htm l 

 

Please help I've been at this for many many hours.

 

Here is my code

<!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"><!-- InstanceBegin template="/Templates/Main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>The Journal News Media Group</title>
<!-- InstanceEndEditable -->
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-image: url(images/backdrop.png);
background-repeat: no-repeat;
background-position:top center;
background-color: #77787B;
}
.pageLable {
font-family: arial;
font-size: 18pt;
color: #00adf0;
line-height: 25pt;
vertical-align: middle;
padding-top: 10px;
}
.pageLableTagline {
font-family: arial;
font-size: 18pt;
color: #A7A9AC;
}
.BlueText {
color: #00adf0 !important;
}
.descriptionFont {
font-family: arial;
font-size: 10pt;
line-height: 14pt;
}
.labelSub {
font-family: arial;
font-size: 14px;
color: #00adf0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.content12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.fontNinePoint {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
}
.white {
color: #FFF !important;
}
</style>
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
<style type="text/css">
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
}
h6 {
font-size: 8px;
color: #000;
}
h4 {
font-size: 12px;
}
.fontsmall {
font-size: 9pt;
}
</style>
<style type="text/css">
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body leftmargin="0">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="126" rowspan="3"><a href="index.html"><img src="images/Logo_Nav_Black.jpg" alt="The Journal News Media Group" width="126" height="132" border="0" longdesc="index.html" /></a></td>
          <td width="780" height="30" align="right" valign="top"><table width="657" border="0" align="right" cellpadding="0" cellspacing="0">
            <tr>
              <td width="61" height="32" align="right" valign="middle"> </td>
              <td width="372" align="right" valign="middle"><a href="http://www.linkedin.com/groups/Journal-News-Media-Group-4828545?trk=my g_ugrp_ovr" target="_new"><img src="images/linkedin.png" alt="linkedin" width="16" height="16" border="0" /></a></td>
              <td width="37" align="center" valign="middle"><a href="http://www.facebook.com/pages/The-Journals-News-Media-Group/1249993976 72489" target="_new"><img src="images/facebook.png" alt="facebook" width="8" height="16" border="0" /></a></td>
              <td width="90" align="center" valign="middle" nowrap="nowrap" class="white" style="font-size:12px"><strong><a href="newsletter.html" class="white">newsletter</a></strong></td>
              <td width="24" align="center" valign="middle" class="white" style="font-size:12px"><img src="images/dot.png" alt="" width="9" height="9" /></td>
              <td width="90" align="center" valign="middle" nowrap="nowrap" class="white" style="font-size:12px"><strong>  <a href="contact.html" class="white">contact us  </a></strong></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td align="right" valign="top"><table width="657" border="0" align="right" cellpadding="0" cellspacing="0">
            <tr>
              <td width="75" bgcolor="#000000"> </td>
              <td width="369" bgcolor="#000000"><ul id="MenuBar1" class="MenuBarHorizontal">
                <li class="MenuBarItemSubmenu"><a href="#">About</a>
                  <ul>
                    <li><a href="our_brand.html">Our Brand</a></li>
                    <li><a href="our_audience.html">Our Audience</a></li>
                    <li><a href="giving_back.html">Giving Back</a></li>
                    <li><a href="careers.html">Careers</a></li>
                    </ul>
                  </li>
                <li><a href="digital.html" >Digital</a>                  </li>
                <li><a href="#">Print</a>
                  <ul>
                    <li><a class="MenuBarItemSubmenu" href="#">Journal News</a>
                      <ul>
                        <li><a href="tjn_content_guide.html">Content Guide</a></li>
                        <li><a href="tjn_print_reach.html">Print Reach</a></li>
                        </ul>
                      </li>
                    <li><a href="special_sections.html">Special Sections</a></li>
                    <li><a href="creative_ad_units.html">Creative Ad Units</a></li>
                    <li><a href="zoning_guide.html">Zoning Guide</a></li>
                    </ul>
                  </li>
                <li><a href="events.html">Events</a>
                  <ul>
                    <li><a href="golf_show.html">Golf Show</a></li>
                    <li><a href="theater_awards.html">Metropolitan High School Theater Awards</a></li>
                    <li><a href="rockland.html">Rockland Scholar Athlete</a></li>
                    <li><a href="ray_rice_day.html">Ray Rice Day</a></li>
                    <li><a href="cookie_swap.html">Cookie Swap</a></li>
                    <li><a href="give_grow.html">Give &amp; Grow</a></li>
                    </ul>
                  </li>
                <li><a href="#"> Specs</a>
                  <ul>
                    <li><a href="print_specs.html">Print Specs</a></li>
                    <li><a href="digital_specs.html">Digital Specs</a></li>
                    <li><a href="deadlines.html">Deadlines</a></li>
                    <li><a href="terms_conditions.html">Terms &amp; Conditions</a></li>
                    </ul>
                  </li>
              </ul></td>
</tr>
            <tr> </tr>
          </table></td>
        </tr>
        <tr>
          <td height="70" align="right" valign="top"> </td>
        </tr>
      </table>
      <table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td height="40"> </td>
        </tr>
    </table></td>
  </tr>
</table>
<!-- InstanceBeginEditable name="MainTable" -->
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="300" valign="top" bgcolor="#FFFFFF"><table width="906" border="0" align="center" cellpadding="10" cellspacing="0">
      <tr>
        <td height="57" align="left" valign="top" class="pageLable">Content Guide  <span class="pageLableTagline">lohud.com</span></td>
      </tr>
    </table> <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">News</div>
        <div class="AccordionPanelContent">
          <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>The latest headlines, by county, updated continuously to keep readers informed of breaking news as it happens. Here is where they go to first for the latest on issues of particular importance to area residents: crime, politics, business, education, health and New York State news.<br />
                <strong><br />
                Advertiser Advantage:</strong> Benefit from prime positioning and high visibility on one of the most frequently<br />
                visited pages on lohud.com.</td>
              <td width="180" align="right"><img src="images/digital/contentguide/lh-news.jpg" alt="News" width="180" height="154" border="0" /></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Tax Watch</div>
        <div class="AccordionPanelContent">
          <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="685" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>Money and taxes. It’s a passion topic that many area residents have a keen interest in following. Our standing Tax Watch feature on LoHud.com keeps them in-the-know with watchdog columns on government accountability, blogs from local tax experts, timely articles and columns.<br />
                <strong><br />
                Advertiser Advantage:</strong> Ideal environment for financial, banks, real estate, and business.</td>
              <td width="179" align="right"><img src="images/digital/contentguide/lh-taxwatch.jpg" alt="Tax Watch" width="179" height="155" border="0" /></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Communities</div>
        <div class="AccordionPanelContent">
          <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content: </strong>Sixteen ultra-local homepages dedicated to the unique villages, towns and cities of Westchester County, with daily updates, photos and neighborhood conversations designed to involve <br />
                and engage readers — and have them returning regularly for updates.<br />
                <strong><br />
                Advertiser Advantage: </strong>Ideal for smaller advertisers looking to reach their best potential customers<br />
                within targeted geographic areas.</td>
              <td width="181" align="right"><img src="images/digital/contentguide/lh-community.jpg" alt="Communities" width="179" height="158" border="0" /></td>
            </tr>
          </table>
        </div>
      </div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Living Here</div>
        <div class="AccordionPanelContent">
          <table width="865" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="686" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Awarded “First Place Winner/Niche Website” by the 2012 New York Associated Press! Offers an insider’s look at Lower Hudson Valley real estate for residents looking to buy, sell up, downsize or plan a renovation.<br />
                <strong><br />
                Advertiser Advantage:</strong> Ideal for real estate, financial, and home-related businesses. Provides a locally driven and highly targeted environment for your message.</td>
              <td width="179" align="right"><img src="images/digital/contentguide/lh-livinghere.jpg" alt="News" width="179" height="155" border="0" /></td>
            </tr>
          </table>
        </div>
    </div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Sports</div>
  <div class="AccordionPanelContent">
    <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Comprehensive and updated frequently to keep fans up to date with the latest action from high school, college, major-league teams. Featuring game results, profiles of local athletes, perspective, commentary and blogs for reader interaction.<br />
          <strong><br />
          Advertiser Advantage:</strong> Action-packed environment for auto aftermarket, sporting goods, financial,<br />
          men’s interests, orthopedic and physical therapy businesses.</td>
        <td width="180" align="right"><img src="images/digital/contentguide/lh-sports.jpg" alt="Sports" width="180" height="158" border="0" /></td>
      </tr>
    </table>
  </div>
</div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Blogs</div>
  <div class="AccordionPanelContent">
    <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="683" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Can we talk? We sure can…and readers love to hear what our writers and editors have<br />
to say. Our lively Blogs site is where they can turn to for conversation and opinion on all kinds of <br />
subjects — community, lifestyle &amp; entertainment, news, opinion and sports, including our extremely popular Yankees blog.<br />
          <strong><br />
          Advertiser Advantage:</strong> Benefit from prime positioning and visibility on highly targeted pages that offer maximum impact and response.</td>
        <td width="181" align="right"><img src="images/digital/contentguide/lh-blogs.jpg" alt="News" width="181" height="157" border="0" /></td>
      </tr>
    </table>
  </div>
</div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Multimedia</div>
  <div class="AccordionPanelContent">
    <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> A picture is worth a thousand words and this photo/video gallery keeps readers involved and engaged with compelling local photos from the week and informative feature videos on trending stories.<br />
          <strong><br />
          Advertiser Advantage:</strong> Ideal for retailers of all kinds, benefit from prime positioning and visibility on<br />
          highly targeted pages.</td>
        <td width="178" align="right"><img src="images/digital/contentguide/lh-multimedia.jpg" alt="Multimedia" width="178" height="157" border="0" /></td>
      </tr>
    </table>
  </div>
</div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Life & Leisure</div>
  <div class="AccordionPanelContent">
    <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> The perfect complement to our daily “Life &amp; Style” print section, it’s where readers go to be inspired and entertained! Featuring complete local restaurant and food coverage, weddings/engagement announcements, home &amp; garden tips, movie &amp; TV reviews, music and more.<br />
          <strong><br />
          Advertiser Advantage:</strong> Ideal weekly environment for restaurants, entertainment and leisure-related<br />
          businesses.</td>
        <td width="180" align="right"><img src="images/digital/contentguide/lh-lifeleisure.jpg" alt="Life and Leisure" width="180" height="158" border="0" /></td>
      </tr>
    </table>
  </div>
</div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Opinion</div>
  <div class="AccordionPanelContent">
    <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Everybody’s got one — and this is where it counts. Our Opinion page on LoHud.com is just <br />
          that: opinions on the issues of the day, from our staff and from our readers, designed to inform, inspire and encourage interaction. Find editorials by our writers and editors, commentary, letters, editorial board surveys and more.<br />
          <strong><br />
          Advertiser Advantage:</strong> Benefit from prime positioning and visibility on highly targeted pages that offer maximum impact and response.</td>
        <td width="178" align="right"><img src="images/digital/contentguide/lh-opinion.jpg" alt="Opinion" width="178" height="156" border="0" /></td>
      </tr>
    </table>
  </div>
</div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab">Obituaries</div>
  <div class="AccordionPanelContent">
    <table width="864" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="684" align="left" valign="top" class="descriptionFont"><strong>Content:</strong> Comprehensive and complete, with death notices, memorials, touching tributes and <br />
          convenient interactive features such as a search feature, free obituary alerts, one-click access to flowers and services, guest book signing and more.<br />
          <strong><br />
          Advertiser Advantages:</strong> Ideal environment for funeral homes, estate planners and florists.</td>
        <td width="178" align="right"><img src="images/digital/contentguide/lh-obits.jpg" alt="Obituaries" width="178" height="154" border="0" /></td>
      </tr>
    </table>
  </div>
</div>
    </div>   
    <p> </p></td>
  </tr>
</table>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ useFixedPanelHeights: false, defaultPanel: -1 });
</script>
<!-- InstanceEndEditable -->
<table width="906" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="19" align="center" valign="middle" bgcolor="#77307d" class="white" style="font-size:12px"> <a href="contact.html"><img src="images/contactAnAdvert.png" alt="Contact an advertising expert" width="336" height="18" border="0" /></a></td>
    </tr>
  <tr>
    <td height="19" align="center" valign="middle" class="white" style="font-size:12px"><p><br />
    1133 Westchester Avenue, Suite N-110, White Plains, NY 10604   <img src="images/dot.png" width="9" height="9" alt="dot" />  P: 914-694-5500</p>
    <p> </p>
    <p><a href="http://www.gannett.com/" target="_new"><img src="images/Gannett.png" alt="Gannett" width="130" height="18" border="0" /></a><br />
      <br />
      Copyright © 2013<a href="http://www.lohud.com/" target="_new" class="white"> www.lohud.com</a>. All rights reserved.<br />
      Users of this site agree to the <a href="http://www.lohud.com/section/terms" target="_new" class="white">Terms of Service</a>, <a href="http://www.lohud.com/section/privacy" target="_new" class="white">Privacy Notice/Your California Privacy Rights</a>, and <a href="http://www.lohud.com/section/privacy#adchoices&gt;&lt;http://www.lohud .com/section/privacy#adchoices" target="_new" class="white">Ad Choices</a> <br />
    </p></td>
    </tr>
</table>
<p> </p>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>  </tr>
</table>
<p> </p>
<p> </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 25, 2013 10:17 PM   in reply to ricocheMedia

    I dont see an accordion in action here?

     

    Where are you calling the accordion within your HTML in a script?

     

    Look here for examples: http://adobe.github.com/Spry/samples/accordion/AccordionSample.html

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 25, 2013 10:17 PM   in reply to Sudarshan Thiagarajan

    On a sidenote, Spry has been deprecated and is no longer officially supported by Adobe: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 10:31 PM   in reply to ricocheMedia

    I tried in tried in ALL versions of IE, remained closed in all instances.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 10:38 PM   in reply to Ben Pleysier

    Sorry, for the second part of your question, add the following to your style sheet

    .AccordionPanelTab {

        text-align: left;

        padding-left: 10px;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:11 PM   in reply to ricocheMedia

    Looks like it's fixed!

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:43 PM   in reply to ricocheMedia

    Appears left aligned for me too.

     

    Thanks,

    Preran

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Mar 25, 2013 11:44 PM   in reply to ricocheMedia

    Ben, is it just me? This is how his site shows up for me on FF:

     

    Screen Shot 2013-03-26 at 12.13.48 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:58 PM   in reply to Sudarshan Thiagarajan

    @ Sudarshan,

     

    It's not you . I think you may have caught the site at a bad moment.

     

    This is how I see it in IE and FF

    _Capture.jpg

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points