Fixed divs in IE6

I am trying to get a fixed Div to behave the same way it does
in IE7, in IE6. I realize IE 6 doesn't support the fixed property
(except for the background)
However, I have a book that says its possible using
conditional statements in the html code and the proper coding in
the css page........unfotunatley the book's example isn't real
clear.
I am actually excited that I got it to stay fixed when you
scroll vertically.......but where I am stuck is to get it to stay
fixed when you scroll horizontally as well........so that when you
scroll horizontally, the base cello image stays in place and the
content slide underneath it as you scroll.......(just like it
behaves in IE7)
Here is the link to the page.....hopefully whoever is helping
me with this has a way to view it both in IE7 and IE6....although
it may not be neccessary to help me.
http://dev.informarch.com/WeekendMusician3/article1/article1a.html
I pasted the HTML code and the CSS code in question in the
code window.
Thank you so much for any help!
Ken

No.  Flash supports only a very limited number of html tags, and <div> is not one of them.  To see what is supported, look up htmlText in the help documentation. That section conatins a table of them.
Then, I have to wonder what you intend in saying " the same way you use them in dreamweaver"  Normally, in dreamweaver they are use to create sections/areas within a web page.  In Flash, you do that using other kinds of objects, such as Sprites or MovieClips or simply graphics or textfields or whatever else can be placed on the stage.

Similar Messages

  • Need Help Fixing Site for IE6

    Hello.
    I've been working on a CSS drop down menu for my website
    which works fine in Internet Explorer 7 and all other modern
    browsers. But I used Browsershots.org to have a look at the site in
    IE6 and it was terrible. I am using Windows Vista so there is no
    way of me getting IE 6 on this machine (MultipleIE's doesn't work).
    So I need some help fixing for IE6. Page url is
    http://runecentral.net/index.php
    HTML Code and CSS Code;
    First the list
    <div class="menu">
    <ul id="nav">
    <li id="fi"><a href="
    http://www.runecentral.net/">Home</a></li>
    <li id="fi"><a href="
    http://forum.runecentral.net/">Forums</a></li>
    <li id="fi"><a href="
    http://chat.runecentral.net/">Chat</a></li>
    <li id="fi">Guides
    <ul>
    <li id="si"><a href="/skills.php">Skill
    Guides</a></li>
    <li id="si"><a href="/quests.php">Quest
    Guides</a></li>
    <li id="si"><a href="/minigames.php">Mini Game
    Guides</a></li>
    <li id="si"><a href="/guilds.php">Guild
    Guides</a></li>
    <li id="si"><a href="/cities.php">City
    Guides</a></li>
    <li id="si"><a
    href="/monsterhunting.php">Monster Hunting
    Guides</a></li>
    <li id="si"><a href="/moneymaking.php">Money
    Making Guides</a></li>
    <li id="si"><a
    href="/miscellaneous.php">Miscellaneous
    Guides</a></li>
    </ul>
    </li>
    <li id="fi">Databases
    <ul>
    <li id="si"><a href="/items.php">Item
    Database</a></li>
    <li id="si"><a href="/monsters.php">Monster
    Database</a></li>
    <li id="si"><a href="/npcs.php">NPC
    Database</a></li>
    <li id="si"><a href="/shops.php">Shop
    Database</a></li>
    </ul>
    </li>
    <li id="fi">Tools
    <ul>
    <li id="si"><a href="/skillcalcs.php">Skill
    Calculators</a></li>
    <li id="si"><a href="/skillplanners.php">Skill
    Planners</a></li>
    <li id="si"><a href="/maxhit.php">Max Hit
    Calculator</a></li>
    <li id="si"><a href="/combatcalc.php">Combat
    Calculator</a></li>
    </ul>
    </li>
    <li id="fi">Maps
    <ul>
    <li id="si"><a href="/worldmap.php">Official
    World Map</a></li>
    <li id="si"><a href="/dungeons.php">Dungeon
    Maps</a></li>
    </ul>
    </li>
    <li id="fi">Archives
    <ul id="nav">
    <li id="si"><a href="/newsarchive.php">News
    Archive</a></li>
    <li id="si"><a href="/pollarchive.php">Poll
    Archive</a></li>
    </ul>
    </li>
    <li id="fi"><a
    href="/contact.php">Contact</a></li>
    </ul>
    </div>
    Now the main CSS code
    .menu ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    .menu {
    text-align: center;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    .menu a {
    text-decoration: none;
    color: #FFFFFF;
    ul#nav {
    width: 100%;
    height: 30px;
    margin: 0 auto;
    ul#nav li {
    position: relative;
    float: left;
    #fi {
    width: 75px;
    height: 30px;
    cursor: pointer;
    #si {
    width: 170px;
    float: left;
    height: 25px;
    line-height: 25px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    background-color: red;
    ul#nav li:hover {
    background-color:#00FFCC;
    ul#nav li ul {
    display: none;
    ul#nav li:hover ul {
    display: inline;
    float: left;
    height: auto;
    padding: 0;
    margin: 0;
    text-align: left;
    ul#nav li:hover ul li {
    display: block;
    margin: 0;
    padding: 0 0 0 5px;
    height: 100%;
    ul#nav li#fi a {
    display: block;
    height: 100%;
    ul#nav li#fi:hover {
    background-image: url(/img/fixedbar_over.png);
    If you need any more code just check the page source.
    I know this is quite a lot to ask but I am really stuck as I
    cannot do it myself so any help would be greatly appreciated.
    Many thanks and regards,
    Perry Roper

    However, if it's
    http://www.runecentral.com/
    then you need to fix some of
    the 150 validation errors here:
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.runecentral.com%2F
    Jo
    "josie1one" <[email protected]> wrote in message
    news:[email protected]...
    >>
    http://runecentral.net/index.php
    > Appears to be a bad link
    >
    > --
    > Jo
    >
    >
    >
    > "Perry|" <[email protected]> wrote in
    message
    > news:[email protected]...
    >> Hello.
    >>
    >> I've been working on a CSS drop down menu for my
    website which works fine
    >> in
    >> Internet Explorer 7 and all other modern browsers.
    But I used
    >> Browsershots.org
    >> to have a look at the site in IE6 and it was
    terrible. I am using Windows
    >> Vista
    >> so there is no way of me getting IE 6 on this
    machine (MultipleIE's
    >> doesn't
    >> work). So I need some help fixing for IE6. Page url
    is
    >>
    http://runecentral.net/index.php
    HTML Code and CSS Code;
    >>
    >> First the list
    >>
    >> <div class="menu">
    >> <ul id="nav">
    >> <li id="fi"><a href="
    http://www.runecentral.net/">Home</a></li>
    >> <li id="fi"><a href="
    http://forum.runecentral.net/">Forums</a></li>
    >> <li id="fi"><a href="
    http://chat.runecentral.net/">Chat</a></li>
    >> <li id="fi">Guides
    >>
    >> <li id="si"><a href="/skills.php">Skill
    Guides</a></li>
    >> <li id="si"><a href="/quests.php">Quest
    Guides</a></li>
    >> <li id="si"><a
    href="/minigames.php">Mini Game Guides</a></li>
    >> <li id="si"><a href="/guilds.php">Guild
    Guides</a></li>
    >> <li id="si"><a href="/cities.php">City
    Guides</a></li>
    >> <li id="si"><a
    href="/monsterhunting.php">Monster Hunting
    >> Guides</a></li>
    >> <li id="si"><a
    href="/moneymaking.php">Money Making Guides</a></li>
    >> <li id="si"><a
    href="/miscellaneous.php">Miscellaneous
    Guides</a></li>
    >>
    >> </li>
    >> <li id="fi">Databases
    >>
    >> <li id="si"><a href="/items.php">Item
    Database</a></li>
    >> <li id="si"><a
    href="/monsters.php">Monster Database</a></li>
    >> <li id="si"><a href="/npcs.php">NPC
    Database</a></li>
    >> <li id="si"><a href="/shops.php">Shop
    Database</a></li>
    >>
    >> </li>
    >> <li id="fi">Tools
    >>
    >> <li id="si"><a
    href="/skillcalcs.php">Skill Calculators</a></li>
    >> <li id="si"><a
    href="/skillplanners.php">Skill Planners</a></li>
    >> <li id="si"><a href="/maxhit.php">Max
    Hit Calculator</a></li>
    >> <li id="si"><a
    href="/combatcalc.php">Combat Calculator</a></li>
    >>
    >> </li>
    >> <li id="fi">Maps
    >>
    >> <li id="si"><a
    href="/worldmap.php">Official World Map</a></li>
    >> <li id="si"><a
    href="/dungeons.php">Dungeon Maps</a></li>
    >>
    >> </li>
    >> <li id="fi">Archives
    >> <ul id="nav">
    >> <li id="si"><a
    href="/newsarchive.php">News Archive</a></li>
    >> <li id="si"><a
    href="/pollarchive.php">Poll Archive</a></li>
    >>
    >> </li>
    >> <li id="fi"><a
    href="/contact.php">Contact</a></li>
    >>
    >> </div>
    >>
    >> Now the main CSS code
    >>
    >> .menu ul, li {
    >> margin: 0;
    >> padding: 0;
    >> list-style-type: none;
    >> }
    >> .menu {
    >> text-align: center;
    >> font-size: 14px;
    >> height: 30px;
    >> line-height: 30px;
    >> }
    >> .menu a {
    >> text-decoration: none;
    >> color: #FFFFFF;
    >> }
    >> ul#nav {
    >> width: 100%;
    >> height: 30px;
    >> margin: 0 auto;
    >> }
    >> ul#nav li {
    >> position: relative;
    >> float: left;
    >> }
    >> #fi {
    >> width: 75px;
    >> height: 30px;
    >> cursor: pointer;
    >> }
    >> #si {
    >> width: 170px;
    >> float: left;
    >> height: 25px;
    >> line-height: 25px;
    >> border-right-width: 1px;
    >> border-bottom-width: 1px;
    >> border-left-width: 1px;
    >> border-right-style: solid;
    >> border-bottom-style: solid;
    >> border-left-style: solid;
    >> border-right-color: #000000;
    >> border-bottom-color: #000000;
    >> border-left-color: #000000;
    >> background-color: red;
    >> }
    >> ul#nav li:hover {
    >> background-color:#00FFCC;
    >> }
    >> ul#nav li ul {
    >> display: none;
    >> }
    >> ul#nav li:hover ul {
    >> display: inline;
    >> float: left;
    >> height: auto;
    >> padding: 0;
    >> margin: 0;
    >> text-align: left;
    >> }
    >> ul#nav li:hover ul li {
    >> display: block;
    >> margin: 0;
    >> padding: 0 0 0 5px;
    >> height: 100%;
    >> }
    >> ul#nav li#fi a {
    >> display: block;
    >> height: 100%;
    >> }
    >> ul#nav li#fi:hover {
    >> background-image: url(/img/fixedbar_over.png);
    >> }
    >>
    >> If you need any more code just check the page
    source.
    >>
    >> I know this is quite a lot to ask but I am really
    stuck as I cannot do it
    >> myself so any help would be greatly appreciated.
    >>
    >> Many thanks and regards,
    >>
    >> Perry Roper
    >>
    >
    >

  • Fixed div that floats right works fine in IE but floats left in other browsers

    I have a div that I want to float right and have remain in that position as a user strolls down the screen. I set the position to fixed which works fine in IE8 but when I view it in other browsers (chrome, safari, firefox) the div does stay in position but it floats to the left.
    I believe it's just a simple setting that I'm not familiar with.
    Thanks for your help in advance.

    You can't float a fixed division. Use margins instead.
    http://alt-web.com/DEMOS/CSS2-Sticky-Text.shtml
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • 100% Height div in IE6, Safari

    I am trying to figure out how to have a basic 2-column layout
    with <div>'s that stretch to 100% of the height of the
    browser. It works in NN8, FF, Opera, IE7. It does not work in IE6
    or Safari.
    Previous tips I receivced about this issue involve crazy .js
    hacks, CSS hacks where you repeat background images, and other
    complex/ inefficient solutions. Is this really necessary? Hasn't
    anyone figured out a more straightforward way to trick the
    <div> to be 100% of the height of these browsers?
    Really, all I need is for a left column to be 100% height.
    Thanks!

    Does this link help you at all?
    http://www.reinspire.net/blog/2005/10/11/css_vertical_stretch/
    Regards
    Jos
    "mkonomos" <[email protected]> wrote in
    message
    news:[email protected]...
    >I am trying to figure out how to have a basic 2-column
    layout with <div>'s
    >that
    > stretch to 100% of the height of the browser. It works
    in NN8, FF, Opera,
    > IE7.
    > It does not work in IE6 or Safari.
    >
    > Previous tips I receivced about this issue involve crazy
    .js hacks, CSS
    > hacks
    > where you repeat background images, and other complex/
    inefficient
    > solutions.
    > Is this really necessary? Hasn't anyone figured out a
    more
    > straightforward way
    > to trick the <div> to be 100% of the height of
    these browsers?
    >
    > Really, all I need is for a left column to be 100%
    height.
    >
    > 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=ISO-8859-1" />
    > <title>Untitled Document</title>
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
    > "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >
    >
    > <meta http-equiv="Content-Type" content="text/html;
    charset=ISO-8859-1" />
    > <title>Untitled Document</title>
    > <link href="css/mcg_cvcoe_research.css"
    rel="stylesheet" type="text/css"
    > />
    > <style type="text/css">
    > #wrapper {
    > position: absolute;
    > width: 100%;
    > left: 0px;
    > top: 0px;
    > margin-top: 0px;
    > margin-right: 0px;
    > margin-bottom: 0px;
    > margin-left: 0px;
    > bottom: 0px;
    > height: 100%;
    > }
    > #top_banner {
    > background-color: #003399;
    > background-position: left top;
    > height: 110px;
    > width: 100%;
    > visibility: visible;
    > position: relative;
    > background-image: url(../images/cvcoe_banner.jpg);
    > background-repeat: no-repeat;
    > margin-top: 0px;
    > margin-left: 0px;
    > margin-right: 0px;
    > }
    > #blue_bar_under_banner {
    > background-color: #000033;
    > position: relative;
    > visibility: visible;
    > width: 100%;
    > margin-top: 0px;
    > margin-left: 0px;
    > margin-right: 0px;
    > margin-bottom: 0px;
    > height: 10px;
    > }
    > #global_links_wrapper {
    > background-color: #82A8D9;
    > z-index: 2;
    > }
    > #bottom_half_wrapper {
    > float: left;
    > height: 100%;
    > width: 100%;
    > position: relative;
    > visibility: visible;
    > left: 0px;
    > top: 0px;
    > bottom: 0px;
    > }
    > #left_nav_bar {
    > background-color: #335CAC;
    > position: relative;
    > visibility: visible;
    > width: 10em;
    > margin-left: 0px;
    > margin-top: 0px;
    > float: left;
    > margin-bottom: 0px;
    > padding-top: 10px;
    > display: inline;
    > clear: none;
    > bottom: 0px;
    > height: 100%;
    > }
    > #right_container {
    > position: relative;
    > visibility: visible;
    > height: 100%;
    > margin-top: 0px;
    > margin-left: 10em;
    > clear: none;
    > display: block; background-color:#66FF00;
    > }
    > #page_title {
    > position: relative;
    > visibility: visible;
    > height: 3em;
    > top: 0px;
    > margin-left: 1.87em;
    > margin-top: 0px;
    > background-color:#FFCCCC;
    > width: 95%;
    > }
    > #main_image_container {
    > position: relative;
    > visibility: visible;
    > height: 160px;
    > width: 600px;
    > top: 0em;
    > background-color: #CC99CC;
    > margin: 0px;
    > float: left;
    > bottom: 0em;
    > margin-left: 1.87em;
    > }
    > #text_bar_under_main_image {
    > background-color: #CC9933;
    > position: relative;
    > visibility: visible;
    > height: 2.75em;
    > left: 1.87em;
    > top: 0em;
    > float: left;
    > background-color:#CC9933;
    > margin-left: 1.87em;
    > margin: 0px;
    > width: 95%;
    > }
    > #main_text_content {
    > position: relative;
    > visibility: visible;
    > height: auto;
    > width: 75%;
    > left: 1.87em;
    > top: 0em;
    > float: left;
    > margin-top: 1em; background-color:#00CC99;
    > }
    > #footer_container {
    > border-top-width: 2px;
    > border-top-style: solid;
    > border-top-color: #990000;
    > position: relative;
    > visibility: visible;
    > height: 1em;
    > margin-left: 0em;
    > top: 0em;
    > left: 0em;
    > float: left;
    > padding-left: 1.87em;
    > padding-top: 1em;
    > background-color: #999933;
    > width: 95%;
    > }
    > </style>
    >
    >
    > </head>
    >
    >
    > <body>
    > <div id="wrapper">
    > <div id="top_banner">
    > </div> <!--closes the top_banner-->
    > <div id="blue_bar_under_banner"></div>
    > <div id="global_links_wrapper">Content for id
    "global_links_wrapper"
    > Goes
    > Here</div>
    >
    > <div id="bottom_half_wrapper">
    > <div id="left_nav_bar">Content for id
    "left_nav_bar" Goes Here</div>
    > <div id="right_container">
    > <div id="page_title">Content for id "page_title"
    Goes Here</div>
    > <div id="main_image_container">Content for id
    "main_image_container"
    > Goes
    > Here</div>
    > <div id="text_bar_under_main_image">Content for id
    > "text_bar_under_main_image" Goes Here</div>
    > <div id="main_text_content">Content for id
    "main_text_content" Goes
    > Here</div>
    > <div id="footer_container">Content for id
    "footer_container" Goes
    > Here</div>
    > </div>
    > <!--closes the right_container-->
    > </div>
    > <!--closes the bottom_half_wrapper-->
    > </div>
    > <!--closes the wrapper-->
    > </body>
    > </html>
    >

  • Fixed div in Mobile Safari

    Does any one know of a way to created floating div elements for mobile safari. Safari on the desktop of course supports this, but mobile safari and UIWebView do not seem to. Work arounds and suggestions welcome.
    Thanks in advance for all advice.
    Rakesh

    Yes. I have something along these lines:
    // In CSS file
    .navigation
    background-color: #336699;
    position: fixed;
    top: 80px;
    left: 0;
    height: 50px;
    width: 100%;
    padding: 5px;
    vertical-align: middle;
    // In HTML file
    <div id='navigation' class='navigation'>
    <span id='welcome'><a href='javascript:welcome()'>Welcome</a></span>
    <span class='separator'>|</span>
    <span id='rules'><a href='javascript:rules()'>Rules</a></span>
    <span class='separator'>|</span>
    </div>
    This works fine when I test with desktop Safari but not on the simulator (Safari or UIWebView).
    Thanks for all help.
    Rakesh
    Message was edited by: sptrakesh

  • Why behaviors don't work when there is a previous fixed div in the same page?

    I have an image fixed at the beginning of the page.
    After that, I have a div with images in which I have applied the swap image behavior, but the behavior doesn't work.
    If I change the positioning of my image fixed, so, if that image is in position absolute, relative o whatever (unless fixed), the following divs show the swap image behavior.
    What happens?

    of course, MurraySummers, but it's long, ans some words are in spanish...
    <title>SYNCHRO FACTORY</title>
    <link href="synchrofactory.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
        background-repeat: no-repeat;
        background-color: #000000;
        background-image: url(imagenes/franja_sup_burbujas2.png);
    a:link {
        text-decoration: none;
    a:visited {
        text-decoration: none;
    a:hover {
        text-decoration: none;
    a:active {
        text-decoration: none;
    -->
    </style>
    <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    </head>
    <body onload="MM_preloadImages('imagenes/transpPVP.jpg','imagenes/transpPVP.png')">
    <div id="contenedor">
      <div id="cabecerafija"><img src="imagenes/cabecerafija4.png" width="1280" height="1201" usemap="#Map" border="0" />
        <map name="Map" id="Map">
          <area shape="circle" coords="71,550,48" href="#logo2" />
          <area shape="circle" coords="83,790,40" href="#logo3" />
          <area shape="circle" coords="187,672,40" href="#logo1" />
        </map>
      </div>
      <div id="paginahome">
        <div id="logo1"><img src="imagenes/logo_cel_700px.png" width="700" height="239" /></div>
        <div id="texthome">
          <h1>UN DEPORTE<br />
            UN ESPECTÁCULO</h1>
          <h2>Joyas de sincro. Llévalas, lúcelas. Pasión por la natación sincronizada</h2>
          <br />
          <br />
        </div>
        <div id="galeria"><img src="imagenes/fons_sara_videoclip.jpg" width="1030" height="402" /></div>
      </div>
      <div id="paginatienda">
        <div id="text">
          <div id="logo2"><img src="imagenes/logo_cel_700px.png" width="700" height="239" id="Image2" /></div>
        </div>
        <div id="cuadroproductos">
          <div id="imatge1"><a href="http://www.synchrofactory.com" onmouseover="MM_swapImage('sincro1','','imagenes/transpPVP.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="imagenes/sincro1_provaweb.jpg" width="200" height="140" id="sincro1" /></a></div>
          <div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro2','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro2_provaweb.jpg" width="200" height="140" id="sincro2" /></a></div>
          <div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro3','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro3_provaweb.jpg" width="200" height="140" id="sincro3" /></a></div>
          <div id="imatge1"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro4','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro4_provaweb.jpg" width="200" height="140" id="sincro4" /></a></div>
          <div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro5','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro5_provaweb.jpg" width="200" height="140" id="sincro5" /></a></div>
          <div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro6','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro6_provaweb.jpg" width="200" height="140" id="sincro6" /></a></div>
          <div id="imatge1"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro7','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro1_provaweb.jpg" width="200" height="140" id="sincro7" /></a></div>
          <div id="imatge2"><a href="index2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sincro8','','imagenes/transpPVP.png',1)"><img src="imagenes/sincro2_provaweb.jpg" width="200" height="140" id="sincro8" /></a></div>
          <div id="quadretext">Plata 925 rodiada. Bronce chapado en oro de 2 micras con baño anticadmio y antialérgico según normativa europea vigente. Modelos e ilustraciones patentados. Bla, bla, i requeteblá.</div>
        </div>
      </div>
      <div id="paginacontacto">
        <div id="text">
          <div id="logo3"><img src="imagenes/logo_cel_700px.png" width="700" height="239" /></div>
        </div>
        <div id="contacto">
          <div id="cuadroimagenes">
            <div id="imatge1"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge1"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
            <div id="imatge2"><img src="imagenes/prova_duo140x200.jpg" width="140" height="200" /></div>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>

  • How to fix divs in ff and Netscape?

    this is the test page
    http://tmptw.servers121.com/~fivemr00/html/fmr-concept.html
    have a look with firefox and netscape (and safari)
    Any ideas on what I can do?
    R3

    > If this template is a bad idea do you have any
    suggestions as to
    > another template I can use that offers a drop down
    navigation
    > functionality?
    Check here -
    http://dreamweaverresources.com,
    or here -
    http://www.projectseven.com/
    They are the best in the business, in my opinion.
    > Other than the navigation bar issue are there any other
    overt problems I
    > should
    > know about?
    The navigation bar issues are the killer for me. But the
    layout methods are
    a little strange too.
    > However, how exactly do I 'clear the float befor
    closing'?
    > (i'm a tad new to this)
    Look at the code on the page I linked and see what change I
    made. Google
    "clear float" and see what you find....
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "romeo the 3rd" <[email protected]> wrote in
    message
    news:eof6uu$bo6$[email protected]..
    > Hi Murray
    >
    > Yes that's what I want!
    > However, how exactly do I 'clear the float befor
    closing'?
    > (i'm a tad new to this)
    >
    > I have read before that it is unwise to use the Halo.
    > Other than the navigation bar issue are there any other
    overt problems I
    > should
    > know about? If this template is a bad idea do you have
    any suggestions as
    > to
    > another template I can use that offers a drop down
    navigation
    > functionality?
    >
    > Thanks for yor reply
    > R3
    >

  • Why won't my divs stay fixed in Chrome after using adobe edge?

    Hi, Can someone help me with an Edge problem? I'm using:
    load: "http://cdn.edgecommons.org/an/1.0.0/js/min/EdgeCommons.js",
    complete: function() {
    EC.debug("Commons ready: "+EC.VERSION);
    EC.centerStage(sym);
    EC.Parallax.setup(sym); } });
    to animate a div by scrolling and then using:
    sym.$("Symbol_1").css("position", "fixed"):
    to keep the animated div fixed. It stays fixed  perfectly in Firefox but it doesn't stay fixed in Chrome although the animation works. Also, any page that I've created in Dreamweaver with a fixed div fails to stay fixed in Chrome after bringing it into Edge and then publishing it. Does anyone know about this? Thanks.

    Thanks Zaxist.
    I had to play with what you gave me a little and removed the "#" from symbol and added "sym." to the "$" in two places ending up with this:
    sym.$("body").append(sym.$("Symbol_1").css({"position":"fixed"}));
    Works perfect! Thanks again!

  • Help with floating divs

    Hi All,
    I have given up on the liquid template and now started from scratch with fixed divs.
    My problem now is the floating elements.
    I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
    Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
    I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
    If I am not making sense please let me know
    Any help would be appreciated.
    Thanks in advance
    This is my code and css.
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    </style>
    <script src="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../faarcss.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body,td,th {
        font-family: "Myriad Pro";
    h1,h2,h3,h4,h5,h6 {
        font-family: "Myriad Pro";
        font-weight: bold;
    h1 {
        font-size: 110%;
    h2 {
        font-size: 105%;
    h3 {
        font-size: 100%;
    h4 {
        font-size: 90%;
    h5 {
        font-size: 90%;
    h6 {
        font-size: 90%;
    p  {font-size: 90%;
    </style>
    </head>
    <body onload="KW_doClock()">
    <div id="wrapper">
      <div id="topNav">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Home</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">Finance</a>
            <ul>
              <li><a href="#">Finance Overview</a></li>
              <li><a href="#">More than Just a Mortgage</a></li>
              <li><a href="#">Line Of Credit</a></li>
              <li><a href="#">The Latte Factor</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
            <ul>
              <li><a href="#">The Importance of Insurance</a></li>
              <li><a href="#">Why do we need Insurance</a></li>
              <li><a href="#">Personal Insurance</a></li>
              <li><a href="#">Health Insurance</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
            <ul>
              <li><a href="#">Creating your financial security</a></li>
              <li><a href="#">Superannuation</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Budgeting</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
            <ul>
              <li><a href="#">Accounting</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Taxation</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Property</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="#">Property Archives</a></li>
              <li><a href="#">Property F.A.Q.</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
            <ul>
              <li><a href="#">Estate Planning</a></li>
              <li><a href="#">Solicitors</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="#" class="MenuBarItemSubmenu">Information</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>
              <li><a href="#">Seminars</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">Media</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>
              <li><a href="#">Media</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
            <ul>
              <li><a href="#">Our Point of Difference</a></li>
              <li><a href="#">Our Undertaking</a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Site map</a></li>
              <li><a href="#">Contact FAAR</a></li>
    </ul>
          </li>
        </ul>
      </div>
      <div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
      <div id="name">
      <img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
    <div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
      <param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
      <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></div>
    <div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
      <div id="clock">
        <script language='JavaScript'>
    // Kaosweaver Live Clock Start
    function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
        this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
        this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
    if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
    var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
    // If the clock's size needs adjusting, change the 287 above.
    d=document
    if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
    else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
    else {KW_doClock(1);}
    function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
        d=document;t=new Date();p="";dClock="";    if (d.layers) d.wrapClock.visibility="show";
        tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
        h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
         {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
         {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
        if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
            lc.document.write(dClock);lc.document.close();
        } else if (d.all) {    activeClock.innerHTML = dClock;
        } else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
        if (!a) setTimeout("KW_doClock()",1000);
    function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
      var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
      var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
      var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
      for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
      case "M":if  ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
      str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
      case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
      case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
      case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
    // Kaosweaver Live Clock End
        </script>
        <!-- KW Live Clock -->
      </div>
      <!-- TemplateBeginEditable name="mainContent" -->
      <div id="mainContent">
        <p><strong>Template for Financial &amp; Accounting</strong></p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <!-- TemplateEndEditable -->
      <div id="sidebar">
        <ul id="MenuBar2" class="MenuBarVertical">
          <li class="navMenu"><a href="#">Home</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Finance</a>
            <ul>
              <li><a href="#">Finance Overview</a></li>
              <li><a href="#">More Thank Just a Mortgage</a></li>
              <li><a href="#">Line of Credit</a></li>
              <li><a href="#">The Latte Factor</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
            <ul>
              <li><a href="#">Importance of Insurance</a></li>
              <li><a href="#">Why do we need Insurance</a></li>
              <li><a href="#">Personal Insurance</a></li>
              <li><a href="#">Health Insurance</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
    <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
      <ul>
        <li><a href="#">Creating your financial security</a></li>
        <li><a href="#">Superannuation</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Untitled Item</a></li>
        <li><a href="#">Budgeting</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
      <ul>
        <li><a href="#">Accounting</a></li>
        <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="#" class="MenuBarItemSubmenu">Property</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="#">Property Archives</a></li>
        <li><a href="#">Property F.A.Q.</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
      <ul>
        <li><a href="#">Solicitors</a></li>
        <li><a href="#">Estate Planning</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="#" class="MenuBarItemSubmenu">Information</a>
      <ul>
        <li><a href="#">Seminars</a></li>
        <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="#" class="MenuBarItemSubmenu">Media</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>
        <li><a href="#">Untitled Item</a></li>
      </ul>
    </li>
    <li><a href="#">Site Map</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
      <ul>
        <li><a href="#">Our Point of Difference</a></li>
        <li><a href="#">Our Undertaking</a></li>
        <li><a href="#">Site map</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">CONTACT FAAR</a></li>
      </ul>
    </li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">CONTACT FAAR</a></li>
        </ul>
    </div>
      <div id="footer">
      <p class="copyright">Copyright &copy; Financial And Accounting Resources  2011   
    <p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and   changing every effort has been made to ensure the accuracy of the   information contained within ths website. Financial and Accounting   Resources accepts no responsibility or liability for any loss or damage   whatsoever (either directly or indirectly) to any person arising from   the use or reliance on the information contained in this website.  
    </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID");
    </script>
    </body>
    </html>
    CSS.
    @charset "utf-8";
    /* CSS Document */
    body {
        background-color: #FFF;
        padding: 0px;
        margin-top: 25px;
        text-align: center;
        background-image: url(images/watermark.jpg);
        background-repeat: repeat-y;
        background-position: center;
    html, body {
        margin: 0px;
        padding: 0px;
    #wrapper {
        background-color: #FFF;
        width: 1000px;
        text-align: left;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        position: relative;
    #topNav {
        background-color: #00A0C4;
        width: 1000px;
        padding-top: -25px;
        clear: left;
        float: left;
        padding-bottom: 5px;
    #logo {
        background-color: #FFF;
        height: 230px;
        width: 230px;
        float: left;
        padding-top: 10px;
    #name {
        background-color: #FFF;
        height: 230px;
        width: 300px;
        float: left;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
    #header {
        background-color: #FFF;
        height: 230px;
        width: 450px;
        float: right;
        clear: right;
        padding-top: 10px;
    #motto {
        background-color: #FFF;
        height: 25px;
        width: 1000px;
        float: left;
        text-align: center;
        color: #000;
        font-weight: bold;
        font-size: 110%;
        font-style: italic;
        padding-top: 15px;
    #clock {
        background-color: #FFF;
        height: 30px;
        width: 1000px;
        clear: both;
        float: left;
        font-size: 100%;
        text-align: right;
        font-weight: normal;
        color: #000;
        vertical-align: middle;
        padding-top: 10px;
    #mainContent {
        background-color: #FFF;
        height: auto;
        width: 720px;
        float: right;
        margin-bottom: 10px;
        padding-right: 25px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        background-image: url(images/watermark.jpg);
        background-repeat: repeat-y;
        background-position: center;
        background-attachment: fixed;
        text-align: justify;
    #sidebar {
        background-color: #00A0C4;
        width: 225px;
        clear: left;
        float: left;
        height: auto;
        padding: 10px;
    ul nav {
        background-color: #00A0C4;
        width: 250px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        list-style-position: inside;
        list-style-type: none;
    #footer {
        background-color: #00A0C4;
        height: 100px;
        width: 940px;
        float: left;
        clear: left;
        padding: 10px;
    body,td,th {
        font-family: Arial, Helvetica, sans-serif;
    sidebar.menu {
        font-size: 100%;
        font-weight: bold;
        color: #FFF;
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
        text-decoration: none;
        background: #C6D580;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background: #ADB96E;
        color: #FFF;
        float: left;
    .navMenu {
        font-size: 100%;
        text-align: left;
        padding-right: -10px;
        color: #FFF;
        font-weight: bold;
    .sideNav {
        font-size: 80%;
        text-align: left;
        padding: 10px;
    .copyright {
        font-family: "Myriad Pro";
        font-size: 110%;
        font-weight: bold;
        color: #FFF;
        text-align: center;
    .disclaimer {
        font-size: 75%;
        color: #FFF;
        text-align: left;
    Thank you
    muznik

    The table is still above the text, not on the side like in the image you sent.
    I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
    The code i have now is below... Not sure what I'm doing wrong :/
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <head>
    <title>style.css</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="masthead">
        <div id="logo">
        </div>
        <div id="header">
        </div>
    </div>
    <div id="container">
        <div id="left_col">
          <table width="188" border="1">
          <tr>
            <td>Test 1 </td>
          </tr>
          <tr>
            <td>Test 2 </td>
          </tr>
          <tr>
            <td>Test 3 </td>
          </tr>
          <tr>
            <td>Test 4 </td>
          </tr>
        </table>
        </div>
      <div id="page_content" style="overflow: auto;">
          <p>The Department of the Navy desires a tool for analyzing  the affects of budgetary changes upon Fire and Emergency Services provided upon  Naval Installations throughout the world.   The diversity of these installations suggests that across the board  funding changes may affect each location differently.  This project presents a Fire Loss Model to  support the continued development of the analysis tool.</p>
        </div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

  • IE6 dropping container down

    Hey peeps. Within a wrapper <div> I have a two-column
    layout- a left nav bar <div> and a right container
    <div>. It looks great in Safari, FF, Opera, NN. IE6 causes
    the right container to drop like it's hot. It stays to the right
    when it drops and the top of the container seems perfectly lined up
    with the bottom of the left nav container. Any ideas? Here is the
    code...

    Works alright for me on IE PC 5.5 and up.
    Try the code below. If it works for you (it does for me),
    then maybe
    something else is conflicting with the layout.
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper { position: absolute; width: 100%; left: 0px; top:
    0px;
    height: 100%; margin-top: 0px; margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px; }
    #left_nav_bar { background-color: #335CAC; position:
    relative;
    visibility: visible; height: 100%; width: 10em; margin-left:
    0px;
    margin-top: 0px; float: left; margin-bottom: 0px;
    padding-top: 10px;
    display: inline; }
    #right_container { position: relative; visibility: visible;
    height:
    100%;
    margin-top: 0px; margin-left: 10em; }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="left_nav_bar">test</div>
    <div id="right_container">test
    right</div></div>
    </body>
    </html>
    You cannot lose until you give up !!!
    "mkonomos" <[email protected]> wrote in
    message
    news:erhts1$ila$[email protected]..
    > It doesn't seem to fix it in IE6, though it does work
    better in IE7.
    > MIcrosoft! >:(

  • CSS divs running into each other 4x3 screens but not widescreen

    I am trying to develop a site:
    http://www.poweredupgamers.com.
    Everything looks great on a widescreen monitor, but when I view it
    on older 4x3 monitors the divs run into each other and the spacing
    gets all messed up. This occurs regardless of the resolution the
    monitors are using.
    I thought by setting up margins with % (5% left margin for
    left div, etc.) that the divs would change in size to fill the
    pages regardless of the resolution the monitor is set at. The divs
    do seem to adjust for the resolution, but the monitor format
    appears to be a different issue. Do I need to set fixed div
    positions or widths to fix this issue? If so, how do I set them to
    ensure the page is filled properly (as little blank space as
    possible) regardless of the monitor's resolution?
    Does it have anything to do with fixed sizes for certain
    images inside divs sizes based on % margins?
    Thanks very much for any help!

    Resolution is not the critical issue. Browser viewport width
    is. To make
    your decision you need to have some ideas about the following
    issues -
    1. What is the primary target demographic for this site?
    2. What are the browsing habits of that demographic? Do they
    normally have
    their browser window maximized on the screen?
    3. If they usually have their browser maximized, what is the
    typical screen
    width?
    4. If they usually do NOT have their browser maximized, what
    is the MINIMUM
    screen width in that demographic.
    5. How do I want to build the page?
    a. Fixed width and left aligned?
    b. Fixed width and centering?
    c. Flexible to fill whatever width from left to right?
    d. Flexible (within limits) and left aligned?
    e. Flexible (within limits) and centering?
    As you can see, this decision is probably much more complex
    than you
    thought, and will require that you know quite a bit about
    your intended
    target visitor and their browsing habits.
    If you elect to go with 5a, or 5b, then your decision would
    be - 'what is
    the mimimum browser width I want to support without
    horizontal scrolling?'.
    Once you have determined that minimum supported width, all of
    your decisions
    are made. That's how wide you want your page to be.
    If you elect to go with 5c, then you just build your page
    within a flexible
    container (the simplest example - although an obsolet one -
    would be to use
    a 100% width table to hold the entire page). Be aware that
    pages with
    limited text content can look VERY sparse and empty on wide
    viewports when
    built in this way.
    If you elect to go with 5d, or 5e, then you would add this
    sophistication to
    your decision matrix -
    'what is the greatest width I want to allow the page and its
    contents to
    become?'
    In this case, you would use the CSS styles - 'min-width' and
    'max-width' on
    the primary page container. Just so you'll know, although
    these styles are
    well supported *now*, earlier versions of IE (and some other
    browsers) will
    not support them so reliably.
    So - which is it? 8)
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "juxtafras" <[email protected]> wrote in
    message
    news:[email protected]...
    >I am trying to develop a site:
    http://www.poweredupgamers.com.
    Everything
    > looks great on a widescreen monitor, but when I view it
    on older 4x3
    > monitors
    > the divs run into each other and the spacing gets all
    messed up. This
    > occurs
    > regardless of the resolution the monitors are using.
    >
    > I thought by setting up margins with % (5% left margin
    for left div, etc.)
    > that the divs would change in size to fill the pages
    regardless of the
    > resolution the monitor is set at. The divs do seem to
    adjust for the
    > resolution, but the monitor format appears to be a
    different issue. Do I
    > need
    > to set fixed div positions or widths to fix this issue?
    If so, how do I
    > set
    > them to ensure the page is filled properly (as little
    blank space as
    > possible)
    > regardless of the monitor's resolution?
    >
    > Does it have anything to do with fixed sizes for certain
    images inside
    > divs
    > sizes based on % margins?
    >
    > Thanks very much for any help!
    >

  • Edit Window's Fixed Position Causing Problems

    Once I've selected text to print and click the Edit button, the edit window opens on my primary (left) monitor (I'm using 2 monitors with the browser on my (right) second monitor) UNDER the Taskbar which is positioned at the top of the left monitor.  Because the Edit window is fixed, I can't resize it; can't move it; can't access any of the tools in the window (because they're hidden under the Taskbar)!!
    Why can't the Edit Window "honor" the position of the Taskbar?  At least, allow me to resize or move the window to another position onscreen.

    The web is not yet read for this. I wouldn't use it.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "colinwalton" <[email protected]> wrote in
    message
    news:g3lscq$38e$[email protected]..
    >I have a fixed div that stays centred in the same
    position while the rest
    >of
    > the page scrolls underneath it. The page works fine in
    the browser, yet
    > for
    > some strange reason always displays over to the left in
    Dreamweaver's
    > Design
    > View.
    >
    > If I need to edit the div, I have to temporarily make
    its position
    > Absolute,
    > make the changes, then change it back again.
    >
    > Is this a bug or am I doing something wrong with the
    CSS?
    >
    > Here is the CSS for the div:
    >
    > #topWithLogo {
    > position:fixed;
    > visibility:visible;
    > left:50%;
    > top:0px;
    > width:810px;
    > z-index:30;
    > margin-left: -405px;
    > }
    >

  • Problems with CSS Footer Div

    Problems with CSS
    I am building a new page for my company. I am trying to place the Div Footer at the bottom of the screen. I have placed (i believe) the appropriate information for the CSS.
    The problem is when i minimize the browser the Footer section never leaves the screen and hovers over the other div tags. When I shrink the browser to its maximum the divs fall on top of each other.
    What I would like to know is how to make the Footer div below hide like the other divs but remain at the bottom of the page instead of hovering over the other divs. I have read that I should not apply fixed divs.... is that correct?
    I have applied to the current CSS to the below web page: http://trbla.com/sample.html
    #rhythm {
    width: 607px;
    margin-top: 300px;
    margin-right: auto;
    margin-left: auto;
    *img {
    border: 0;
    #rhythm #goldr {
    width: 215px;
    float: left;
    border: 0;
    #rhythm #trbnew {
    float: left;
    width: 181px;
    border: 0;
    #rhythm #greyr {
    width: 211px;
    float: left;
    border: 0;
    #nav {
    margin-top: 200px;
    width: 607px;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
    clear: both;
    #nav #navonewrap {
    float: left;
    clear: both;
    #nav #navwraptwo {
    float: left;
    width: 175px;
    height: 22px;
    #nav #navwrapthree {
    float: right;
    width: 215px;
    margin-right: -75px;
    #footer {
    bottom: 0px;
    clear: both;
    position: fixed;
    width: 100%;
    #footer #left_footer {
    float: left;
    clear: left;
    overflow: hidden;
    #footer #r_footer {
    float: right;
    Thanks for anyones help thus far,
    Rhythm

    I think it's the way I'm doing the conditional statement.
    'Went through another knowledge-base article that basically had me
    incorporate the conditional attribute into the <xsl:for-each
    select= . . .> statement and it appears to be a better way. I
    also created a xslt fragment and inserted it into a php page rather
    than making the whole thing xslt. I think this helps as well, but
    can't absolutely close the book on this until the server is
    properly configured to transform xslt in php pages.
    Here's the latest
    http://cals.arizona.edu/arizonawet/workshops/current_workshops-trial2.php

  • Trouble changing  background color. Using Dreamweaver CS4

    I can't get to change the back ground color [The greenish grey color] , within a table,  of a web page... Please see http://www.urefillit.com/index2.html  Can use some help here... Also I notice that the foliage background is slow in loading... Any suggestions as to what is causing the loading delay?
    Thanks in advance!!!!!
    Using CS4.........The Code is as follows:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta name="msvalidate.01" content="F33B6715B987C15F0176AAFDA87BE459" />
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
    <title>Urefillit manufactures and markets Octenol, Asian Tiger lure, and Kaboom replacement type products</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="We are focused on providing high-quality products and a commitment to customer satisfaction - We will do everything we can to meet your expectations for the best priced and highest quality mosquito control and Kaboom replacement type products available on the market today" />
    <meta name="Keywords" content="Octenol, Lure, Asian Tiger mosquito lure, Kaboom refills, mosquito magnet mosquito killing machine" />
    <meta name="Robots" content="index, follow" />
    <style type="text/css">
    /*<![CDATA[*/
    body {
            background-image: url(images/SambucusBlackLaceFoliage.jpg);
            background-color: #FFCC66;
    body.c7 {background-attachment:fixed}
    div.c6 {text-align: center}
    p.c5 {font-family: Arial; font-size: 70%; text-align: center}
    span.c4 {font-family: Arial; font-size: 70%}
    span.c3 {font-family: Courier}
    p.c2 {text-align: center}
    span.c1 {font-family: Courier; font-size: 120%}
    /*]]>*/
    .c7 table tr .c11 {
            background-color: #F60;
            font-size: 18px;
    tr .c11 table tr td p {
            font-family: "Times New Roman", Times, serif;
            font-size: 16pt;
    .c7 table tr .c11 table tr td p {
            font-family: "Times New Roman", Times, serif;
            font-size: x-large;
    .c7 table tr .c11 table tr td p {
            font-family: "Times New Roman", Times, serif;
            font-size: 16pt;
    .c7 table tr .c11 #table2 tr th {
            background-color: #0F6;
    /*]]>*/
    </style>
    <script src="file:///C|/Scripts/swfobject_modified.js" type="text/javascript">
    </script>
    <style type="text/css">
    /*<![CDATA[*/
    table.c16 {background-color: #FFD9B3}
    p.c15 {text-autospace:none;}
    th.c14 {background-color: #00FF99}
    td.c13 {background-color: #00FF99}
    th.c12 {background-color: #FF6666}
    h2.c11 {font-size: 120%}
    span.c10 {font-size: 150%}
    span.c9 {text-decoration: underline}
    div.c8 {font-size: 70%; text-align: right}
    td.c7 {background-color: #003399}
    p.c6 {text-decoration: underline}
    table.c5 {background-color: #FFCC66}
    td.c4 {background-color: #FFFFFF}
    div.c3 {text-align: center}
    table.c2 {
            background-color: #0F6;
            font-size: 18px;
    th.c1 {background-color: #FFFFFF}
    .c7 table tr th .c7 {
            color: #008040;
    .c7 table tr th .c7 strong {
            color: #000;
    .c7 table tr th .c7 {
            color: #000;
    .c7 table tr th .c1 strong {
            color: #008000;
    /*]]>*/
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    body {
            background-color: #FFCC33;
    th.c1 {background-color: #FFCC66}
    /*]]>*/
    th.c11 {background-color: #FFFFFF}
    th.c11 {
            background-color: #F93;
            position: relative;
            left: auto;
            top: auto;
            right: auto;
            bottom: auto;
            visibility: visible;
            width: auto;
    .c7 table tr .c11 #table2 tr th .c2 a .c3 strong {
            color: #00F;
    .c7 table tr .c11 #table2 tr td a {
            color: #00F;
    .c7 table tr .c11 #table2 tr td a {
            color: #00F;
    .c7 table tr .c11 #table2 tr td p a {
            color: #00F;
    .BLUE { color: #00F;
    .BLUE { color: #00F;
    .blue { color: #00F;
    .blue { color: #00F;
    p.c1 {text-align: center}
    p.c13 {font-size: 80%; text-align: center}
    p.c71 {margin-right:0in;
    margin-left:0in;
    font-size:9.5pt;
    font-family:"Comic Sans MS";
    color:#000040;
    span.c101 {font-size: 80%}
    span.c12 {font-family: Courier New, Courier, monospace}
    span.c6 {font-family: Arial}
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    img.c16 {border:0;width:88px;height:31px}
    span.c15 {font-size: 120%}
    div.c14 {color: #FFFFFF; font-size: 150%; text-align: center}
    span.c13 {font-size:18.0pt; color:#B90D09;}
    strong.c12 {text-decoration: underline}
    span.c11 {font-family:'Comic Sans MS'; color:red;}
    em.c10 {text-decoration: underline}
    span.c9 {color:red;}
    table.c8 {background-color: #006600}
    td.c7 {background-color: #006600}
    span.c6 {font-size: 150%; text-decoration: underline}
    p.c5 {text-decoration: underline}
    p.c4 {text-align: center; text-decoration: underline}
    p.c3 {text-align: center}
    span.c2 {text-decoration: underline}
    div.c1 {text-align: center}
    /*]]>*/
    .c7 table tr .c11 #table2 tr td p {
            color: #00F;
    .eight {
            color: #F00;
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    <!--
    p.MsoNormal {
    margin-top:0in;
    margin-right:0in;
    margin-bottom:10.0pt;
    margin-left:0in;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    .c7 table tr .c11 .c5 strong u span {
            color: #008080;
    .c7 table tr .c11 p u em {
            color: #00F;
    .c7 table tr .c11 p em u {
            color: #00F;
    .c7 table tr .c11 table tr td .c7.c6 .c10 {
            font-family: "Courier New", Courier, monospace;
    .c7 table tr .c11 table tr td .MsoNormal strong u span {
            color: #00F;
    .c7 table tr .c11 table tr td .MsoNormal strong u span {
            font-family: "Times New Roman", Times, serif;
    .c7 table tr .c11 table tr td p strong u {
            font-family: "Times New Roman", Times, serif;
    .c7 table tr .c11 table tr td p strong u {
            font-family: "Times New Roman", Times, serif;
    .c7 table tr .c11 table tr td p strong u {
            font-size: 16px;
    .c7 table tr .c11 table tr td p {
            font-size: 10px;
    .c7 table tr .c11 table tr td p {
            font-size: 12px;
    .c7 table tr .c11 table tr td p {
            font-size: 12px;
    .c7 table tr .c11 table tr td p {
            font-size: 12px;
    .c7 table tr .c11 table tr td .MsoNormal strong u span {
            color: #000040;
    .c7 table tr .c11 .c7 tbody tr th a {
            color: #000;
    .c7 table tr .c11 #table2 tr td a {
            color: #000;
    .c7 table tr .c11 #table2 tr th .c2 a {
            color: #000;
            font-size: 18px;
    .c7 table tr .c11 #table2 tr th a {
            color: #000;
            font-size: 18px;
    .c7 table tr .c11 p u strong font {
            color: #B80738;
    .c7 table tr .c11 p u strong {
            color: #B80738;
    .c7 table tr .c11 table tr td p strong u {
            font-size: 24px;
    .c7 table tr .c11 table tr td p {
            font-size: 16pt;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 #table2 tr th {
            font-size: 16px;
    .c7 table tr .c11 #table2 tr th p a {
            font-size: 18px;
    .c7 table tr .c11 #table2 tr th p a {
            font-size: 18px;
    .c7 table tr .c11 #table2 tr th p a {
            font-size: 18px;
    .c7 table tr .c11 table tr td .MsoNormal a {
            font-size: 18px;
    .c7 table tr .c11 table tr td .MsoNormal a {
            font-size: 24px;
    .c7 table tr .c11 .MsoNormal span {
            font-size: 24px;
    .c7 table tr .c11 table tr th a {
            font-size: 18pt;
    -->
    /*]]>*/
    </style>
    <style type="text/css">
    /*<![CDATA[*/
    table.c11 {background-color: #0033FF}
    th.c10 {background-color: #8D8D5E}
    span.c9 {font-family:'Times New Roman','serif'; font-size:18pt;}
    p.c8 {line-height: normal; margin-bottom: .0001pt; text-align: center}
    p.c7 {; font-family: 'Times New Roman', 'serif'; font-size: 14pt; text-align: center}
    p.c6 {; font-family: 'Times New Roman', 'serif'; color: #00F; font-size: 18pt; font-style: italic; text-align: center}
    span.c5 {font-style: italic}
    span.c4 {line-height:115%; font-family:'Times New Roman','serif'; font-size:16.0pt;}
    p.c3 {text-align: center}
    strong.c2 {text-decoration: underline}
    th.c1 {background-color: #FFFFFF}
    /*]]>*/
    </style>
    </head>
    <body>
    <![CDATA[*/
    &amp;amp;lt;!--
    #Layer1 {position:absolute;
            width:110px;
            height:34px;
            z-index:1;
            left: 430px;
            top: 1116px;
            visibility: visible;}
    #Layer2 {position:absolute;
            width:170px;
            height:33px;
            z-index:1;
            left: 536px;
            top: 652px;}
    p.c7 {color: #000000; font-family: Arial; font-size: 80%}
    --&amp;amp;gt;
    /*]]>
    */ <script src="file:///C|/Scripts/AC_RunActiveContent.js" type="text/javascript">
    </script>
    <table class="c11" width="1250" border="15" align="center" cellpadding="5">
    <tr>
    <th width="888" height="2254" align="center" valign="top" class="c11 c10" scope="col">
    <p><br />
    <img src="images/webpagepicture.jpg" alt="WEB PAGE HEADER" width="1267" height="212" border="6" align="middle" /><br /></p>
    <table width="1188" border="6" align="center" class="c2" id="table2">
    <tr>
    <th width="143" scope="col">
    <p><a href="OctenolLure.html">Octenol Lure</a></p>
    </th>
    <th width="145" scope="col"><a href="FlowtronTypeLure.html">FlowtronTypeLure</a></th>
    <th width="145" scope="col">
    <p><a href="AsianTiger.html"></a><a href="AsianTiger.html">Asian Tiger Lure</a></p>
    </th>
    <th width="146" scope="col"><a href="Combolure.html">Combo Lure</a><br />
    (Octenol &amp; Lactic Acid)</th>
    <th width="146" scope="col">
    <p><a href="SkeeterVacLure.html">SkeeterVac Lure</a></p>
    </th>
    <th width="145" scope="col">
    <p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Mosquito Magnet</a></p>
    <p class="c2"><a href="mosquitomagnettroubleshootingguide.html">Repair Guide</a></p>
    </th>
    <td width="145" align="center" valign="middle" scope="col"><a href="Kaboom.html">Kaboom</a><a href="/Kaboom.html">Replacement Tablets</a></td>
    <th width="111" height="104" align="center" valign="middle" scope="col"><a href="https://www.paypal.com/us/verified/pal=sales%40urefillit%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" alt="Official PayPal Seal" width="98" height="108" border="0" align="top" /></a><br />
    <br /></th>
    </tr>
    </table>
    <br />
    <table width="282" border="20" align="center" cellpadding="0">
    <tr>
    <th class="c1" width="128" scope="col"><img src="images/flying%20mosquito.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" width="97" height="75" /></th>
    <th class="c1" width="104" scope="col"><a href="#" onClick="window.open('https://www.sitelock.com/verify.php?site=www.urefillit.com','SiteLock','width=600,height=6 00,left=160,top=170');"><img src="//shield.sitelock.com/shield/www.urefillit.com" alt="website security" align="absmiddle" title="SiteLock" /></a></th>
    </tr>
    </table>
    <p><!-- start RatePoint Site Seal - Please, do not change -->
    <!-- end RatePoint Site Seal - Please, do not change -->
    <!-- start RatePoint Subscription Tool - Please, do not change -->
    <!-- end RatePoint Subscription Tool - Please, do not change -->
    ======================================================================================</p >
    <table width="1002" border="0" align="center">
    <tr>
    <td width="996">
    <p class="c3"><strong class="c2">All About Urefillit, LLC</strong></p>
    <p class="c3"><span class="c4">Urefillit, LLC prides itself on quality and consistency of its fine products, which are designed, made and manufactured in the USA. From production to quality control to final shipment, our highly trained team ensures the best quality, and reliable service for our customers. We are focused on providing high-quality products along with a commitment to customer satisfaction. We will do everything we can to meet your expectations for the best priced and highest quality mosquito lures, Kaboom replacement tablets, and bromine tablets available on the market today. With a variety of offerings to choose from, we're sure you will be happy with your purchase. Thank you for visiting our website and if you have any comments or questions, please feel free to contact us. We hope to see you again soon!</span><br /></p>
    <p class="c3"><img src="images/made_in_USA.jpg" width="221" height="228" alt="usa" /><br />
    <br /></p>
    <p class="c3">****************************************************************************** *************<br />
    <br /></p>
    <p class="c6">REFUND POLICY: <span class="c5">Our number one goal is your satisfaction. If our product does not perform as advertised you may return then unused item for a refund. A 25% restocking fee may apply. Buyer pays the return shipping costs. Special and international orders items DO NOT qualify for a refund.</span><br />
    <br /></p>
    <p class="c7"><img src="images/ebay-top-rated-seller-tracking.jpg" width="230" height="158" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&amp;userid=fjp800&amp;ftab=Feedbac kAsSeller"><br />
    Check Out Our E-Bay Feedback</a></p>
    <p class="c7"><br />
    ****************************************************************************************** ********************<br /></p>
    </td>
    </tr>
    </table>
    <table width="1002" border="0" align="center">
    <tr>
    <td width="996">
    <p class="c3"><strong class="c2">Using Octenol to Attract Mosquitoes<br /></strong><br /></p>
    <p class="c3">Octenol is an natural chemical that occurs naturally as a by-product of plants and some animals that eat a lot of vegetable produce. If carbon dioxide is mixed with octenol, it has been found to be an attractant to several mosquito species. There are other insects such as no-see-ums and biting midges that are also attracted to this scent. It has been proven to be a very effective product, especially for no-see-ums.<br />
    <br />
    <img src="images/12137165-cartoon-stop-mosquito.jpg" width="168" height="168" alt="mosquito" /><br />
    <br />
    Octenol is also a pesticide ingredient that is used to attract mosquitoes and biting flies. It does not kill the insects; it only attracts them. It can be used in combination with other products and devices that do kill them once they are successfully attracted to the device. It is important to be aware that non-pest insects are also attracted and destroyed by some of the devices.<br />
    <br />
    If octenol is ingested, there is a possibility for toxicity. It is not, however, harmful in the air to humans, pets, or the environment. It is vitally important that it is kept safely away from children to avoid the possibility of ingesting. Placement of the attractant and device utilized to catch biting insects should be carefully considered. It should be kept safely away from children and pets.<br /></p>
    <p class="c3">To be most effective in mosquito control, the attractant should be placed between the breeding grounds of the mosquito and the area where the people are located. There are range limits that the attractant will reach and this needs to be considered in the placement of the trap as well.<br /></p>
    </td>
    </tr>
    </table>
    <a href="http://www.startlogic.com/join/index.bml?AffID=626972&amp;cid=592'"><br /></a> ==============================================================
    <p><img src="images/americanatural_1875_97577.gif" width="234" height="118" alt="** PLEASE DESCRIBE THIS IMAGE **" /></p>
    <p>Considering buying a mosquito trap? If so, compare the following traps before you make a purchase:</p>
    <a href="http://www.bluerhino.com/BRWEB/Outdoor-Living-Products/Mosquito-Traps.aspx">SkeeterVac</a>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td align="center">
    <div class="c3"><a href="http://www.mosquitomagnet.com/">Mosquito Magnet</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td>
    <div class="c3"><a href="http://www.megacatch.com/">Mega-Catch</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td>
    <div class="c3"><a href="http://koolatrononline.stores.yahoo.net/mosquito-control.html">Koolatron</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <table class="c6" border="0" align="center">
    <tbody>
    <tr>
    <td width="273">
    <div class="c3"><a href="http://www.mosquitocontroltrap.com/comparisons">Mosquito Trap Comparison Chart</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    <p><br /></p>
    <table width="126" border="20" align="center" cellpadding="0">
    <tr>
    <th class="c1" scope="col"><a href="mailto:[email protected]">E-mail Urefillit</a></th>
    </tr>
    </table>
    <br />
    <p class="c8"> </p>
    <p class="c8"><span class="c9">Urefillit, LLC<br />
    800 Shore Drive East<br />
    Oldsmar, Florida 34677-4402</span></p>
    <p class="c8"> </p>
    <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br /></p>
    <p> </p>
    </th>
    </tr>
    </table>
    <script type="text/javascript">
    //<![CDATA[
    <!--
    swfobject.registerObject("FlashID");
    //-->
    //]]>
    </script>
    </body>
    </html>

    Copy & Paste this code into a new, blank document.  SaveAs index3.html.  Feel free to adjust CSS colors and backgrounds as desired.   You'll find plenty of code comments to help you.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>U Refill It</title>
    <meta name="description" content="Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom">
    <!--help for older IE browsers-->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    /**CSS Reset**/
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    img {
        vertical-align: baseline;
        display: block;
        max-width: 100%
    /**layout**/
    body {
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 100%;
        /**CSS gradient**/
    /* Old browsers */
        background: rgb(180,221,180);
        /* FF3.6+ */
        background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* Chrome,Safari4+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(180,221,180,1)), color-stop(17%, rgba(131,199,131,1)), color-stop(33%, rgba(82,177,82,1)), color-stop(67%, rgba(0,138,0,1)), color-stop(83%, rgba(0,87,0,1)), color-stop(100%, rgba(0,36,0,1)));
        /* Chrome10+,Safari5.1+ */
        background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* IE10+ */
        background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
        /* good browsers */
        background: linear-gradient(to bottom, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%);
    /* older IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400', GradientType=0 );
    #wrapper {
        width: 75%;
        margin: 0 auto; /**with width, this is centered**/
        background: #FFC;
        border: 4px groove #F30;
        border-radius: 20px;
    header, footer {
        color: #F30;
        text-align: center;
        font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    header img {
        border-radius: 15px 15px 0 0;
        width: 100%
    /**top menu**/
    nav {
        width: 90%;
        margin: 25px auto;
    nav li {
        list-style: none;
        font-weight: bold;
        display: inline;
    /**menu link styles**/
    nav li a {
        display: inline-block;
        font-weight: bold;
        color: green;
        text-decoration: none;
        padding: 1.15em;
        border: 2px outset green;
    /**menu links on mouse over**/
    nav li a:hover, nav li a:active, nav li a:focus { background: gold }
    /**main content**/
    article { padding: 2% }
    figure img {
        margin: 0 auto;
        border: 3px solid #FFF;
        border-radius: 10px;
        box-shadow: 1px 2px 5px #333;
    /**typography**/
    header h1 {
        font-size: 55px;
        text-shadow: 2px 3px 3px #666;
    header h2 {
        font-size: 18px;
        font-style: oblique
    h3 { margin-top: 20px; }
    p {
        margin-bottom: 18px;
        font-size: 18px;
        color: #000;
    figcaption {
        text-align: center;
        font-style: oblique;
        margin-bottom: 18px;
    </style>
    </head>
    <body>
    <div id="wrapper">
    <header>
    <img src="http://www.urefillit.com/images/webpagepicture.jpg" alt="U Refill It banner">
    <!--this is very good for search engines-->
    <h1>U Refill It</h1>
    <h2>Your source for mosquito magnet and mosquito killing machine replacement products: Octenol, Asian Tiger lure and Kaboom.</h2>
    </header>
    <!--top menu-->
    <nav>
    <ul>
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
    <li><a href="#">Menu6</a></li>
    </ul>
    </nav>
    <!--main content-->
    <article>
    <h3>Article Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <figure>
    <!--insert your image here-->
    <img src="http://placehold.it/500x325" alt="figure">
    <figcaption> Figure Caption </figcaption>
    </figure>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>
    </article>
    <!--begin footer-->
    <footer>
    <small>© 2014 Your Site Name. All Rights Reserved</small> </footer>
    <!--end wrapper--> </div>
    </body>
    </html>
    Nancy O.

  • 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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Naamloos document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <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>
    <!--[if lt IE 7 ]>
    <link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <!--ZOOMSTOP-->
    <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&amp;A.html">C &amp; 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>
    <!--ZOOMRESTART-->
    <div id="ie6-container-wrap" >
    <div id="container">   
            <!-- TemplateBeginEditable name="EditRegion1" -->
         <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>
    <!-- TemplateEndEditable -->
        </div>
        <div class="clearfix:after"> </div>
      </div>
      <!--ZOOMSTOP-->
    <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">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    //-->
    </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"><!-- InstanceBegin template="/Templates/Naamloos-2.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Third Party</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <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>
    <!--[if lt IE 7 ]>
    <link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <!--ZOOMSTOP-->
    <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&amp;A.html">C &amp; 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>
    <!--ZOOMRESTART-->
    <div id="ie6-container-wrap" >
    <div id="container">   
            <!-- InstanceBeginEditable name="EditRegion1" -->
    <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>
    <!-- InstanceEndEditable -->
        </div>
        <div class="clearfix:after"> </div>
      </div>
      <!--ZOOMSTOP-->
    <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">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    //-->
    </script>
    </body>
    <!-- InstanceEnd --></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;

Maybe you are looking for