3 Replies Latest reply on Mar 31, 2010 6:38 AM by WRobN1

    Spry, Mousover-Buttons and Email-Form problem. Site is 100% error free.

    WRobN1 Level 1

      My site: http://www.wientjesvoegwerk.nl/

       

      Its xhtml1.0 and css validated.

       

      I have a few problems however.

       

      This was how i did it first:

      <li class="TabbedPanelsTab" tabindex="0">
                <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
                <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
                <td style="padding-right:0px" title ="Home">
              <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(../Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
                </tr></table>
                </li>
      

       

      As you see i use Spry tabbed panels. In a tab i put code wich shows a button with mouse over.

      Changing the code so my site would be 100% validated resulted in a broken button.

      The button works but loses its mouseover function.

       

      This is it now:

      <li class="TabbedPanelsTab">
              <table id="THome" >
                <tr>
                  <td style="padding-right:0px" title ="Home"><a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/>
                  </a></td>
                </tr>
              </table>
            </li>
      

       

      I tried everything. When using the code above the validator has errors, when using the one below, i lose mouseover...

      The validator says <style> tag isnt allowed.

       

      How do i solve this problem? I hope someone can help me out...

       

       

      Also i have another problem.

      I searched for safe email forms and hit this site: http://www.webbyzone.com/2010/01/10/make-xajax-phpmailer-contact-forms-work/

       

      It looks pro but i cant get it working. A little help would be appreciated...

       

      And i cant get my footer down to the bottom since i used Spry. Any help here also would be nice.

       

      xhtml site:

      
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      
      <head>
           <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
           <title>Wientjes Voegwerk &amp; Renovatie - Home</title>
          
          <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
          <link href="CSS/Style.css" rel="stylesheet" type="text/css" />
               
           <meta http-equiv="Content-Language" content="NL" />
           <meta http-equiv="imagetoolbar" content="no" />
           <meta name="MSSmartTagsPreventParsing" content="true" />
           
          <meta name="description" content="Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie. Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie. Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!"/>
           
          <meta name="keywords" content="Voegwerk, Renovatie, Reinigen, Impregneren, Muur, Voegen, Steen, Woning, Garage, Schoorsteen, Bedrijf, Gevel, Wientjes, Uitslijten, Kappen, Fundering, Vorstschade, Metselen, Metselwerk, Vocht" />
           
          <meta name="author" content="Rob Nijlaan" />
          
       
          
      </head>
      
      <body>
      
      <div id="WContainer">
      
             <div id="WHeader" align="center">
               <img src="Pictures/VoegenRenLos.png" width="540" height="58" alt="Voeg en Renovatiebedrijf" /><br />
          <img src="Pictures/WientLogo.png" width="600" height="136" alt="Wientjes Voegwerk &amp; Renovatie" /></div>
          
           <div id="TabbedPanels1" class="VTabbedPanels">
             <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab">
              <table id="THome" >
                <tr>
                  <td style="padding-right:0px" title ="Home"><a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/>
                  </a></td>
                </tr>
              </table>
            </li>
            <li class="TabbedPanelsTab" >
              <table id="TInfo" >
                <tr>
                  <td style="padding-right:0px" title ="Info"><a href="javascript:TabbedPanels1.showPanel(2);" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/>
                  </a></td>
                </tr>
              </table>
            </li>
            <li class="TabbedPanelsTab" >
              <table id="TGallerij" >
                <tr>
                  <td style="padding-right:0px" title ="Gallerij"><a href="javascript:TabbedPanels1.showPanel(3);" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/>
                  </a></td>
                </tr>
              </table>
            </li>
            <li class="TabbedPanelsTab" >
              <table id="TContact" >
                <tr>
                  <td style="padding-right:0px" title ="Contact"><a href="javascript:TabbedPanels1.showPanel(4);" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/>
                  </a></td>
                </tr>
              </table>
            </li>
            <li>
              <p class="footer"><br />
                <br />
                <br />
                <br />
                <br />
                Wientjes Voegwerk en Renovatie<br />
                <br />
                tel; 06 - 221 464 28<br />
                <br />
                kvk; <br />
                <br />
                <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px"
              src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
              alt="Valide CSS!" /> </a><br />
              <a href="http://validator.w3.org/check?uri=referer"><img
              src="http://www.w3.org/Icons/valid-xhtml10-blue"
              alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p>
             </li>
            </ul>
             <div class="TabbedPanelsContentGroup">
        
      <div class="TabbedPanelsContent" id="Home">
                      
                         <h1>Welkom Bij Wientjes Voegwerk en Renovatie!</h1>
            <p>Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie.<br />Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie.<br />Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!<br /><br />Wientjes, J </p>
            <h2>Voegen/Renovatie/Reinigen &amp; Impregneren. </h2>
            
      <table border="0" align="right"><tr><td>
      <a href="Foto/Foto's telefoon1 075.jpg"><img src="Foto/Foto's telefoon1 075.jpg" alt="Muur met Steiger" width="379" height="354" align="right" />
      </a></td></tr><tr><td><center>klik op de foto voor een groter voorbeeld</center></td></tr></table>
      
        <p>Vaak wordt er bij het kopen van een woning weinig aandacht besteed aan het voegwerk. Er wordt alleen gekeken naar hoe een woning is gebouwd.<br />Een voeg bepaalt echter wel het aanzicht van een woning. Van een goed aangebrachte voeg heeft u uiteraard veel langer plezier. <br />Renovatie bestaat voornamelijk uit het uitslijpen of kappen van het oude voegwerk. Waar nodig het verwijderen van scheuren die zijn ontstaan door:</p>
         
        <ul>
          <li>
            <p>
              Verzakking van de fundering 
            </p>
          </li>
          <li>
            <p>
              Slecht voegwerk
            </p>
          </li>
          <li>
            <p>
              Vorstschade
            </p>
          </li>
          <li>
            <p>
              Doorhangen of ontbreken van ...
            </p>
          </li>
        </ul>
        
        <p>Bij gevelvervuiling van uw woning kunnen er problemen ontstaan die het wooncomfort negatief kunnen beïnvloeden.<br />Wanneer de voeg is aangetast of het metselwerk is door vorstschade beschadigd, kunnen er vochtproblemen in huis ontstaan.<br />Mos en alg hechten zich goed aan beschadigde stenen en voegwerk. <br /><br />Door middel van impregnering wordt een woning waterafstotend gemaakt.<br />Dit betekent dat het voeg- en metstelwerk jarenlang wordt beschermd tegen weersinvloeden. <br />Ook is impregnering beter voor de isolatie van de woning.</p>
        
      <p align="left"><img src="Pictures/TelnrLos.png" width="525" height="49" align="top" alt="Telefoonnummer"/></p>
      
                               </div>
          
                         <div class="TabbedPanelsContent" id="Info">
                      test2
                         </div>
          
                         <div class="TabbedPanelsContent" id="Gallerij">
                      test3
                         </div>
          
                              <div class="TabbedPanelsContent" id="Contact">
                      <?php echo '<div id="contact_result">'.$form.'</div>'; ?>
                      </div>
          </div>
          </div>
          <script type="text/javascript">
      <!--
      var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
      //-->
      </script>
          
           
              
           <div id="WFooter" align="center">
          
               <p class="footer">Wientjes Voegwerk &amp; Renovatie     ,    03- '02         »        Site by ;    <b>Rob Nijlaan</b>        »        Problemen of vragen over deze site?    -    <b><a href="mailto:Site@WientjesVoegwerk.nl">Site@WientjesVoegwerk.nl</a></b></p>
           </div>
      
      </div>
      
      </body>
      </html>
      
      
      

       

      CSS script:

      @charset "utf-8";
      /* CSS Document */
      
      html,body {
           height:100%; /* needed for container min-height */
           width:100%;
           background: #FFFFFF url(../Pictures/Background.png) no-repeat center;
           color:#000;
      }
      
      h1{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
      font-weight: bold;
      font-style:italic;
      font-size: 230%;
      }
      
      h2{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color: #595999;
      font-weight: bold;
      font-size: 180%;
      }
      
      p{
      font-family: "Verdana", verdana, arial, helvetica, sans-serif;
      font-size: 100%;
      }
      
      .footer{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
      font-size: 70%;
      text-align:center;
      }
      
      
      
      #WContainer{
           position:absolute;
           margin:0 auto; 
           width:80%;
           background:none;
           height:auto;
           height:100%; 
           min-height:100%;
           margin-left: 10%;
           margin-right: 10%;
      }
      
      
      #WHeader{
           height: 195px;
           width:100%;
           margin-bottom: 10px;
           margin-left: 0px;
           margin-right: 10px;
           }
           
      .VTabbedPanels .TabbedPanelsTabGroup {
           float: left;
           width: 172px;
           height: 75px;
           background-color: #FFF;
           position: relative;
           border-top: solid 0px #FFF;
           border-right: solid 0px #FFF;
           border-left: solid 0px #FFF;
           border-bottom: solid 0px #FFF;
      }
      
      .VTabbedPanels .TabbedPanelsTab {
           float: none;
           margin: 0px;
           border-top: none;
           border-left: none;
           border-right: none;
      }
      
      .VTabbedPanels .TabbedPanelsContentGroup {
           margin-left: 220px;
           width: auto;
           height: auto;
           min-height:50%;
           max-width:83%;
           min-width:500px;
           padding: 20px 20px 20px 20px;
           border-left: solid 1px #999;
           border-bottom: solid 2px #999;
           border-top: solid 1px #999;
           border-right: solid 2px #999;
      }
      
      #WFooter{
           clear:both;
           height: 30px;
           margin-top:1px;
      }
      
      ul
      {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      }
      li
      {
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      }