8 Replies Latest reply on Oct 22, 2015 1:50 PM by fjp284

    Moving image below spry menue

    fjp284

      When I move my mouse accross my spry menu an image just below it moves as it follows by courser.  What can I do to keep the image stationary/ I tried putting the image within a table of a separate div tag.. Didn't work... My site is http://urefillit.com/Home.html Any suggestions will be appreciated. Thank you

       

      Moving image.jpg

        • 1. Re: Moving image below spry menue
          Nancy OShea Adobe Community Professional & MVP

          CAUSE: You have no float clearing.

          SOLUTION: After your menu code, where you have this:

           

          </ul>

                  <p> </p>

                  <p> </p>

           

          Replace it with this:

           

          </ul>

          <div style="clear:both; display:table; visibility:hidden"></div>

                  <p> </p>

                  <p> </p>


          That will clear floats on the menu above and bring content back into the normal document flow.

           

          Nancy O.

          • 2. Re: Moving image below spry menue
            fjp284 Level 1

            Hi Nancy,

             

            I could not find " <div style="clear:both; display:table; visibility:hidden""></div>". I even copied all the code , pasted it into notepad and did a document search and it was not found. I looked in the source code and the spry menu bar horizontal.css

             

            Can you tell me where the code is.. What line?

             

            Thanks,

            Frank

            <!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" />
            <meta name="msvalidate.01" content="F33B6715B987C15F0176AAFDA87BE459" />
            <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
            <title>Mosquito Bait</title>
            <link rel="Shortcut Icon" href="images/mosquito.ico" />
            <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, sweetscent, bioagents, Lure, Asian Tiger mosquito lure, skeetervac, Kaboom refills, mosquito magnet mosquito killing machine, meglio di rasatura, shaving cream, shave cream, brushless shave cream, shaving cream for women" />
            <meta name="Robots" content="index,nofollow" />
            <style type="text/css">
            body,td,th {
            font-family: "Times New Roman", Times, serif;
            font-size: 12px;
            color: #000;
            }
            body {
            background-color: #C60;
            background-image: url(images/SambucusBlackLaceFoliage.jpg);
            background-repeat: repeat;
            }
            </style>
            <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
            <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
            <style type="text/css">
            <!--
            p.MsoNormal {
            margin-top:0in;
            margin-right:0in;
            margin-bottom:10.0pt;
            margin-left:0in;
            line-height:115%;
            font-size:13.5pt;
            font-family:"Times New Roman","serif";
            color:black;
            font-weight:bold;
            }
            .MsoNormal a {
            color: #DA0C35;
            }
            .MsoNormal span {
            color: #2828FF;
            }
            .MsoNormal span {
            color: #000;
            }
            .MsoNormal a {
            color: #2828FF;
            }
            -->
            </style>
            </head>

            <body>
            <div align="center">
              <table width="1200" border="5">
                <tr>
                  <th height="1387" align="center" valign="top" bgcolor="#FF6600" scope="col"><p><img src="images/webpagepicture.jpg" width="1200" height="158" alt="banner" /></p>
                    <div>
                      <div>          </div>
                    </div>
                    <ul id="MenuBar1" class="MenuBarHorizontal">
                      <li><a href="OctenolLure.html">Mosquito Magnet  Bait</a>          </li>
                      <li><a href="FlowtronTypeLure.html">Flowtron Mosquito Bait</a></li>
                      <li><a href="AsianTiger.html">Asian Tiger Mosquito Bait</a>          </li>
                      <li><a href="Combolure.html">Combo Mosquito Lure</a></li>
                      <li><a href="SkeeterVacLure.html">SkeeterVac FineTune Bait</a></li>
                      <li><a href="Sweetscent.html">Bioagent Sweetscent Lure</a></li>
                      <li><a href="bromine.html">1 Inch Bromine Tablets</a></li>
                      <li><a href="Kaboom.html">Kaboom Type Toilet Tablets </a></li>
                      <li><a href="Meglia_Di_Rasatura.html">Meglia_Di_Rasatura Shaving Cream</a></li>
                    </ul>
                    <p> </p>
                    <p> </p>
                    <div>
                      <table width="101" border="5" align="center">
                        <tr>
                          <th scope="col"><img src="images/sitelock.jpg" alt="sitelock" width="101" height="63" align="absmiddle" /></th>
                        </tr>
                      </table>
                    </div>
                    <div>
                      <p align="center" style="text-align:center;"> </p>
                      <p align="center" style="text-align:center;"><span style="line-height:115%; font-size:16.0pt; ">&quot;<u>About Urefillit, LLC</u>&quot;</span></p>
                      <p><span style="font-size:16.0pt; "> </span></p>
                      <p><span style="font-size:16.0pt; ">Urefillit,  LLC prides itself on quality and consistency of its superior Mosquito bait OEM replacement products and Meglia Di Rasatura shaving cream,  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></p>
                      <p> </p>
                      <p><span style="line-height:115%; font-size:16.0pt; ">Check Out  Our E-Bay Feedback!</span></p>
                      <p><span style="text-align:center; ; font-family: 'Times New Roman', 'serif'; font-size: 14pt"><img src="../images/ebay-top-rated-seller-tracking.jpg" alt="e-bay top seller" width="101" height="80" /></span><span style="text-align:center;"><img src="../images/made_in_USA.jpg" width="101" height="80" alt="usa" /></span></p>
                      <p> </p>
                      <p><span style="font-size:16.0pt; ">REFUND  POLICY: 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 10%  restocking fee may apply. Buyer pays the return shipping costs. </span></p>
                      <p><span style="font-size:16.0pt; "> </span></p>
                    </div>
                    <div>
                      <p> </p>
                      <p><a href="http://www.mosquitocontroltrap.com/mosquito-trap-comparisons.html" target="_self">Mosquito Traps Comparison Chart</a></p>
                      <p>NOTE: The best mosquito traps have a combination of Bait, CO2, Heat and a Fan Vacuum!</p>
                      <p><span style="font-size:16.0pt; "> </span><span style="font-size:16.0pt; "> </span><a href="mailto:sales@urefillit.com">CONTACT US!</a></p>
                    </div>
                    <div>
                      <p><img src="../images/americanatural_1875_97577.gif" alt="earth friendly" width="234" height="118" /></p>
                    </div>
                    <div><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>
              </p></div>
                  <p> </p></th>
                </tr>
              </table>
            </div>
            <script type="text/javascript">
            var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
            </script>
            </body>
            </html>

            • 3. Re: Moving image below spry menue
              Nancy OShea Adobe Community Professional & MVP

              My bad copy & paste.  Look for closing </ul> tag at the end of your menu followed by 2 empty paragraphs.

               

                 <li><a href="Meglia_Di_Rasatura.html">Meglia_Di_Rasatura Shaving Cream</a></li>

                      </ul>

                      <p> </p>

                      <p> </p>

              • 4. Re: Moving image below spry menue
                fjp284 Level 1

                I made the change, but I still have the problem.

                 

                Changes as follows:

                <li><a href="Combolure.html">Combo Mosquito Lure</a></li>

                          <li><a href="SkeeterVacLure.html">SkeeterVac FineTune Bait</a></li>

                          <li><a href="Sweetscent.html">Bioagent Sweetscent Lure</a></li>

                          <li><a href="bromine.html">1 Inch Bromine Tablets</a></li>

                          <li><a href="Kaboom.html">Kaboom Type Toilet Tablets </a></li>

                          <li><a href="Meglia_Di_Rasatura.html">Meglia_Di_Rasatura Shaving Cream</a></li>

                        </ul>

                <div>

                          <p align="center" style="text-align:center;"> </p>

                • 5. Re: Moving image below spry menue
                  fjp284 Level 1

                  Could it have something to do with the div style?  If so, how can I change it?  Thanks

                  • 6. Re: Moving image below spry menue
                    Nancy OShea Adobe Community Professional & MVP

                    OK.  Let's try it again from the top.  Scroll down to where you see this in Code View.

                     

                    <li><a href="Meglia_Di_Rasatura.html">Meglia_Di_Rasatura Shaving Cream</a></li>

                            </ul>

                            <p> </p>

                            <p> </p>

                            <div>

                     

                    Now replace that with this:

                     

                    <li><a href="Meglia_Di_Rasatura.html">Meglia_Di_Rasatura Shaving Cream</a></li>

                            </ul>

                    <!--this is a float clearing-->

                    <div style="clear:both; display:table; visibility:hidden"></div>

                            <div>

                     

                    You might also want to check the rest of your code and fix any reported errors.

                    HTML - http://validator.w3.org/

                     

                    Nancy O.

                    • 7. Re: Moving image below spry menue
                      fjp284 Level 1

                      It worked!!!!  Thank you sooooo much for your assistance!