Unwanted browser borders around active tabbed panel tabs

I'm getting unwanted borders around the active tabs in my Spry tabbed panels that seem to be added by the browser. For example I'm geting a fuzzy caterpillar border in Safari. Does anyone know how to turn off this effect? Thanks

Its called "outline" or focus borders, its in the browser for accessibility reasons. So when users use keyboard navigation, they know where they are on the page. If don't want it. You can remove it by adding outline:none to the css selector that targets the tabs

Similar Messages

Color of selected tab panel tab

Hello all,
I'd like to know the orange like color of the upper part of a selected tab panel tab, see the picture below.
Actually, these are two colors, orange and a darker, 'shaded' orange. I don't mind which color value I can obtain, but I'd like to use the same color for other controls (LED, decoration frame) as well.
Does this color depend on the Windows theme? If so, I'd be happy about a possibility of obtaining this property programmatically.
If this color is always the same, I can obtain it myself using Photoshop...
Thanks a lot,
Wolfgang
Solved!
Go to Solution.

When the panel has ATTR_CONFORM_TO_SYSTEM_THEME set, CVI lets Windows draw the tabs by calling DrawThemeBackground with partIDs such as TABP_TABITEM, etc. The picture that you posted is the XP theme. The Windows 7 theme is different and it looks like this...
I checked out the Windows function GetSysColor, but didn't see a way to get that color. Anyway, since the tabs draw differently on XP and Vista/Windows 7, you may not want to use that color in different controls.

Link to Spry Tabbed Panels Tab?

Is it possible to link to a specific Spy Tabbed Panels tab from another page?
Thanks.

It is possible to link to a specific tabbed panel from another page, may I suggest you use the following link to visit a post in the spry forum were you will find all the steps needed to do this.
http://forums.adobe.com/thread/48312
Richard

IE6 displays AutoSuggestions under Tabbed Panel tabs

Problem: I am using the autoSuggest widget on the same page
as tabbed panels. In FireFox, it works GREAT! In IE6, I have a
problem with the suggestions being under the tabbed panels tabs
(possibly under the tabbed panel tab group)... I found a suggestion
which stated to set the autosuggest to z-index: 2002, and set it to
absolute positioning, both of which I've done.
When I look at the source using the IE Dev Toolbar, I see the
following:
<DIV class="predictiveSuggestionDiv hideSuggestClass"
id="destinationSuggestionsDiv">
<DIV class="fieldText" spry:hover="highlight"
spry:suggest="Oak Harbor, WA">Oak Harbor, WA</DIV>
</DIV>
<IFRAME class="iframeSuggest" style="DISPLAY: none; LEFT:
0px; WIDTH: 245px; TOP: 20px; HEIGHT: 18px" src='javascript:"";'
frameBorder="0" scrolling="no"></IFRAME>
Which leads me to believe that the autosuggest is not
actually inside the iFrame. While I found the styles for the
iframe, and set them, I did not find a way to tell spry to use the
iFrame. I was thinking that this might be the missing link, but I'm
not sure.
I've tried setting the TabbedPanelTab &
TabbedPanelTabGroup to z-index: 1, however the tabbed panels seem
to really want to be above everything else anyway. I do have the
iFrameSuggest class and I set it as suggested in another forum
entry to:
.iframeSuggest
position: absolute;
z-index: 2002;
filter:alpha(opacity:0.1);
However, that does not seem to solve my problem in IE 6.
Any thoughts?

Problem: I am using the autoSuggest widget on the same page
as tabbed panels. In FireFox, it works GREAT! In IE6, I have a
problem with the suggestions being under the tabbed panels tabs
(possibly under the tabbed panel tab group)... I found a suggestion
which stated to set the autosuggest to z-index: 2002, and set it to
absolute positioning, both of which I've done.
When I look at the source using the IE Dev Toolbar, I see the
following:
<DIV class="predictiveSuggestionDiv hideSuggestClass"
id="destinationSuggestionsDiv">
<DIV class="fieldText" spry:hover="highlight"
spry:suggest="Oak Harbor, WA">Oak Harbor, WA</DIV>
</DIV>
<IFRAME class="iframeSuggest" style="DISPLAY: none; LEFT:
0px; WIDTH: 245px; TOP: 20px; HEIGHT: 18px" src='javascript:"";'
frameBorder="0" scrolling="no"></IFRAME>
Which leads me to believe that the autosuggest is not
actually inside the iFrame. While I found the styles for the
iframe, and set them, I did not find a way to tell spry to use the
iFrame. I was thinking that this might be the missing link, but I'm
not sure.
I've tried setting the TabbedPanelTab &
TabbedPanelTabGroup to z-index: 1, however the tabbed panels seem
to really want to be above everything else anyway. I do have the
iFrameSuggest class and I set it as suggested in another forum
entry to:
.iframeSuggest
position: absolute;
z-index: 2002;
filter:alpha(opacity:0.1);
However, that does not seem to solve my problem in IE 6.
Any thoughts?

Remove halo around spry tabbed panels tab

I am using a spry tabbed panel on my page. In Safari, whem I click on a tab, the tab is surrounded by a halo. I assume this halo is some Safari default rendering. Anyone now how to get rid of this halo? I'm guessing it can be done with a css statement.
Thanks,
Patrick

One small note before your Ben's advice;
The effect you are talking about is called "outline" or "focus border". Its added by the browsers for accessibility reasons. It allows uses who navigate by keyboard see where they are on the page. If you remove this focus, your page will be less accessible for these users..

How do I put an image in a spry tabbed panels tab

Hello All,
I am currently working on a site with Spry Tabbed Panels.
One thing I'm not sure how to do is to put an image in each of the selecting tabs. I've done it before and I've forgot. I also have a site with an example of what I would like to do.
http://emilymagnuson.com
The tabs on this site were created with images inside of them. And I would like to know how to do it. I would like to make it work so the image changes when you click, hover, and deselect.
Thank you.

To put an image in the foreground, add it to your HTML code:
<li class="TabbedPanelsTab" tabindex="0">
<div style="margin-top:9px;"><img src="your_image_here.jpg">Contact</div>
</li>
Nancy O.

Images in Spry Tabbed Panels Tabs

I am completely new to the Spry options in Dreamweaver and
need help customizing the Tabs in the Spry Tabbed Panel.
I would like to substitute the text in each tab for a
different image in each tab, and have each image change by using
behaviors, depending on the user actions (hover, select, etc.).
If you can provide samples of this, it will truly be
appreciated. Thanks

First add an ID to the tab as follows or similar
<h2 id="second">Tab 2</h2>
Then add a style rule to add a background image as follows or similar
.TabbedPanelsTab#second {
background:url(myImage.gif);
Gramps

Spry Tabbed Panels: Tabs

I'm experimenting with Spry Tabbed Panels. The problem I
couldn't work out is that how to get panel tabs stay on their
place. They seems to be jumping out (far right) when I click on
enter key while my cursor in the tab content area. This happens on
DW CS3 but displays correctly on browsers preview (site is local)?
I am inserting Spry Tabbed Panel in a simple styled div.
There are many styled divs/nested divs on the page.
I can insert non Spry items in a same div and style them
without problem but something seems to be different about Spry
Tabbed Panel?

I'm experimenting with Spry Tabbed Panels. The problem I
couldn't work out is that how to get panel tabs stay on their
place. They seems to be jumping out (far right) when I click on
enter key while my cursor in the tab content area. This happens on
DW CS3 but displays correctly on browsers preview (site is local)?
I am inserting Spry Tabbed Panel in a simple styled div.
There are many styled divs/nested divs on the page.
I can insert non Spry items in a same div and style them
without problem but something seems to be different about Spry
Tabbed Panel?

Tabbed Panels - Tab shows over a dropdown menu

Hello,
As you see in this link
Tab
Problem i have a problem the tabbed panel widget. The tab seems
to come in front of a drop-down menu that i have (not spry)
Any suggestions are much appreciated

Hi,
most probably you have a css problem in your page that refers
to z-index. Check to see which one, the menu or the tabbed panel
(if you added a z-index) have the z-index value grater. Normally
the menu bar should have a bigger z-index to be displayed in top of
the other elements.
If you use the Spry menu bar and the Tabbed panel you don't
have this problem.
If you want more help from us, please give us a live url to
investigate the problem.
Thanks,
Diana

Putting an icon in a Spry Tabbed Panels tab...

Hey everyone. I'm a beginner web designer working with Dreamweaver CS4 and having some issues with my spry tabbed panels. I am trying to place a small icon next to the label/title on one of the tabs. Unfortunately when I put the image in, it shows up below my tab's title as if there were a line break. I can't seem to get it on the same line as all of my tabs.
Here's a link to my test page: http://www.northpointindustries.com/Test/droppacker.htm
I'm using Cufon for the titles, in case that affects it...
Does anyone have any suggestions?
Thanks so much.

Try
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
ul.TabbedPanelsTabGroup li:nth-child(2) {
background: url(http://www.northpointindustries.com/Test/images/vidcam.png) left top no-repeat;
padding-left: 30px;
</style>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>.
Change the value for each respective tab
Gramps

How to disable a tabbed panel tab?

Hi,
I'm creating a web service, and dinamically I need to enable / disable a TabbedPanelsTab inside a TabbedPanelsTabGroup. How can I do that?
Thanks for your help!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
</head>
<body>
<a href="#" onClick="hideTab2(); return false;">hide tab 2</a> - <a href="#" onClick="showTab2(); return false;">show tab 2</a>
<hr>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="1">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function hideTab2() {
    Spry.$$('li[tabindex="1"]').setStyle("visibility: hidden;")
function showTab2() {
    Spry.$$('li[tabindex="1"]').setStyle("visibility: visible;")
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Gramps

Sliding panel inside tabbed panel - onclick both

I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
OK I have another scenario as well....
You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

Try this and adapt to your needs:
<!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>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanels {
   position: relative;
   width: 200px;
   height: 200px;
   padding: 0px;
.SlidingPanelsContentGroup {
   position: relative;
   height:600px;
   margin: 0px;
   padding: 0px;
.SlidingPanelsContent {
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
</style>
</head>
<body>
<a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Contenu 1
      <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
      <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
      <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
         <div id="slidingPanel_1" class="SlidingPanels">
              <div class="SlidingPanelsContentGroup">
                 <div id="content1" class="SlidingPanelsContent">The Content 1</div>
            <div id="content2" class="SlidingPanelsContent">The Content 2</div>
            <div id="content3" class="SlidingPanelsContent">The Content 3</div>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">Contenu 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
Spry.Utils.addLoadListener(function() {
        Spry.$$("#trigger1").addEventListener('click', function() {
            TabbedPanels1.showPanel(0);
            sp1.showPanel(2);
        }, false);
        Spry.$$("#trigger2").addEventListener('click', function() {
            //TabbedPanels1.showPanel(0);
            sp1.showPanel(0);
        }, false);
</script>
</body>
</html>
You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
Xav

Spry Tabbed Panel obj Qs style

Spry Tabbed Panel obj
TAB NAMES how rather left-aligned(default) get centered?
may have an image in a tab name?
How tabs from left aligned extent to get all space(width) , all get bigger in width and aligned(the tabs) so tabbed area starts with: start of first tab and end with end of last tab?

Change this rule:
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
   width: 100px;
    text-align: center;
You will notice that I also added a width. Spry Tabbed Panel Tabs normally depend on the width of the text for their own dimension, so you need to add a width for the text to center in.
2. Of course you can have an image. You are essentially working with a list structure; anything you can have in a list you can have on a tab.
3. Give each tab li an id and "work out" percentage widths. Then, add selectors that assign those widths to each id'd list item. Caveats: you might want to do away with left and right padding in tabs if you are using percentages, because they will throw you off your count.
If you are using a static width, you could use pixel widths, but I think percentages are a little cleaner. Here's what your code might look like:
<li id="aboutustab" class="TabbedPanelsTab" tabindex="0">About Us</li>
<li id="qualitycontroltab" class="Tabbed PanelsTab" tabindex="0">Quality Control Department</li>
And corresponding CSS might look like this (if these were the only tabs!):
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width: 100px;
    text-align: center;
#aboutustab.TabbedPanelsTab {
     width: 30%;
#qualitycontroltab.TabbedPanelsTab {
     width: 69%;
/*Note: be sure to put these BELOW the original .TabbedPanelsTab selector. ALSO NOTE that these are id and class on the SAME list item, so do not put a space between #aboutustab and .TabbedPanelsTab */
I guesstimated the widths of the text for the tabs by throwing a grid over my page and adjusting the grid to show only ten grid-squares over the entire width of the panels. If you put all your tabs and tab labels in, you can then "read" an approximate width.
Then I summed the 'lengths' of the tab labels (in this case, I got aboutustab=1, qualitycontroltab=2.3, total=3.3) and divided each width by the total (small divided by large) to get the percentage for each width.
Be sure you don't add to more than 100%, or it will break.
Okay, if you simply want your tabs to meet the ends of your TabbedPanels, and don't care particularly about the width of each tab, give the width in the principal style rule (.TabbedPanelsTab) a simple percentage of the width of the Panels. If you have 5 tabs, each will be 20% wide (adjust for borders, etc.).
Beth

Existing menu underneath spry tabbed panel

I have an existing css based nav menu. Now I have added a tabbed panel on the page. All looks good, until I browse the nav menu in IE7. The dropdowns hide behing the tabbed panel tabs (but not the tabbed panel content). Is this a known issue, I tried searching but 0 results??
I'm hoping someone can give me some code to bring the nav menu to the front in IE7 (I'm not sure about older versions as well)?
Thanks,
Andy
http://www.monkeyshrine.com/trips/

Use the newer Spry UI 1.7 framework. The newer Spry widgets are web accessible from keyboard tab key (on focus) and touch screen devices (iPhone/iPad...).
Spry UI Menu Bar overview -
http://labs.adobe.com/technologies/spry/ui/docs/menubar.htm
Spry Tabbed Panels 2 overview -
http://labs.adobe.com/technologies/spry/ui/docs/tabbedpanels2/index.html
1) Download & install Widget Browser.
http://labs.adobe.com/technologies/widgetbrowser/
2) Go to the Widget Exchange to get Spry Menu 2.0 & Spry Tabbed panels 2.0.
3) Add them to your Widget browser and customize as required.
4) Save and add to site.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Spry Menus on Spry Tabbed Panels?

Hi,
I'm designing a site that has major tabs at the top, each of which takes the visitor to an appropriate section of the site... each with a default section overview page and a horizontal nav menu that's appropriate for that section. (This design is similar to going to a site like AT&T and clicking on top tabs for Home, Small Business or Enterprise. Once you've done so, the menu below then presents links appropriate to the Home, Small Business or Enterprise products.) I've been trying to implement this by putting instances of Spry Menus in Spry Tabbed Panels within the TabbedPanelsContentGroup div. Specifically, I have the MenuBarHorizontal class is each TabbedPanelsContent div/class.
I have the basic layout working, but the wiring is mystifying me. Clicking the various tabs indeed presents the correct corresponding menus. But I also need to figure out how to make clicking a section tab go to the section overview page (which happens to also correspond the first menu item, "Overview", in each section). There's no real <a href> kind of option that's apparent in conjunction with the TabbedPanelTabs in the TabbedPanelsGroup. Is there a way to force a particular page to display when switching tabs? Or am I trying to use the wrong tool for the job and there's a better technical approach to implementing this design?
I've tried David Powers' blog entry re "Opening Specific Tabs and Panels from Another Page" (http://foundationphp.com/tutorials/spry_url_utils.php), but it describes exactly what the title implies.
Thanks!
Jeffrey

Hi, Jeffrey,
I think I'm going to need to diagram this out!
Let's see...when you say "major tabs at the top" are you referring to a separate MenuBar or are you speaking of Spry Tabbed Panels?
You of course realize that if you are speaking of Spry Tabbed Panels, that EVERYTHING on the panels is on one page. If that is your main organization, yeah, it's a little hairy.
Now, if you have a "normal" one-level set of nav buttons that each takes you to a page that contains a set of Tabbed Panels for that "department," that will get you where you need to be without quite as much mind-blowing follow-the-wire through the wall hijinks, if you know what I mean.
Here is a site that I put together using Spry Tabbed Panels: http://www25.uua.org/uuhs/index.html Although the top "tabs" nav looks like Tabbed Panels tabs, the Tabbed Panels don't start until you get inside the site, and there I use Vertical tabs (on the left side) and on the Panels have put lots of Spry Accordions.
By using this technique, you have an effective "landing page" on each "department" linked to with the top navigation buttons.
Best of luck, and watch out for short-circuits!
Beth

Unwanted browser borders around active tabbed panel tabs

Similar Messages

Maybe you are looking for