Unexplained extra space in table...

The code below represents a nested table that is baffling me.

Although the combined width of the three images is 390 and I'm working within a table that's 600 pixels across, I'm winding up with some extra space that forces the nested table to exceed 600 pixels and I don't know why.

I've played with this thing for over an hour and I'm open to input. I want to keep this table 600 pixels across. As soon as I add the third image, I'm beyond 600 pixels and yet I can see available space. What am I missing?

You can see what I'm dealing with by heading out to http://www.brucegust.com/Perfect/Problem.htm. You'll see on the right hand side how I'm not lining up with the white background just beneath the header image.

Here's the code:

<tr>
            <td colspan="4">
            &nbsp<BR>
            </td>
            </tr>
            <tr>
            <td>
            &nbsp<BR>
            </td>

<!- here's the beast ->

            <td colspan="2" align="center" width="600">
                  <table border="1">
                  <tr>
                  <td align="center">
                  <IMG SRC="Images/FullService.bmp" width="130">
                  </td>            
                  <td align="center">
                  <IMG SRC="Images/BlackTie.bmp" width="130">
                  </td>
                  <td align="center">
                  <IMG SRC="Images/Snake.bmp" width="130">
                  </td>
                  </tr>
                  </table>

<!- this is the end of the beast ->

            </td>
            <td>
            &nbsp<BR>
            </td>
            </tr>
            </table>
      
      </td>
      </tr>
      </table>
</td>
</tr>
</table>
brucegustPHP DeveloperAsked:
Who is Participating?
 
Jeremy DaleySenior DeveloperCommented:
set a style on the <img>... this happens to me all the time.

<td align="center">
<IMG SRC="Images/FullService.bmp" width="130" style="display:block; ">
</td>

this kind of problem ususally occurs when the only contents of a table cell is a single image. setting the display style to "block" will get rid of excess space. i still have yet to find out why the space shows up.

you'll have to set that style for each of those <img>'s contained in the cells
0
 
callrsCommented:
I went to that site. The table DOES line up to the background edge, both left & right edges, in my browser. I'm using IE 6.0.2800.110615

Please let us know what browser you are using.

Try running it in a different browser, like Firefox or Opera or IE

By how many pixels does the table exceed 600?
0
 
brucegustPHP DeveloperAuthor Commented:
I'm running it on IE 6.0 2900 2180.

I don't know how many pixels I'm running over. And, if you're telling me that it might be my browser, I may be willing to go with that as my answer because nothing from a coding standpoint strikes me as being flawed.

There you have it...
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
omancaCommented:
The nest is what's making the problem.

make seperate tables and seperate them with a <br> or a "return" and you shuold be fine.

0
 
callrsCommented:
If we don't solve your problem, you need not accept an answer: your points can be refunded (if applicable).

But I tried your site in Opera this time - Still I don't see the table overflowing the background. To maybe make the overflow not so awkward, maybe try making the background slightly bigger, or adding a thick light-colored border to the background just enough to cover the table overflow.

Why not phone up / instant message / email a friend, see if he or she sees the anomaly too? If not, then it could be something wrong with your browser, or a windows operating system problem.

Maybe the font setting has something to do with it? Try changing the font to Georgia (and that's easier to read than Times Roman):
Tools-->Internet Options-->Fonts (at bottom) -->Select "Georgia" as the Web page font.
0
 
James GlenIT EngineerCommented:
Why not set the width of the nested table to 390, the width of the <td> cells to width="130" and set the other attributes to 0

eg. cellpadding="0" cellspacing="0" border="0"

Thats the only real way to make sure the table doesnt run over (unless you add larger images than it would expand).

0
 
burntoutCommented:
looks perfect in my browser too  IE 6.0 2900 2180. same as yours.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.