Padding coming from nowhere?

[Nicholas]

First off, I'm not positive that this is a PHP related issue, but I believe it is based on a key observation. When echoing a string of HTML, when one ends a line within a cell, the code automatically adds a space of some sort. I'm not sure why this is, but it may be the result of outlining code. The tabs are, for whatever reason, being picked up in the final result and causing unwanted gaps.

The subnavigation (links saying "Web Site Design, Atheletics, and Photography") [a href=\"http://hobbes.cjb.cc/interests.php\" target=\"_blank\"]on this page[/a] have the aformentioned spaces to the left hand side of the cell when viewed in Internet Explorer. There also appears to be a space on the top of the cell when viewed in Firefox (more on this later). The code for these is as follows:
[code]
function subnav() {
          global $page;
          $background = 'background: #533A1D url(\'./images/bg_light.png\'); color: #FFF; font-weight: bold; height: 30px;';
          $separator = '<img src="./images/sep.png" alt="">';

          # i'm skipping a bit of code that doesn't apply here...

          if ($page == 'interests') { // Sub-navigation used on the "interests" page
               echo '    <tr>';
               echo '         <td style="' . $background . ' padding-left: 15px;" width="100%">';
               echo '              <a href="interests.php#webdesign" id="subnav">Web Site Design</a>' . $separator;
               echo '              <a href="interests.php#athletics" id="subnav">Athletics</a>' . $separator;
               echo '              <a href="art.php#photography" id="subnav">Photography</a>';
               echo '         </td>';              
          }
}[/code]

As you can probably see (well, hopefully, I'm not sure anyone follows my coding logic;) ), there is quite a bit of tabing there, but no spaces. Be sure to note that each echo is ended where the code would be naturally ended in HTML. In otherwords, where there would normally be a Return / Escape character, I've ended the echo.

On a different page, I tried something different to see if my theory was correct: as it turns out, it was (sort of, anyway). The result of the following code can be seen [a href=\"http://hobbes.cjb.cc/interests.php\" target=\"_blank\"]on this page[/a].

[code]
function subnav() {
          global $page;
          $background = 'background: #533A1D url(\'./images/bg_light.png\'); color: #FFF; font-weight: bold; height: 30px;';
          $separator = '<img src="./images/sep.png" alt="">';

          # i'm skipping a bit of code that doesn't apply here...

          if ($page == 'art') { // Sub-navigation used on the "art" page
               echo '    <tr>';
               echo '         <td style="' . $background . ' padding-left: 15px;" width="100%">';
               echo '              <a href="interests.php#graphics" id="subnav">Graphic Design</a>' . $separator .
                                     '<a href="interests.php#3d" id="subnav">3-Dimensional</a>' . $separator .  
                                     '<a href="art.php#photography" id="subnav">Photography</a>' . $separator .
                                     '<a href="http://ziehen.deviantart.com" id="subnav">ziehen.deviantart.com</a>';
               echo '         </td>';
          }
}[/code]

Note that these two code segments are within the same function, I haven't defined it twice. I just put the same couple of lines at the top of each to ensure easier reading. Also note that there is only one echo for the links, rather than the multiple echos used previously. As can be seen on the page, there is no space to the left of the cell. Interesting, no?

Apparently, either the tabing used to outline the code or the echo statements themselves are adding space to the HTML returned through the server. When viewing the page source, all that can be seen between the links is spaces, which are the result of the tabs. Generally, such spaces aren't interpreted by the browser... right?:confused:

While this problem doesn't make much sense to me, it doesn't bother me too much either. The simple and hassle-free solution is just to use one echo statement rather than ending each line and beginning anew.

My real question is, where is the space on top coming from? There isn't any space when viewing using Internet Explorer, but in Firefox there is a definate space between the top of the cell and the link held within it. Also interesting: this space doesn't cause overlap, it actually pushes the link outside the cell. I know this type of "layering" can be done using specific CSS x or y coordinates, but I wasn't aware that something would just go outside its border without expanding the entire holding cell.

To explain myself in better detail, I have a CSS id which is as follows:
[code]     a#subnav {
          background: #533A1D url('./images/bg_light.png');
          color: #CCCCCC;
          font-weight: bold;
          height: 30px;
          padding: 8px 8px 5px 8px;
          text-decoration: none;
     }
    
     a#subnav:hover {
          background: #40260D url('./images/bg_dark.png');
          color: #CC0000;
     }[/code]
As such, in the code, the links using this id are larger than normal, the padding applied to them makes them more of a button. The hover simply changes the color so a user can see the "button". I find this CSS to be very helpful, as rollover images can be very time consuming to set up properly.

So now that you know how my sub-navigation works, can anyone tell me why Firefox adds a space to the top, then pushes the link outside its cell?
Thank you to anyone who helps, I really appreciate it.:)

[Yesideez]

I've just read this twice, almost three times and still have absolutely no idea what it is you're on about.

Any chance of a couple screenshots with arrows pointing to what it is you mean?

[kenrbnsn]

Before trying to fix your problems, make sure you have used valid HTML. It won't be valid until you use a valid [!--coloro:#FF0000--][span style=\"color:#FF0000\"][!--/coloro--]DOCTYPE[!--colorc--][/span][!--/colorc--] at the start of your HTML. Please see [a href=\"http://www.w3.org/QA/Tips/Doctype\" target=\"_blank\"]this[/a] page form more information.

[Nicholas]

Alright, I've done that but the error still exists.
My page is valid XHTML 1.0 Transitional, but Firefox still pushes the buttons out of their cells.
Yesideez, I'll try to get an image of what I'm referring to up later tonight, I have a soccer game to official right now. Thanks for the help though, both of you.

[Nicholas]

Alright, here is a visual explanation of my problem:
[img src=\"http://img142.imageshack.us/img142/9921/untitled26mw.png\" border=\"0\" alt=\"IPB Image\" /]