Spry Accordion and Firefox (dotted border)

How to get rid of this border?
It shows up after clicking in the accordion (wheater title or
content) and outlines the whole accordion.
This problem is only in Firefox and makes the whole accordion
unpleasent to look at. I would like to know if there's a workaround
for this problem. I already tried some css editing, once even
tested removing all borders on all according elements -
nothing.

That's cause of tabindex="0" if you don't want them then
change this:
<div id="Accordion1" class="Accordion" tabindex="0">
to this:
<div id="Accordion1" class="Accordion">

Similar Messages

SPRY accordion and tabs not displaying in IE6

Hi everyone:
Even after clearing up some validation errors in my HTML, I
am experiencing issues with a SPRY accordion and another page with
a Tabbed SPRY widget not appearing in IE6. The pages all work fine
in IE7, Firefox and Safari. I would greatly appreciate anyone
taking a look (link below) and letting me know if you see any
errors or know of a bug I have not found the fix for. My CSS
validates 100% so I don't think I have made any style sheet errors.
Thanks very much.
www.ducksroofing.com
K.

Hi all:
After some more tinkering, I have discovered the real issue
is that my containing element is not containing the entire page and
therefore cutting off my SPRY elements on the pages which have
them. This is causing the SPRY widgets to fall apart and, of
course, for the page to only scroll partially down.
Does anyone have a suggestion as to why the SPRY tabbed
element and accordion element on my pages is not nesting within
document flow and remaining with the containing div? I appreciate
your help.
Once again, url is: www.ducksroofing.com
K.

Spry accordion and #wrapper issue

Hi
I am in the process of trying to put together a portfolio site as part of a CIW course. If you look at the current site www.jmacphot.com you will see on the equipment page I have tried to add a spry accordion and then a spry tabbed menu inside the accordion. However you will see that when I insert a large amount of information into the content area it pushes the tab over the footer and does keep the footer at the very bottom of the page... I am stumped as I have not set any specific height on my CSS to keep moving.
Can someone please advise where I might be going wrong here. Sorry if this question has been asked repeatedly but I am very new to web design.
Your help with this is greatly appreciated!
Regards
John

Thanks ben, I initially thought if I left the height of my wrapper blank and also the height of the spry content blank they would expand as more information was entered? Is there possibly and issue with CSS hierarchy?
Thanks again for your help!!
John

Spry Accordion and jQuery UI Accordion for Widget Browser

I have Dreamweaver CS5 and used the spry accordion for a left menu. I then used the widget browser and added jQuery UI accordion. But there appears to be a conflict in that the spry accordion is not displaying the white font on hover, instead using the gray font from the jQuery UI accordion.
This may be a duplicate post, I asked this question on another section of this site, if so, I do apologize. Any help is greatly appreciated.
The page sample is
http://www.sbcvote.us/registrar/2006_form460.htm
Thanks to all,

In SpryAccordion.css you are telling the Spry Accordion to do exactly that.
Have a look at lines 97 and 100 where the colour is set to #555555
Gramps

Spry Panels and FireFox issue

I can't get my spry panels to position correctly in Firefox but are fine in the other browsers. Can someone please advise??
Thanks!
Janie
http://0000uhy.previewcoxhosting.com/Pages/ourservices.html

Hello,
In the sprymenubarvertical.css file, try changing position:
static; to
position: relative;
in the ul.MenuBarVertical li style.
Also, you should get rid of the link to test.css as it's an
html page in a
css file.
Take care,
Tim
"Striker" <[email protected]> wrote in message
news:fqkk1e$sak$[email protected]..
> Sorry Spry menus, and they show up in the top right in
FF
> .
> "Striker" <[email protected]> wrote in message
> news:fqkcfj$ki6$[email protected]..
>> www.scottmertens.com
>>
>> Any of the submenus on this site work fine in IE7,
but in Firefox the
>> submenu is positioned in to top left corner
partially off the screen and
>> not readable or clickable. Any ideas what is wrong?
>

Spry Accordion and Flash Gallery

I am trying to insert a Flash photo gallery (created in Adobe Bridge) into one of the accordion panels of a Spry Accordion widget. When I use the widget 'out of the box', the gallery displays, but the set content height cuts off a third of it, including the navigation: http://twwwg.com/Pages/bogott/index3.html. When I set the constructor to allow variable panel heights, one problem goes away but the gallery does not display. http://twwwg.com/Pages/bogott/index2.html. The only difference is the addition of the option in the constructor call. Does anyone have an idea what is going wrong? Thanks. don Carlos.

Well, I solved this one myself. One of the posts on the sidebar resembled my issue sufficiently that I tried it. I pulled all the Flash code from the page and used the <object data> call. Worked like a charm. http://twwwg.com/Pages/bogott/index4.html

Spry Accordion and SWF

Hello,
I've made a spry accordion in DW4. I have 4 swf inserted into it with preload.
On Safari, when I click on each tab, everything works great... the SWFs display fine... But when I click once again on the second tab, for example... I have a white rectangle... I have to "play" with the tabs to display my swf...
Do you have any idea ?
Thanks for your help !

Yes... my site is "online" (index of/)... It's not quite finished... I have several things to do !
http://figueline.free.fr

DW CS DevToolbax Spry Validate and Firefox

Hi there,
i am using dreamweaver cs. for a form validation. The by
dreamweaver generated code looks like this:
var sprytextfield3 = new
Spry.Widget.ValidationTextField("sprytextfield3", "email",
{validateOn:["blur", "change"], minChars:5, maxChars:320});
In IE7.x the onchange validation of the textfiels is working
well.
In Firefox the nothing happens. There i am getting the first
error message (too short). But this messages will change first
after "blur". Normaly (like IE) it has to switch to "invalid
format" and then too nothing (because of the correct format) .
Somebody knows a solution? Or is this a bug within the
Spry.Widget.ValidationTextField ?
Thank you very much for your help
Sebastian

You'll likely find more help with regards to Spry related
questions at the
forum related to Spry
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/
"eFscl" <[email protected]> wrote in message
news:f3mjc5$b8r$[email protected]..
> Hi there,
>
> i am using dreamweaver cs. for a form validation. The by
dreamweaver
> generated
> code looks like this:
>
> var sprytextfield3 = new
Spry.Widget.ValidationTextField("sprytextfield3",
> "email", {validateOn:["blur", "change"], minChars:5,
maxChars:320});
>
> In IE7.x the onchange validation of the textfiels is
working well.
>
> In Firefox the nothing happens. There i am getting the
first error message
> (too short). But this messages will change first after
"blur". Normaly
> (like
> IE) it has to switch to "invalid format" and then too
nothing (because of
> the
> correct format) .
>
> Somebody knows a solution? Or is this a bug within the
> Spry.Widget.ValidationTextField ?
>
> Thank you very much for your help
> Sebastian
>

Accordion and firefox

When clicking on a link from firefox within the content
panel, the menu seems to add scroll bars, then the user has to
click again to get the linl to work... Any fixes on this issue?

First idea is that your link is too close to the bottom. You
have CSS that causes the link to grow just enough to require the
scroll bar to turn on. This takes away focus or causes that flicker
in the second panel.
Try removing the style that causes the font change and see if
that does it, or give it room to grow.
Let us know.
Don

Spry accordion with php mysql as data

Hello
I`m trying to create a spry accordion where the Labels are pulled from a mysql database table and the Content of that label is pulled from data in the same database. I tried adding first the spry accordion and then created 1 recordset for the labels and a second recordset for the content , then I added a repeat region for the labels DIV and inside this div I added a repeat region for the content.
Unfortunatly when viewed in the browsers the accordion doesn`t work.
Can anyone look at the code and tell me where is the mistake.
Thanks
<?php require_once('Connections/log.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
return $theValue;
mysql_select_db($database_log, $log);
$query_log_year = "SELECT DISTINCT Year(`23849`.acoff) AS yy FROM `23849` ORDER BY Year(`23849`.acoff)";
$log_year = mysql_query($query_log_year, $log) or die(mysql_error());
$row_log_year = mysql_fetch_assoc($log_year);
$totalRows_log_year = mysql_num_rows($log_year);mysql_select_db($database_log, $log);
$query_log_year = "SELECT DISTINCT Year(`23849`.acoff) AS yy FROM `23849` ORDER BY Year(`23849`.acoff)";
$log_year = mysql_query($query_log_year, $log) or die(mysql_error());
$row_log_year = mysql_fetch_assoc($log_year);
$totalRows_log_year = mysql_num_rows($log_year);
$mhour_log_mon = "0";
if (isset($row_log_year['yy'])) {
$mhour_log_mon = $row_log_year['yy'];
mysql_select_db($database_log, $log);
$query_log_mon = sprintf("SELECT DISTINCT DATE_FORMAT(`23849`.acoff, '%%M') AS mon , DATE_FORMAT(`23849`.acoff, '%%m') AS m , sum(`23849`.ablock) as toth FROM `23849` WHERE YEAR(`23849`.acoff) = %s GROUP BY m ORDER BY m ", GetSQLValueString($mhour_log_mon, "int"));
$log_mon = mysql_query($query_log_mon, $log) or die(mysql_error());
$row_log_mon = mysql_fetch_assoc($log_mon);
$totalRows_log_mon = mysql_num_rows($log_mon);
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing ajax php mysql</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <?php do { ?>
      <div class="AccordionPanelTab"><?php echo $row_log_year['yy']; ?></div>
      <?php } while ($row_log_year = mysql_fetch_assoc($log_year)); ?>
<div class="AccordionPanelContent">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
    <?php do { ?>
      <tr>
        <td><?php echo $row_log_mon['mon']; ?></td>
        <td><?php echo $row_log_mon['toth']; ?></td>
      </tr>
      <?php } while ($row_log_mon = mysql_fetch_assoc($log_mon)); ?>
</table>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
<?php
mysql_free_result($log_year);
mysql_free_result($log_mon);
?>

You only have 1 "AccordianPanel" which contains a list of "AccordianPanelTab" elements, then a list of "AccordianPanelContent" elements.
You need to have a list of "AccordianPanel" elements, each containing a pair or "AccordianPanelTab" and "AccordianPanelContent" elements.
HTH,
Randy

Spry Accordion No Highlight Upon Selection

Im working with the spry accordion and when ever i click on a tab the entire outline of the accordion gets highlighted in blue (ie,chrome) or gets a marquee kind of selection around entire outside ( firefox ) is there a way to turn this off so it just works like a normal element?

is there a way to turn this off so it just works like a normal element?
Yes there is - you check and modify the respective CSS rules for borders and outlines.
Mylenium

Spry Accordions and Contribute

I'm curious of something.. been trying to search for anyone
who has a similar problem and can't seem to find an answer..
I've recently built a site using the DW CS3 Spry Accordion,
and the client is updating the file with Contribute CS3. They can
get in and edit the files just fine (contribute expands the
accordions so the content is editable), but when they 'publish' the
file the accordion stays expanded. The data in the accordions are
quite lengthy, so it's pretty necessary they collapse again.
Anyone else see this with the Spry stuff? I've had clients
update the Spry Tabbed menus with the same version of Contribute,
and everything works just fine. This one is a mystery!
I have version 1.6.1 of Spry. The editing file in question is
standard CSS/XHTML.
Any advice/help would be great! Thank you!
-s

Think I found the bug.. It's actually a combo of the footer
script between the Accordion and Google's Analytics script:
Link
to Article

Spry Accordion first tab

Hi, I am working on a Spry Accordion and I was wondering if it was possible to select which tab would be open when the website loads?

var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: -1 });

Spry Accordion Panels - Individual Colors

Hi and Thanks in advance.
How do I go about individually coloring each panel in Spry Accordion Widget. I check the CSS but it seems to be directed at the "whole" Spry Accordion and I would like each panel to have a different color. Is that possible?
Regards
Glen

Certainly. Apply a unique ID to each panel in the accordion and set a color for each in the CSS file:
This is what I added to the css file:
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
.AccordionPanelContent#content1 {
    background-color: red;
.AccordionPanelContent#content2 {
    background-color: yellow;
And this is what the html now looks like:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent" id="content1">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent" id="content2">Content 2</div>
</div>
</div>
You can do the same with the tabs. If you apply the IDs to the div class="AccordionPanel", you will also affect the tabs. In that case, leave off the .AccordionPanelContent in the style selector and insert .AccordionPanel#content1, for example.
Beth

Spry accordion has extra phantom tabs

In this template, I added extra tabs to the left hand navigation by just copying and pasting the code for the original tabs.
Then I noticed there were extra tabs in the accordion also, which don't work.
Looking at the code, I see that the navigation tabs seem to reside within the spry asset code . . . did I foul up the accordion by adding extra navigation tabs to the left hand column?
Here's the page: http://asptfacultycaucus.info/
I'm looking at the code but can't see anything that would cause these extra accordion tabs . . . (but I've also never used a spry asset accordion before)!
Help help,
Pamela

Thank you everyone for all of the suggestions. Just as an update, after posting a plea for help I found myself still wanting to work, so downloaded a fresh template (again, this is like the 4th time) and started from scratch. I went through each step I'd gone through to make corrections. Several times I recreated the same problems I'd encountered before that had to be resolved with other answers from questions I'd asked in the DW forums. Several times I created new problems, and actually had to delete a file and replace it with the same file from the original template and start over.
So right now, I do have my .css linked. I think what happened was: I wanted to test out a change I'd made to the template. I thought I would save it with a new name, so the original, still-functioning template would remain unchanged. When I saved it with a new name I was asked if I wished to update the links. I said "no," thinking all pages from the site based on the original template would otherwise be linked to this new one. What actually happened (I think) is that the new file was no longer linked to any of the stylesheets, accordion stylesheets, etc., so therefore there was no formatting at all.
I'm still suffering with how to make changes to the text of the spry accordion, and have experimented with various strategies for that as well. I've explained those and asked for help in another topic, which is: "changing text in spry accordion" -- I hope you all will help me with this one!
Here is the page as it stands so far: http://asptfacultycaucus.info/#
Thanks so much,
Pamela H

Spry Accordion and Firefox (dotted border)

Similar Messages

Maybe you are looking for