12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Need Help! How to take out the gap between images in Kompozer

by kelvintang
10 replies
  • WEB DESIGN
    • |
I am using kompozer to create my mobile website. There are always a gap in between two images. it look my website look not professional.

I attached a screenshot and hope someone can tell how to take out the gap

Attachment 14252

thanks
#gap #image #images #kompozer
  • Profile picture of the author ronc0011
    It would help if you could show the code
    {{ DiscussionBoard.errors[6698670].message }}
    • Profile picture of the author kelvintang
      I did not use any CSS, just a plain html code. here is my code.

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">
      <title>A good Title</title>
      <style type="text/css">
      <!--
      * {
      margin:0;
      font-family:sans-serif;
      }
      body,select,input {
      font-size:11pt;
      font-size:medium;
      }
      p {
      margin: .7em 0;
      padding-left: 5px;padding-right: 5px;
      }
      .logo {
      display:block;
      width:100%;
      }
      </style>
      </head>
      <img style="width: 320px; height: 35px;" class="v1col"
      alt="home" src="images/home.gif"><br>
      <img style="width: 320px; height: 35px;" class="v1col"
      alt="testimonial" src="images/testimonial.gif">
      <br>
      <a href="contact%20us.html"><img
      style="border: 0px solid ; width: 320px; height: 35px;"
      class="v1col" alt="contactus" src="images/contactus.gif"></a>
      </body>
      </html>

      thanks
      Signature
      Professional Kindle Cover Designer
      {{ DiscussionBoard.errors[6698706].message }}
      • Profile picture of the author ronc0011
        Well you are calling a class on your img tag but I don't see where the class is defined. In any event you might find where the class v1col is defined and add a margin-bottom attrabute with a negative or zero "0" value
        {{ DiscussionBoard.errors[6699085].message }}
  • Profile picture of the author tryinhere
    <img style="width: 320px; height: 35px;" class="v1col"
    alt="home" src="images/home.gif">
    <br>
    <img style="width: 320px; height: 35px;" class="v1col"
    alt="testimonial" src="images/testimonial.gif">
    <br>
    <a href="contact%20us.html"><img
    style="border: 0px solid ; width: 320px; height: 35px;"
    class="v1col" alt="contactus" src="images/contactus.gif"></a>

    remove
    Signature
    | > Choosing to go off the grid for a while to focus on family, work and life in general. Have a great 2020 < |
    {{ DiscussionBoard.errors[6698733].message }}
    • Profile picture of the author kelvintang
      Originally Posted by tryinhere View Post

      <img style="width: 320px; height: 35px;" class="v1col"
      alt="home" src="images/home.gif">
      <br>
      <img style="width: 320px; height: 35px;" class="v1col"
      alt="testimonial" src="images/testimonial.gif">
      <br>
      <a href="contact%20us.html"><img
      style="border: 0px solid ; width: 320px; height: 35px;"
      class="v1col" alt="contactus" src="images/contactus.gif"></a>

      remove
      Hi,
      Thanks for the help. After i remove the <br>, the are still a gap between the two image.
      Signature
      Professional Kindle Cover Designer
      {{ DiscussionBoard.errors[6698946].message }}
      • Profile picture of the author tryinhere
        Originally Posted by kelvintang View Post

        Hi,
        Thanks for the help. After i remove the <br>, the are still a gap between the two image.
        lots of suggestions, some others may be to set your border to 0 and lastly is there any white border in the image itself.


        EDIT, ok my error on the br removal ( i should have tested ) thats done now it was the 0 border as below / try that

        <img class="v1col" border="0" alt="home" width="320" height="35" src="images/home.gif" /><br />
        <img class="v1col" border="0" alt="testimonial" width="320" height="35" src="images/testimonial.gif" /><br />
        <a href="contact%20us.html"><img class="v1col" border="0" alt="contactus" width="320" height="35" src="images/contactus.gif" /></a>
        Signature
        | > Choosing to go off the grid for a while to focus on family, work and life in general. Have a great 2020 < |
        {{ DiscussionBoard.errors[6700901].message }}
  • Profile picture of the author jaasmit
    Without having any idea about your code it can not be possible to say something about it.
    Share the code with us.
    {{ DiscussionBoard.errors[6698743].message }}
    • Profile picture of the author kelvintang
      Originally Posted by jaasmit View Post

      Without having any idea about your code it can not be possible to say something about it.
      Share the code with us.
      Hi, I paste the code at the post above. There are all the code that I use.
      I did not use any CSS or script. just a plain HTML code.

      Thanks
      Signature
      Professional Kindle Cover Designer
      {{ DiscussionBoard.errors[6698954].message }}
  • Profile picture of the author RexMapes
    If you are viewing this in your browser window, make sure you clear your browser cache before trying to view your changes. If you don't you may still be looking at the original instead of the revision.
    {{ DiscussionBoard.errors[6698995].message }}
  • Profile picture of the author jamaks
    Hi, an image is an inline element which is why you will always have the gap there. Add to your style block img{display:block;} to remove the gap. Also I note that there is no <body> start tag although you have the end tag. Jim
    {{ DiscussionBoard.errors[6700035].message }}

Trending Topics