Tabbed panels, Tooltip, IE6

I have a tooltip on the second panel of tabbed panels. Works fine x-browser and renders fine in IE6.
However, when the tooltip fires (and only then) the first paragraph (<p>) of the second panel goes blank (looks like it just changes font color to black, my bg is black), and so does the paragraph (<p>) on the first panel.
I cannot see how to fix this short of removing the tooltip. I'd rather not.
Anyone know a fix? Or how to force the color back (if that's the problem) from black? Or (horrors) show user a failure message? I'm totally lost here and dependent on your help.
Come to think of it (for other reasons), what is the best method to send a popup message to user -- such as browser not supported? IE5.5 for example.
Thanks.
Greg

Thanks.
http://www.petsatlanta.com/Pages/aboutustab.html
Problem only in IE6. Note that tabs Pet Sitters and Office Staff each have tooltips. There is no issue until user hovers over one of the tool tips. Then the first paragraph on tabs Company and Pet Sitters vanishes...sort of. If I highlight it, its there, just not visible - looks like the font goes black.
Thanks.

Similar Messages

Tabbed Panels - IE7 glitch

I'm struggling to find a solution for a problem I'm having
where I am not seeing content on my pages where I have tabbed
panels. IE6, IE8 and FF all show it, but IE7 is blank.
Examples:
Rates page
Products page
Any ideas where to start?
=== D. Chaffins - e-Marketing, ELGA Credit Union ===

I thought I just sent a follow-up on this, but don't see it
posted. So here it is again:
I don't know all the implications for IE 7 vs. other browsers
of these things, but there's a lot of improper coding on that page
for XHTML. You have tags in upper case that need to be all lower
case -- instead of <TD> it should be <td>, etc. Also
where there are not closing tags, such as in <br> or
<img>, you have to add a slash before the ">" so it's
<br /> and <img src="logo.jpg" />. You'd be a lot
better off using CSS to style your fonts instead of font tags, and
the font tags you have don't have the attributes in quotes as they
should, e.g. <font face="Arial"> not <font face=Arial>.
Maybe that has nothing whatsoever to do with the issue you're
describing, but if you clean that all up with a bunch of
find-and-replaces, the validator may be of more assistance.

Spry Tabbed Panels overwritting popup menu in IE6 and IE7 but display fine in Firefox

I am new to Spry and Dreamweaver CS3 and would appreciate any
help anyone can give. I am having an issue with Spry Tabbed Panels
appearing above a navigation bar pop up menu only in IE6 and IE7.
Everyhting works like expected in FF. I have several product pages
that are exhibiting the same issue. I am not having this issue when
using Spry Accordian. Would someone be able to educate me on what I
can do to fix this problem. One of the product pages that is
exhibiting this problem is
Page
with display issue

The IE browsers implement z-indexing differently than most
browsers ... specifically, IE browsers establish a new z-index
context if you set the position CSS property of an element to
anything other than static.
What this means is that if you set something to
position:relative ... any z-index values of children inside that
element will be relative to that element.
In your case, you seem to have a position relative on your
div FWTableContainer1966866324. If you set the z-index value to
something like 10, you'll notice that it fixes the problem.
--== Kin ==--

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?

Spry tabbed panels, opening a tabbed panel, problem with IE

i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
body{
    color: #000;
    background-attachment: fixed;
    background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 95%;
#img2 {
    height: 2cm;
    width: 2cm;
    border:0;
#img {
    margin-right: 10px;
    height: 3cm;
    width: 3cm;
    border:0;
TD{
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;
    vertical-align: top;
    text-align: left;
#header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#header-container {
    height: 120px;
    background-repeat: repeat-x;
    background-position: left bottom;
#header {
    width: 1040px;
    margin: 0 auto;
    position: relative;
#header-content{
    width: 1040px;
    position: relative;
    background-image: url(../afbeeldingen/Sitepictures/background.jpg);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#header ul li {
    float: left;
    margin-right: 2px;
#container {
    width: 1040px;
    padding-top: 120px;
    padding-bottom:50px;
    background-color: #FFF;
    margin-bottom: 0px;
    left: auto;
    right: auto;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: auto;
    min-height:100%;
#container a:link {
    color: #00C;
    text-decoration: none;
#container a:visited {
    color: #F8495A;
    text-decoration: none;
#container a:hover {
    color: #00C;
    text-decoration: underline;
#container a:active {
    color: #00B004;
    text-decoration: none;
#kolommaker
    width:1040px;
    background-color: #CEECAE;
    height: 100%;
    float: left;
#boven {
    width: 1040px;
    position: static;
    height: 180px;
    background-color: #FFF;
#sitecontent {
    width: 1040px;
    background-color: #FFF;
    height: 100%;
#TabbedPanels1 {
    width: 1040px;
    position: static;
    background-color: #FFF;
    height: 100%;
    float: left;
.links, .rechts, .midden {
    height:100%;
    display: inline-table;
    background-color: #FFF;
.links{
    float: left;
    width: 330px;
    font-size: 12px;
    padding-top: 5px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.rechts{
    padding-top: 5px;
    float: right;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.midden{
    padding-top: 5px;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
#footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#footer-container {
    height: 50px;
    background-image: url(../images/footer-bg.png);
    background-repeat: repeat-x;
    background-position: left bottom;
#footer {
    width: 1040px;
    margin: 0 auto;
    position: relative;
    background: #FFF;
#contentfooter {
    width: 1040px;
    margin-top: 0;
    margin-right: auto;
    position:relative;
    margin-bottom: 0;
    margin-left: auto;
    height:50px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #F00;
    text-align: center;
.leftfooter {
    float: left;
.rightfooter {
    float: left;
#iframe {
        height: 600px;
        min-height: 600px; }
.result_title a:link {
    color: #00C;
    text-decoration: none;
.result_title a:visited {
    color: #F8495A;
    text-decoration: none;
.result_title a:hover {
    color: #00C;
    text-decoration: underline;
.result_title a:active {
    color: #00B004;
    text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
    text-align: center;
    background: #FFF;
    border: 1px solid #CCC;
    height: 20px;
    width: 175px;
    font-size: 12px;
.clearfix {
    content:".";
    width:100%;
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
    overflow: hidden;
body{
    overflow: auto;
#header-wrap, #footer-wrap {
    position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
    position: absolute;
    width: 100%;
    height:100%;
    overflow:auto;
#TabbedPanels1 {
    position: absolute;
.TabbedPanels {
    position: absolute;
#boven {
    padding-top: 100px;
#container {
    padding-top: 60px;
    height :100%;
#sitecontent {
    height: 100%;
#footer-wrap {
    bottom: -1px;
#header img, #footer img
display: block;
Template
<!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>Naamloos document</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="../Sites/login.html">Online map</a></li>
                        <li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="../Sites/Aldi.html">Aldi</a></li>
            <li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="../Sites/Bonita.html">Bonita</a></li>
            <li><a href="../Sites/Carrefour.html">Carrefour</a></li>
            <li><a href="../Sites/C&A.html">C & A</a></li>
            <li><a href="../Sites/Decathlon.html">Decathlon</a></li>
            <li><a href="../Sites/Delhaize.html">Delhaize</a></li>
            <li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="../Sites/Ikea.html">Ikea</a></li>
            <li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
            <li><a href="../Sites/Lidl.html">Lidl</a></li>
            <li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="../Sites/Scapino.html">Scapino</a></li>
            <li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
     <div id="boven">test<br />
       <br />
     </div>
     <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
        <li class="TabbedPanelsTab" tabindex="0">Tools</li>
        <li class="TabbedPanelsTab" tabindex="0">Pc's</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
        <li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
        <li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
        <li class="TabbedPanelsTab" tabindex="0">EN andere</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven
            <p>Hier wordt de inhoud voor id midden weergegeven</p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
      </div>
      <div class="clearfix:after"> </div>
</div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
PAGE where i open the tabbed panels
<!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>Third Party</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="Verlof-Recup.html">Verlof</a></li>
                <li><a href="Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="login.html">Online map</a></li>
                        <li><a href="Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="Aldi.html">Aldi</a></li>
            <li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="Bonita.html">Bonita</a></li>
            <li><a href="Carrefour.html">Carrefour</a></li>
            <li><a href="C&A.html">C & A</a></li>
            <li><a href="Decathlon.html">Decathlon</a></li>
            <li><a href="Delhaize.html">Delhaize</a></li>
            <li><a href="Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="Ikea.html">Ikea</a></li>
            <li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="Kruidvat.html">Kruidvat</a></li>
            <li><a href="Lidl.html">Lidl</a></li>
            <li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="Scapino.html">Scapino</a></li>
            <li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Scales</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
        <li class="TabbedPanelsTab" tabindex="0">HP</li>
        <li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
        <li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
        <li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
           <div class="links"></div>
          <div class="rechts"></div>
         <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
           <div class="rechts"></div>
          <div class="midden"></div>
        </div>
       <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
      </div>
       <div class="clearfix:after"> </div>
    </div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: static;
    float: left;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: static;
    top: 1px;
    float: left;
    font: bold 0.7em sans-serif;
    background-color: #FF0033;
    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;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 4px;
    padding-left: 5px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #75A7D0;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    border-bottom: 2px solid #EEE;
    color: #FFF;
    background-color: #000;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    padding: 4px;
    height: 100%;
    width: 1032px;
    float: left;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    background-color: #FFF;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #CCC;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;

added also the css for the menubar
pro_dropdown_3.css
.preload1 {
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
    padding:0;
    margin:0;
    list-style:none;
    height:38px;
    position:relative;
    z-index:500;
    font-family:arial, verdana, sans-serif;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: repeat-x;
#nav li.top {
    display:block;
    float:left;
    width: auto;
#nav li a.top_link {
    display:block;
    float:left;
    height:35px;
    line-height:33px;
    color:#ccc;
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    width: 85px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 2px;
#nav li a.top_link span {
    float:left;
    display:block;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: no-repeat;
    background-position: right top;
    width: 70px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
#nav li a.top_link span.down {
    float:left;
    display:block;
    padding:0 10px 0 12px;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link {
    color:#fff;
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
#nav li:hover a.top_link span {
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link span.down {
    padding-bottom:3px;
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
    background-repeat: no-repeat;
    background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
    color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
    color:#fff;
    border-color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
    color:#000;
    border-color:#50b5d0;
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;

Spry Validation in Tabbed Panel

I've created a form that has a number of sections which I
have separated out using a spry tabbed panel. So far, so good.
On one of the panels, however, is a select box that is
required, so I have used a spry validation widget to look after it.
Now, if the select box hasn't been used then and the submit button
is clicked while one of the other panels is open, because the
validation widget halts the form it makes it look as though nothing
has happened. The warning message is only visible when the correct
panel is open.
My question is this: how do I either (a) force the panel with
the error on to reopen or (b) make the error message show up
elsewhere on the page so that it is visible? I tried positioning it
absolutely above the whole panel but it still only shows up when
the relevant panel is oen.

I have actually added multiple tabbed panels inside of tabbed
panels as well as collapsible panels inside of tabbed panels and
vise versa. This works across all browsers (IE 6 & 7, FF 2,
Safari 2 & 3).
The key for me was to use <div style="clear: both"> (I
put a comment here to satisfy IE6) </div> at the bottom of
the tab, before the closing of the tab since I was using a lot of
floating within the tabbed panels.
If you share some code, I'm sure someone could give you a
more specific answer.

Spry Tabbed Panels overwritting Flash drop down menu in IE

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve tried adding “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry Tabbed Panels overwritting Flash drop down menu in IE but display fine in Firefox

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve add “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry tabbed panels not opening in IE on Vista

Link:
About
page
Link:
Story
page
Spry tabbed panels on these pages display fine in Firefox and
Safari.
But in IE on two separate Vista-running PCs, everything
except the tabs themselves loads, until you click refresh one or
more times. Both PCs were on broadband connections and I checked
each PC several times just to make sure it wasn't just an
intermittent connection.
Way to fix this for IE? As far as my client is concerned,
it's a bug.

Dear all, thanks for your replies.
I have tried Barascu Diana's fix to both pages linked at the
top, but am presently unable to test it on IE6. Anyone able to see
if those tabs are now appearing?
<DIV class="TabbedPanel" id="TabbedPanels1" style
="position:relative">
(Hope I did this right?)
I also temporarily tried kinblas' fix, but removing relative
positioning there caused the tabs to hover over to the left of the
page.

Problem with Spry Tabbed Panels with Explorer 6

I've used Tabbed panels all over my site, and they seemed to work fine in FireFox, Safari, Explorer 7 and 8, etc. but today i checked out Explorer 6 in BrowserLab, after someone said our site looked weird.
In EX 6 it certainly does: all the tabbed panels are preceded by about a screen's worth of empty space!
I'd appreciate it someone could have a look at this and see if they can tell what's going on:
See this page:
http://www.ragandbone.ca/Pages/willows.html
or almost any ohter page on the site!
I'm very far from experienced in web work, so I might need step by step instructions for any fix suggested.
Thanks in advance
John

Hi, John,
Make the width of the .TabbedPanels narrower. In the course of my experiments, I ended up making it 580px, which works in IE6, according to BrowserLab. You had a simple width overrun; your widths + borders+ paddings + margins (within the content div) added up to more than the width available. You might be able to get away with slightly more width, but test it carefully when you start to add it back in...
This might be an instance of the "doubled margin bug" (see http://www.positioniseverything.net/explorer/doubled-margin.html).
I changed the margin on .TabbedPanels to margin: 0 auto; so that any effective centering that had been done by 'filling' the width previously was now achieved by the margin-right and margin-left set to "auto." (The zero applies to top and bottom margin.)
I deleted the left: -40px; that you had applied to .TabbedPanelsTab and zeroed out the right padding on .content ul, .content ol {
padding: 0 15px 15px 0; that your threeColFixHF_RB.css had applied to all ul in the site. This might or might not actually affect anything if you don't make these same changes, but I had altered them in the course of figuring out what was going on. It's never a good policy, in my opinion, to use negative margin if you can simply correct both elements, as I did. You don't want to be progressively compensating for things you don't need anyway!
Beth

Tabbed Panel content overflow problem

Hi everyone,
I'm a newbie to this, but have successfully used a few Spry
elements and am loving them.
My problem right now is that I'm trying to get a tabbed panel
to work where the panel contents have different amounts of text. It
works great in IE6 and looks fantastic, but in IE7 and Firefox 2
the content is visible although it overflows beneath the styled
content area.
You can see it here:
http://www.pranayogacollege.com/yoga-workshops.php
I imagine it's a simple thing that I've overlooked, but I'd
be very appreciative if someone could point me in the right
direction.
Thanks in advance,
Jade

"spiderjade" <[email protected]> wrote in
message
news:eqt5mt$d32$[email protected]..
> You can see it here:
>
http://www.pranayogacollege.com/yoga-workshops.php
>
> I imagine it's a simple thing that I've overlooked, but
I'd be very
> appreciative if someone could point me in the right
direction.
.TabbedPanelsContent {
padding: 4px;
/*ADD NEW*/
height: 276px;
overflow: auto;
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Spry Tool tip on Tabbed panels

I am having a problem with the new spry tool tip widget. I
have a Tabbed panels table with 4 tabs. For some reason the spry
widget only works when I have 4 seperate div's with the tool tip
content and 4 separate js variables placed after the divs. One must
be on each tab. Is there any way to make it work so there is one
div and one variable creation on the page rather than 1 for each
panel?. heres how my code works:
<head>
<body>
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">TAB
1</li>
<li class="TabbedPanelsTab" tabindex="1">TAB
2</li>
<li class="TabbedPanelsTab" tabindex="2">TAB
3</li>
<li class="TabbedPanelsTab" tabindex="3">TAB
4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="Funds_DIV1" spry:region="ds1"
class="SpryHiddenRegion" >
<table>
<div id="blindMe" class="toolTip"> <%=accesstxt
%> </div>
<script type="text/javascript">
var blindTooltip = new Spry.Widget.Tooltip('blindMe',
'.blindTrigger');
var blindToolTipClosed = new
Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
</script>
</table>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="Funds_DIV2" class="SpryHiddenRegion"
spry:region="ds2">
<table>
<div id="blindMe" class="toolTip"> <%=accesstxt
%> </div>
<script type="text/javascript">
var blindTooltip = new Spry.Widget.Tooltip('blindMe',
'.blindTrigger');
var blindToolTipClosed = new
Spry.Widget.Tooltip('blindMeClosed', '.blindClosedTrigger');
</script>
</table>
Repeat two more times . You get the idea

Sorry i just kinda threw that together as a mock up
id="blindMe" becomes id="blindMe2" and so on for each subsequent
use. I had already checked for that. The same thing goes for the
associated script variable. It works as is, i just dont want to
have to duplicate it.
The problem is, if i remove all the duplicated divs and
scripts, then place that script and div on the bottom of the page
after the </div> for the tabbed panels div, the hover state
no longer works. Same is true if i keep it within the </div>
the only way it does work is if i duplicate it within each tabbed
panels content divs. (With different id values of course)

Hide contents of tabbed panel initially

I am trying to make a tabbed panel where each panel contains gallery or slideshow. That works fine, but I really want the galleries hidden initially. Using a blank slideshow widget there is no option to do so. I have also considered a menu bar that when clicked would expose a specific gallery. Like populating an i-frame. Can anyone give me a solution to this?

Hi
With tabbed panel , we cannot show only tabs containing information. For this specific action you can try accordion and select "Can close all" , this would initially hide the containers where you can use slide shows.
Also, tooltip for the purpose can be used , where the content will come on screen as pop-up on rollover with triggers.
Try the suggestions and let me know if you have any additional question.
Thanks,
Sanjit

On a tabbed panel, I am trying to create a form, but...

On a tabbed panel I am trying to create a form, but I am having a couple of issues.
The coding on my form is yellow - I can't figure out what is wrong. Also, I can't see the tab on the browser, only in live view. I haven't loaded it to my site as I haven't finished it yet. I don't want to go any further, until I solve the issues I have now. Any ideas?
thanks,
deb
        <form id="registrationForm" name="registrationform" method="post" action="">
          <fieldset>
            <legend>Contact Information</legend>
            <span id="sprytextfield1">
              <label>Name <span class="inforequired">*</span><br />
                <input type="text" name="name" id="name" />
                <br />
              </label>
              <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
              <label for="businessname">(Business or Organization) Name<br />
              </label>
              <input type="text" name="businessname" id="businessname" />
              <br />
              <span class="textfieldRequiredMsg">value is required.</span></span> <span id="sprytextfield3">
              <label for="address">Address <span class="inforequired">*</span><br />
              </label>
              <input type="text" name="address" id="address" />
              <br />
              <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield4">
              <label for="email">City</label>
              <span class="inforequired">*</span><br />
              <input type="text" name="city id="city="city"" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield5">
              <label for="province">Province</label>
              <span class="inforequired">*</span><br />
              <input type="text" name="province" id="province" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield6">
              <label for="postalcode">Postal Code</label>
              <span class="inforequired">*</span><br />
              <input type="text" name="postalcode" id="postalcode" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield7">
              <label for="phone">Phone Number (including area code) <span class="inforequired">*</span><br />
              </label>
              <input type="text" name="phone" id="phone" />
              <br />
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield8">
              <label for="fax">Fax Number</label>
(including area code) <br />
<input type="text" name="fax" id="fax" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield9">
<label for="email">Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="spryconfirm1">
<label for="emailconfirm"><br />
Re-enter Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="emailconfirm" id="emailconfirm" />
<span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
<p> My Interest in the Ability Axis Employment Expo is as a </p>
<p><span id="spryradio1">
<label>
    <input type="radio" name="RadioGroup1" value="business" id="RadioGroup1_0" />
    Business/Employer</label>
<br />
<label>
    <input type="radio" name="RadioGroup1" value="nonprofit" id="RadioGroup1_1" />
    Non-Profit/Service Organizatin</label>
<br />
<label>
    <input type="radio" name="RadioGroup1" value="jobseeker" id="RadioGroup1_2" />
    Job Seeker</label>
<br />
<label>
    <input type="radio" name="RadioGroup1" value="other)" id="RadioGroup1_3" />
    Other (please specify below)</label>
<br />
</span><br />
<span id="sprytextarea1">
<label for="contactcomments"> Comments or other information</label>
<br />
<textarea name="contactcomments" id="contactcomments" cols="45" rows="5"></textarea>
</span> </p>
</fieldset>
          <p></p>
          <fieldset>
            <legend>Booth Options</legend>
            <span id="spryselect1">
              <label for="premierearlybird">Premiere (10 X 10) until April 21 $375</label>
              <span class="earlybirdpricing">Early Bird Pricing</span><br />
              <select name="premierearlybird" id="premierearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">lease select an item.</span></span> <span id="spryselect2">
              <label for="premierereg">Premiere (10 x 10) after April 21 $425</label>
              <br />
              <select name="premierereg" id="premierereg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect3">
              <label for="premierenpearlybird">Premiere Non-Profit (10 X 10) until April 21 $325 <span class="earlybirdpricing">Early Bird Pricing</span><br />
              </label>
              <select name="premierenpearlybird" id="premierenpearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect4">
              <label for="premierenp">Premiere Non-Profit (10 X 10) after April 21 $375</label>
              <br />
              <select name="premierenp" id="premierenp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect5">
              <label for="standardregearlybird">Standard (8 X 10) until April 21 $250 <span class="earlybirdpricing">Early Bird Pricing</span><br />
              </label>
              <select name="standardregearlybird" id="standardregearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect6">
              <label for="standardreg">Standard (8 X 10) after April 21 $300</label>
              <br />
              <select name="standardreg" id="standardreg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect7">
              <label for="standardnpearlybird">Standard Non-Profit (8 X 10) until April 21 $200</label>
              <span class="earlybirdpricing">Early Bird Pricing</span><br />
              <select name="standardnpearlybird" id="standardnpearlybird">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect8">
              <label for="standardnp">Standard Non-Profit (8 X 10) after April 21 $250<br />
              </label>
              <select name="standardnp" id="standardnp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3 - please enter details in the comments box below</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></span>
</fieldset>
          <br />
          <fieldset>
            <legend>Breakfast Tickets</legend>
            <span id="spryselect10">
              <label for="breakfast1-5">Breakfast Tickets $40 each (up to 5 tickets)</label>
              <br />
              <select name="breakfast1-5" id="breakfast1-5">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect11">
              <label for="breakfast+5">Breakfast Tickets $35.00 each (more than 5 tickets)</label>
              <br />
              <select name="breakfast+5" id="breakfast+5">
                <option value="0" selected="selected">Please Choose</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10 (please comment below)</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect12">
              <label for="breakfasttable">Breakfast Tickets $400 each (table of 8 plus two event hosts)<br />
              </label>
              <select name="breakfasttable" id="breakfasttable">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="3+">More than 3</option>
              </select>
              <br />
              <br />
              <span class="selectRequiredMsg">Please select an item.</span></span> <span id="sprytextarea2">
              <label for="breakfastticketscomment">Additional Information about Breakfast Tickets</label>
              <span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
          <br />
          <fieldset>
            <legend>Seminar Tickets</legend>
            <p>Shayn Anderson, author of Taking Pride in That Which Sets US Apart, will host a one hour seminar at 11:00 am. </p>
            <p>
              <label for="shayn11amreg">Shayn Anderson Seminar tickets $40 each</label>
              <br />
              <select name="shayn11amreg" id="shayn11amreg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p>
              <label for="shayn11amnp">Shayn Anderson Seminar tickets (Non-Profit) $30 each</label>
              <br />
              <select name="shayn11amnp" id="shayn11amnp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p>Denise Bissonnette will do a seminar presentation at 1:00 pm on the topic Being True to the Dream of Diversity. Denise's presentation will run approximately 1.5 hours. </p>
            <p>
              <label for="denise1pmreg">Denise Bissonnette Seminar tickets $50</label>
              each <br />
              <select name="denise1pmreg" id="denise1pmreg">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p>
              <label for="denise1pmnp">Denise Bissonnette Seminar tickets (Non-Profit) $40 each<br />
              </label>
              <select name="denise1pmnp" id="denise1pmnp">
                <option value="0" selected="selected">Please Choose</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="10+">more than 10</option>
              </select>
              <span class="selectRequiredMsg">Please select an item.</span></p>
            <p><span id="sprytextarea3">
              <label for="seminarcomments">Other Information About Seminar Tickets</label>
              <textarea name="seminarcomments" id="seminarcomments" cols="45" rows="5"></textarea>
            </span></p>
</fieldset>
          <br />
          <fieldset>
            <legend>Processing Information</legend>
            <span id="spryradio2">
              <label>
                <input type="radio" name="RadioGroup2" value="invoice" id="RadioGroup2_0" />
                Please invoice me</label>
              <br />
              <label>
                <input type="radio" name="RadioGroup2" value="printmail" id="RadioGroup2_1" />
                I will print and mail my form with my payment</label>
              <br />
              <label>
                <input type="radio" name="RadioGroup2" value="emailcreditcard" id="RadioGroup2_2" />
                I will submit my information and provide my credit card information</label>
              in the box below <br />
<label>
    <input type="radio" name="RadioGroup2" value="other" id="RadioGroup2_3" />
    Other - I will provide full details below<br />
</label>
            </span><span id="sprytextarea4"><span id="sprytextarea5">
            <label for="processingcomments"><br />
              Further Information for Processing Registration</label>
            <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
            <span class="textareaRequiredMsg">A value is required.</span></span></span> <span id="sprytextarea6"> <span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
          <p>
            <input name="submit" type="submit" class="buttons" id="submit" value="Submit Information" />
            <input name="reset" type="reset" class="buttons" id="reset" value="Reset Form" />
          </p>
        </form>

Gramps, you are always coming to my rescue.
Okay, I loaded the page under a different name http://abilityaxis.com/test.html. Viewing the source code doesn't show the yellow.
For demonstration purposes I copied a small amount of the text and changed the colour of what is yellow in Dreamweaver to this pinkish colour (I tried yellow but you couldn't read it)
        <form id="registrationForm" name="registrationForm1" method="post" action="">
          <fieldset>
              <legend>Contact Information</legend>
              <span id="sprytextfield1">
                <label>Name <span class="inforequired">*</span><br />
                  <input type="text" name="name" id="name" />
                  <br />
               </label>
                <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
                 <label for="businessname">(Business or Organization) Name<br />
                </label>
                <input type="text" name="businessname" id="businessname" />
It basically goes all the way through the form.
Any advice?
thanks,
deb

Spry Tab Panel is not working properly on remote server

Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
          <div id="header"></div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html" class="current">ABOUT</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
        <ul>
          <li><a href="#">Business Plan</a></li>
          <li><a href="#">Marketing Plan</a></li>
          <li><a href="#">Incorporation</a></li>
          <li><a href="#">Accounting System</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#">OUR PROCESS</a></li>
      <li><a href="#">CAREERS</a>      </li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">values</li>
      <li class="TabbedPanelsTab" tabindex="0">people</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
                <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
        </div>
      </div>
      <div class="TabbedPanelsContent">
                  <div id="scrolltext">
                    <h1>Heading1</h1>
        <p>Lorem n, </p>
                            <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, , </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit a, </p>
                           <h1>Heading1</h1>
        <p>Lorem ipsum dolor sit amet, </p>
        </div>
      </div>
    </div>
</div>
</div>
<div id="footer">
<div id="legal">
                      <ul>
                          <li>Copyright © 2012 Temari&Co</li>
                    <li>| Privacy Policy |</li>
                    <li>Terms of Use</li>
                </ul>
    </div>
            <div id="socialmedia">
                      <ul>
                          <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                    <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                    <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                    <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></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 TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          clear: none;
          width: 100%;
          height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
          margin: 0px;
          padding: 0px;
.TabbedPanelsTab {
          position: relative;
          float: left;
          background-color: #FFF;
          list-style: none;
          -moz-user-select: none;
          -khtml-user-select: none;
          cursor: pointer;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          font-weight: normal;
          color: #666;
          height: 30px;
          width: 116px;
          text-transform: uppercase;
          text-align: center;
          line-height: 30px;
          margin: 0px;
          padding: 0px;
.TabbedPanelsTabHover {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
.TabbedPanelsTabSelected {
          background-image: url(../../SUPEROLDU/images/menubaractive.png);
          background-repeat: repeat-x;
          color: #FFF;
          height: 30px;
          width: 116px;
.TabbedPanelsTab a {
          color: black;
          text-decoration: none;
.TabbedPanelsContentGroup {
          clear: both;
          background-color: #FFF;
          height: 100%;
          width: 824px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 9pt;
          color: #666;
          border-top-width: 1px;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: dotted;
          border-top-color: #CCC;
          border-right-color: #CCC;
          border-bottom-color: #CCC;
          border-left-color: #CCC;
.TabbedPanelsContent {
          height: 100%;
          width: 100%;
          overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
          overflow: hidden;
          zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
          float: left;
          background-color: #EEE;
          position: relative;
.VTabbedPanels .TabbedPanelsTab {
          float: none;
          margin: 0px;
          border-top: none;
          border-left: none;
          border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
          background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
          clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
          overflow: visible !important;
.TabbedPanelsContentGroup {
          display: block !important;
          overflow: visible !important;
          height: auto !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
.TabbedPanelsContent {
          clear:both !important;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          width: 744px;
.TabbedPanelsTab {
           overflow: visible !important;
           display: block !important;
           clear:both !important;

Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services

Tabbed panels, Tooltip, IE6

Similar Messages

Maybe you are looking for