Problem with double images when I move the cursor over the images...

5 replies
  • WEB DESIGN
  • |
Hi! I'm currently creating a sales page, but when I move the cursor over the images, the image shows on the side of the image.

Here is a screenshoot of it:




How do I solve it?



Thanks,

Jimmy
#cursor #double #images #move #problem
  • Profile picture of the author Michael Meaney
    It's most likely a problem with your CSS or JS.. hard to fix without seeing the code.
    {{ DiscussionBoard.errors[5197816].message }}
    • Profile picture of the author taskemann
      Here is the CSS code. I don't have any javascript code on the sales page.

      ----------------------------------------------------------------------

      ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,bl ockquote,fieldset,input{
      margin:0;
      padding:0;
      }
      ul{
      list-style:none;
      }
      fieldset{
      border:0;
      }
      a img{
      border:0;
      }
      .clear{
      clear:both;
      }

      body {
      background: url(bodybg.jpg);
      font-family: arial, sans-serif;
      font-size:12px;
      color:#666666;
      margin:0;
      padding:0;
      }

      #container{
      width: 100%;
      background: url(wrapperbg.jpg) top repeat-x;
      }

      a{
      color: #003399;
      text-decoration: none;
      }
      p {
      line-height: 170%;
      color: #666666;
      font-size: 13px;
      padding: 5px 0px 5px 0px;
      }
      h1 {
      font-size:30px;
      font-weight:bold;
      color:#272e34;
      line-height:1.5;
      padding: 5px 0px 5px 0px;
      }
      h2 {
      font-family: arial, sans-serif;
      font-size:24px;
      color:#000;
      line-height:1.5;
      padding: 5px 0px 5px 0px;
      }
      #wrapper {
      width:988px;
      margin:0pt auto;
      }

      #navigation{
      width: 960px;
      height: 70px;
      padding: 0px 10px 0px 14px;
      text-align:right;
      }

      .title{
      padding: 0;
      height: 70px;
      font-size: 24px;
      float: left;
      margin-right: 20px;
      }

      .title, .title a {
      color: #fff;
      }

      #navigation ul{
      display: inline;
      }

      #navigation li{
      display: inline;
      }

      #navigation li a{
      display: inline-block;
      white-space: nowrap;
      height: 44px;
      padding: 25px 19px 0px 19px;
      color: #fff;
      font-weight: bold;
      font-size: 12px;
      text-decoration: none;
      }

      #navigation li a:hover{
      color: #000000;
      padding: 25px 18px 0px 19px;
      border-right: 1px solid #020201;
      background: #ffcc00;
      text-decoration: none;
      }

      #navigation li#active a{
      color: #000000;
      padding: 25px 18px 0px 19px;
      border-right: 1px solid #020201;
      background: #ffcc00;
      }

      #header{
      width: 960px;
      height: 240px;
      margin: 0px 14px;
      }

      .weebly_header{
      background: url(cust_headerImg.jpg) no-repeat;
      }


      #weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 1px 0px 0px 0px; }
      #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
      #weebly-menus .weebly-menu li { float: left; clear: left; width: 163px; text-align: left; }
      #weebly-menus .weebly-menu li a { position: relative; display: block; width: 100%; background: #000; border-top: none; border-bottom: 1px solid #999; border-right: none; border-left: none; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 5px 6px 5px 12px; color: #fff; }
      #weebly-menus .weebly-menu li a:hover { background: #ffcc00; color: #000000; }

      #content{
      width: 910px;
      height:auto !important;
      min-height:400px;
      float: left;
      padding: 15px 39px 35px 39px;
      }

      #contenttop{
      width: 988px;
      float: left;
      background: url(contentbg.jpg) repeat-y;
      }
      #contentbtm{
      width: 988px;
      float: left;
      padding: 0px 0px 10px 0px;
      background: url(contentbtm.jpg) bottom no-repeat;
      }

      #content a{
      color: #003399;
      font-weight: bold;
      text-decoration: none;
      }

      #footer{
      width: 950px;
      color: #333333;
      font-size: 14px;
      clear: both;
      padding: 17px 24px 20px 14px;
      }

      ----------------------------------------------------------------------
      {{ DiscussionBoard.errors[5198105].message }}
  • Profile picture of the author taskemann
    Here is also the HTML code for the images:

    <div ><div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
    <a>
    <img src="uploads/5/0/5/6/5056050/1001526_orig.png" alt="" style="width:100%;max-width:708px" />
    </a>
    <div style="display:block;font-size:90%"></div>
    </div></div>
    {{ DiscussionBoard.errors[5198231].message }}
  • Profile picture of the author taskemann
    I figured it out. I had to change the HTML code style="width:100%;max-width:708px" to style="width:auto;max-width:100%".

    Thanks anyway!
    {{ DiscussionBoard.errors[5198260].message }}
  • Profile picture of the author Michael Meaney
    Nice one man! Beat me to it by several hours.
    {{ DiscussionBoard.errors[5201174].message }}

Trending Topics