# IE adds a pixel?



## krush76 (May 30, 2008)

Help! I am trying to design a personal web site, and it works fine in firefox, but IE adds a 1 pixel horizontal line between the top part of the page and the bottom. I've tried setting all the margins to 0 in every table tag, ive double checked that all the widths and heights add up correctly.

I've noticed this in a couple other little pages that I've done with a GUI like this one, too. Any idea what causes this and how to fix it?

PS the url is www.helix.avaloncasemanagement.com


----------



## tomdkat (May 6, 2006)

Try adding this style to your stylesheet:


```
html,body {
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
```
See what that does.

Peace...


----------



## krush76 (May 30, 2008)

thanks, tried that but it didn't remove the line 

Also tried updated the DOCTYPE from a list apart, that also didn't work.

If you wouldn't mind, take a look at the about page in IE and try to figure that one out  IE is rendering the last row of the table across the top of the table! 

I am coming to hate IE, glad I've using firefox all this time...


----------



## TroyTime (Apr 7, 2008)

in the area of the code that does the top nav, take out all the returns and spaces between the tr and td tags.

make each TR its own line:
[TR][TD]<img>[/TD][/TR]


----------



## tomdkat (May 6, 2006)

Ok, I think the added space is due to the nesting of tables. I understand why you needed to nest the tables and that reason is _precisely_ why tables shouldn't be used for page layout (or at least one of the reasons). 

Here is a simplified version of your page with some of the table nesting removed:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Digital Krush 1.0</title>
  <style type="text/css">
body {
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
  </style>
</head>

<body style="color: white; background-color: black;" alink="#000099" link="#000099" vlink="#990099">
<table style="text-align: left; display: table; padding-right: 0px; right: 0px; padding-left: 0px; left: 0px; width: 935px;" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><img style="width: 108px; height: 127px;" alt="" src="krush_files/krushy_01.jpg"></td>
      <td><img style="width: 210px; height: 127px;" alt="" src="krush_files/krush_02.jpg"></td>
      <td><img style="width: 191px; height: 127px;" alt="" src="krush_files/krush_03.jpg"></td>
      <td><img style="width: 180px; height: 127px;" alt="" src="krush_files/krush_04.jpg"></td>
      <td><img style="width: 149px; height: 127px;" alt="" src="krush_files/krush_05.jpg"></td>
      <td><img style="width: 97px; height: 127px;" alt="" src="krush_files/krushy_06.jpg"></td>
    </tr>

    <tr>
      <td><img style="width: 108px; height: 42px;" alt="" src="krush_files/krushy_07.jpg"></td>
      <td colspan="4">

      <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td><img style="width: 103px; height: 42px;" alt="" src="krush_files/newbut_03.jpg"></td>
            <td><img style="width: 131px; height: 42px;" alt="" src="krush_files/newbut_04.jpg"></td>
            <td><img style="width: 194px; height: 42px;" alt="" src="krush_files/newbut_05.jpg"></td>
            <td><img style="width: 153px; height: 42px;" alt="" src="krush_files/newbut_06.jpg"></td>
            <td><img style="width: 149px; height: 42px;" alt="" src="krush_files/newbut_07.jpg"></td>
          </tr>
        </tbody>
      </table>

      </td>

      <td><img style="width: 97px; height: 42px;" alt="" src="krush_files/krushy_13.jpg"></td>
    </tr>

    <tr>
      <td colspan="6">

      <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td style="width: 94px;"><img style="width: 94px; height: 171px;" alt="" src="krush_files/krush_12.jpg"></td>
            <td style="width: 744px; background-color: rgb(5, 62, 133); vertical-align: top;" rowspan="5" colspan="3">

            <table style="text-align: left; width: 100%;" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td style="height: 793px; vertical-align: top;"><iframe src="krush_files/home.htm" frameborder="0" height="793" scrolling="no" width="744"></iframe></td>
                </tr>

                <tr>
                  <td><img style="width: 744px; height: 32px;" alt="" src="krush_files/krush_23.jpg"></td>
                </tr>
              </tbody>
            </table>

            </td>

            <td style="width: 97px;"><img style="width: 97px; height: 171px;" alt="" src="krush_files/krush_14.jpg"></td>
          </tr>

          <tr>
            <td style="width: 94px;"><img style="width: 94px; height: 172px;" alt="" src="krush_files/krush_15.jpg"></td>
            <td style="width: 97px;"><img style="width: 97px; height: 172px;" alt="" src="krush_files/krush_16.jpg"></td>
          </tr>

          <tr>
            <td style="width: 94px;"><img style="width: 94px; height: 174px;" alt="" src="krush_files/krush_17.jpg"></td>
            <td style="width: 97px;"><img style="width: 97px; height: 174px;" alt="" src="krush_files/krush_18.jpg"></td>
          </tr>

          <tr>
            <td style="width: 94px;"><img style="width: 94px; height: 154px;" alt="" src="krush_files/krush_19.jpg"></td>
            <td style="width: 97px;"><img style="width: 97px; height: 154px;" alt="" src="krush_files/krush_20.jpg"></td>
          </tr>

          <tr>
            <td style="width: 94px;"><img style="width: 94px; height: 154px;" alt="" src="krush_files/krush_21.jpg"></td>
            <td style="width: 97px;"><img style="width: 97px; height: 154px;" alt="" src="krush_files/krush_22.jpg"></td>
          </tr>
        </tbody>
      </table>

      </td>
    </tr>
  </tbody>
</table>

</body>
</html>
```
Attached are screenshots of the above HTML in IE6 (all I have access to). The above HTML renders the same in IE6, Firefox 3rc1, and Safari 3.1.

You should really consider switching to a CSS layout. It looks like you're wanting a fixed three column layout, which you can center on the page.

In any event, study the HTML above to see how I removed some of the table nesting to get rid of the space IE was injecting.

Peace...


----------

