?
Solved

Unexplained extra space in table...

Posted on 2006-05-21
7
Medium Priority
?
263 Views
Last Modified: 2008-01-09
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>
0
Comment
Question by:brucegust
7 Comments
 
LVL 30

Expert Comment

by:callrs
ID: 16731109
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
 

Author Comment

by:brucegust
ID: 16731315
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
 
LVL 2

Expert Comment

by:omanca
ID: 16731566
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Expert Comment

by:callrs
ID: 16731637
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
 
LVL 4

Expert Comment

by:FSIFM
ID: 16732217
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
 
LVL 2

Expert Comment

by:burntout
ID: 16739561
looks perfect in my browser too  IE 6.0 2900 2180. same as yours.
0
 
LVL 4

Accepted Solution

by:
Jeremy Daley earned 2000 total points
ID: 16748305
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

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question