1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

image spacing in html/css

Discussion in 'Web Design & Development' started by tnxiong, Sep 28, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. tnxiong

    tnxiong Thread Starter

    Joined:
    Sep 28, 2008
    Messages:
    5
    I'm having trouble eliminating spaces between images in IE 7. It works fine
    in Firefox. In IE7, it just seems to be leaving little spaces between images top, bottom, right, and left. I've set cellpadding, etc.. all to 0's already as well. What can be the problem?
     
  2. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Could you post the HTML for the page here or can you post a link to the site so we can see what's up?

    Peace...
     
  3. tnxiong

    tnxiong Thread Starter

    Joined:
    Sep 28, 2008
    Messages:
    5
    This is a one of the tables I have.
    It works fine in Firefox, but in IE 7, the images are has a space in between.

    ............<table width="652" height="347" border="0" cellpadding="0" cellspacing="0">
    <tr border="0" cellspacing="0" cellpadding="0">
    <td border="0" cellspacing="0" cellpadding="0">
    <a href="biography.html"
    onmouseover="javascript:moveIn2('thai', 'images/xingdesign_01.jpg', 'bio', 'images/buttonsxingdesignx_08.jpg')"
    onmouseout="javascript:moveOut2('thai', 'images/redxingdesignx_01.jpg', 'bio', 'images/redxingdesignx_08.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_01.jpg" name="thai" alt="thai"/></a>

    <a href="test.html"
    onmouseover="javascript:moveIn2('D','images/xingdesign_06.jpg','links','images/buttonsxingdesignx_09.jpg')"
    onmouseout="javascript:moveOut2('D','images/redxingdesignx_06.jpg','links','images/redxingdesignx_09.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_06.jpg" name="D" alt="Desan"/></a>
    </td>

    <td border="0" cellspacing="0" cellpadding="0">
    <a href="biography.html"
    onmouseover="javascript:moveIn2('Don','images/xingdesign_02.jpg','testimonals','images/buttonsxingdesignx_11.jpg')"
    onmouseout="javascript:moveOut2('Don','images/redxingdesignx_02.jpg','testimonals','images/redxingdesignx_11.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_02.jpg" name="Don" alt="Don" /></a>

    <a href="biography.html"
    onmouseover="javascript:moveIn2('kids','images/xingdesign_05.jpg', 'contact', 'images/buttonsxingdesignx_10.jpg')"
    onmouseout="javascript:moveOut2('kids','images/redxingdesignx_05.jpg', 'contact', 'images/xingdesign_10.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_05.jpg" name="kids" alt="kids"/></a>

    <a href="biography.html"
    onmouseover="javascript:moveIn2('le','images/xingdesign_07.jpg', 'FAQ','images/buttonsxingdesignx_12.jpg')"
    onmouseout="javascript:moveOut2('le','images/redxingdesignx_07.jpg', 'FAQ','images/redxingdesignx_12.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_07.jpg" name="le" alt="le"/></a>
    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <a href="biography.html"
    onmouseover="javascript:moveIn('art','images/xingdesign_03.jpg')"
    onmouseout="javascript:moveOut('art','images/redxingdesignx_03.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_03.jpg" name="art" alt="art"/></a>
    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <img border="0" src="images/redxingdesignx_04.jpg" name="xing" alt="Xing"/>
    </td>
    </tr>
    </table>.................
     
  4. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Could you please post the HTML for the entire page or post a link to a live site?

    Thanks!

    Peace...
     
  5. tnxiong

    tnxiong Thread Starter

    Joined:
    Sep 28, 2008
    Messages:
    5
    Sorry about that. The site is not up and running yet. Here is the whole index.html page source code:

    <!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>

    <title>XingDesign</title>

    <!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
    <script language="JavaScript" src="dynamic.js"></script>



    </head>

    <body>

    <input type="button" onclick="test()" value="Click Me!">


    <div align="center" style="background-color: #00CC00; display:block" padding="0">
    <table border="0" cellpadding="0" cellspacing="0">
    <img border="0" style="margin: 100px 15px 10px 100px" src="images/redxingdesignx_06.jpg" />

    <!-- <div border="0" style="border:1px solid black" style="background-color: #00FFFF">
    <img border="0" src="images/redxingdesignx_06.jpg" />
    </div>
    (Margin, border, Padding, Element box)-->

    </table>
    </div>

    <br/>

    <div align="center" style="background-color: #00CC00"> <!-- style="background-color: #00CC00; text-align:center" -->
    <table>
    <table width="652" height="347" border="0" cellpadding="0" cellspacing="0">
    <tr border="0" cellspacing="0" cellpadding="0">
    <td border="0" cellspacing="0" cellpadding="0">
    <a href="biography.html"
    onmouseover="javascript:moveIn2('thai', 'images/xingdesign_01.jpg', 'bio', 'images/buttonsxingdesignx_08.jpg')"
    onmouseout="javascript:moveOut2('thai', 'images/redxingdesignx_01.jpg', 'bio', 'images/redxingdesignx_08.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_01.jpg" name="thai" alt="thai"/></a>

    <a href="test.html"
    onmouseover="javascript:moveIn2('D','images/xingdesign_06.jpg','links','images/buttonsxingdesignx_09.jpg')"
    onmouseout="javascript:moveOut2('D','images/redxingdesignx_06.jpg','links','images/redxingdesignx_09.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_06.jpg" name="D" alt="Desan"/></a>
    </td>

    <td border="0" cellspacing="0" cellpadding="0">
    <a href="biography.html"
    onmouseover="javascript:moveIn2('Don','images/xingdesign_02.jpg','testimonals','images/buttonsxingdesignx_11.jpg')"
    onmouseout="javascript:moveOut2('Don','images/redxingdesignx_02.jpg','testimonals','images/redxingdesignx_11.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_02.jpg" name="Don" alt="Don" /></a>

    <a href="biography.html"
    onmouseover="javascript:moveIn2('kids','images/xingdesign_05.jpg', 'contact', 'images/buttonsxingdesignx_10.jpg')"
    onmouseout="javascript:moveOut2('kids','images/redxingdesignx_05.jpg', 'contact', 'images/xingdesign_10.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_05.jpg" name="kids" alt="kids"/></a>

    <a href="biography.html"
    onmouseover="javascript:moveIn2('le','images/xingdesign_07.jpg', 'FAQ','images/buttonsxingdesignx_12.jpg')"
    onmouseout="javascript:moveOut2('le','images/redxingdesignx_07.jpg', 'FAQ','images/redxingdesignx_12.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_07.jpg" name="le" alt="le"/></a>
    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <a href="biography.html"
    onmouseover="javascript:moveIn('art','images/xingdesign_03.jpg')"
    onmouseout="javascript:moveOut('art','images/redxingdesignx_03.jpg')"
    target="_blank">
    <img border="0" src="images/redxingdesignx_03.jpg" name="art" alt="art"/></a>
    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <img border="0" src="images/redxingdesignx_04.jpg" name="xing" alt="Xing"/>
    </td>
    </tr>
    </table>


    <table width="652" hight="115" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>

    <td border="0" cellspacing="0" cellpadding="0">
    <a href=""
    onmouseover="javascript:moveIn2('thai', 'images/xingdesign_01.jpg', 'bio', 'images/buttonsxingdesignx_08.jpg')"
    onmouseout="javascript:moveOut2('thai', 'images/redxingdesignx_01.jpg', 'bio', 'images/redxingdesignx_08.jpg')"
    target="_blank">
    <img border="0" src="images/xingdesign_08.jpg" name="bio" alt="Bio" /></a>

    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <a href=""
    onmouseover="javascript:moveIn2('D','images/xingdesign_06.jpg','links','images/buttonsxingdesignx_09.jpg')"
    onmouseout="javascript:moveOut2('D','images/redxingdesignx_06.jpg','links','images/redxingdesignx_09.jpg')"
    target="_blank">
    <img border="0" src="images/xingdesign_09.jpg" name="links" alt="Links"/></a>
    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <a href=""
    onmouseover="javascript:moveIn2('kids','images/xingdesign_05.jpg', 'contact', 'images/buttonsxingdesignx_10.jpg')"
    onmouseout="javascript:moveOut2('kids','images/redxingdesignx_05.jpg', 'contact', 'images/xingdesign_10.jpg')"
    target="_blank">
    <img border="0" src="images/xingdesign_10.jpg" name="contact" alt="Contact"/></a>
    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <a href=""
    onmouseover="javascript:moveIn2('Don','images/xingdesign_02.jpg', 'testimonals','images/buttonsxingdesignx_11.jpg')"
    onmouseout="javascript:moveOut2('Don','images/redxingdesignx_02.jpg', 'testimonals','images/redxingdesignx_11.jpg')"
    target="_blank">
    <img border="0" src="images/xingdesign_11.jpg" name="testimonals" alt="Testimonals" /></a>

    </td>
    <td border="0" cellspacing="0" cellpadding="0">
    <a href=""
    onmouseover="javascript:moveIn2('le','images/xingdesign_07.jpg', 'FAQ','images/buttonsxingdesignx_12.jpg')"
    onmouseout="javascript:moveOut2('le','images/redxingdesignx_07.jpg','FAQ','images/redxingdesignx_12.jpg')"
    target="_blank">
    <img border="0" src="images/xingdesign_12.jpg" name="FAQ" alt="FAQ" /></a>
    </td>


    </tr>
    </table>


    <table width="652" align="center" border="0" cellspacing="0" cellpadding="0"> <!-- bgcolor="#000000" -->
    <tr>
    <td border="0" cellspacing="0" cellpadding="0"><a href="xingdesignxgraphicdesign.html"><img border="0" src="images/xingdesign_13.jpg" alt="grafx arts" width="134" /></a></td>
    <td border="0" cellspacing="0" cellpadding="0"><a href="xingdesignxphotohopmedia.html"><img border="0" src="images/xingdesign_14.jpg" alt="photoshop media" width="170" /></a></td>
    <td border="0" cellspacing="0" cellpadding="0"><a href="xingdesignxphotography.html"><img border="0" src="images/xingdesign_15.jpg" alt="photography" width="145" /></a></td>
    <td border="0" cellspacing="0" cellpadding="0"><a href="xingdesignxfinearts.html"><img border="0" src="images/xingdesign_16.jpg" alt="finearts" width="83" /></a></td>
    <td border="0" cellspacing="0" cellpadding="0"><a href="xingdesignxwebdesign.html"><img border="0" src="images/xingdesign_17.jpg" alt="webdesign" width="112" /></a></td>
    <td border="0" cellspacing="0" cellpadding="0"><a href="xingdesignxvideography.html"><img border="0" src="images/xingdesign_18.jpg" alt="videography" width="133" /></a></td>
    <td border="0" cellspacing="0" cellpadding="0"><img border="0" src="images/xingdesign_19.jpg" width="247" height="27" alt="blank" /></td>

    </tr>
    </table>


    <table width="652" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr border="0" cellspacing="0" cellpadding="0">
    <td border="0" cellspacing="0" cellpadding="0"><img border="0" src="images/xingdesign_20.jpg" width="1024" height="165" alt="blank" /></td>
    </tr>
    </table>


    </table>
    </div>



    </body>




    </html>
     
  6. tnxiong

    tnxiong Thread Starter

    Joined:
    Sep 28, 2008
    Messages:
    5
    Thanks in advance. :)
     
  7. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Thanks. Which images have spaces in between them that you don't want?

    EDIT: Better yet, since the site isn't live yet can you post a screenshot of how it looks in Firefox?

    Peace...
     
  8. tnxiong

    tnxiong Thread Starter

    Joined:
    Sep 28, 2008
    Messages:
    5
    Here is FF3:

    [​IMG]


    Here is IE 7:

    [​IMG]

    Thanks in advance.
     
  9. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/754189

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice