Spacing Between Image.

Discussion in 'CSS' started by KianBoon, Apr 1, 2012.

  1. #1
    This problem has been bugging me for 2 days now and I have difficulties removing the spacing between 2 of the image.

    CSS
    table tr td{
    border: 0px solid black;
    padding: 0;
    border-collapse: collapse;
    margin: 0;
    }
    
    .dropv, .dropv ul {padding: 0; margin: 0; list-style: none;list-style-type: none;}
    .dropv a {display: inline; width: 170px;list-style-type: none;}
    .dropv li {float: left; padding: 0px 8px 2px 0px;list-style-type: none;}  /* all list items */
    .dropv li ul {position: absolute; background: #46558a;opacity:0.8;
    filter:alpha(opacity=80); padding: 0px 0px 0px 4px; width: 170px; left: -9999px;list-style-type: none;} /* second-level lists */
    .dropv li:hover ul {left: auto;list-style-type: none; } /* nest list under hovered list items */
    .dropv li ul li a {color: #ffffff; text-decoration: none; display: block;list-style-type: none;}
    .dropv li ul li a:hover {background:#272364;opacity:0.9;
    filter:alpha(opacity=90);list-style-type: none;}
    Code (markup):
    Body
    <table>
    <tbody>
    <tr>
    <td><ul class="dropv"><li><img class="alignnone size-full wp-image-110" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/Home_Master.jpg" alt="" width="123" height="67" /><ul>      <li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li></ul></li><img class="alignnone size-full wp-image-148" title="" src="http://shedtheweightonline.com/NautikaWebsite/wp-content/uploads/2012/03/HomePage_NautikaFleet.jpg" alt="" width="123" height="67" /></ul></td>
    </tr>
    </tbody>
    </table>
    Code (markup):
    Spacing.jpg
     
    KianBoon, Apr 1, 2012 IP
  2. Masim man

    Masim man Active Member

    Messages:
    73
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    58
    #2
    Have you tried to set the li padding-right value to zero?
    .dropv li {float: left; padding: 0 0 2px; ...
    Code (markup):
     
    Masim man, Apr 3, 2012 IP
  3. intrig

    intrig Member

    Messages:
    109
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    38
    #3
    try
    .dropv img { margin-left: -10px; //basically whatever gap you have in the images will be here as value in negative}

    this is a hack not a solution though..
     
    intrig, Apr 5, 2012 IP
  4. winkler

    winkler Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi
    I know that there are many ways to provide the space between the two control .
    1- If you want to provide a little space between the two control then you simply write the '&nbsp' .
    2- The second way is to use the 'spacer tag' .
    <spacer type="horizontal/vertical " value="10">
    3- with help of the property to find a suitable space .
    <img src="path" left-margin="" right-margin="">
    etc
    It is the suitable way to provide the space between the control.
    Thanking you.
     
    winkler, Apr 6, 2012 IP
  5. krayis

    krayis Peon

    Messages:
    53
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Have you tried display: block?
     
    krayis, Apr 7, 2012 IP