View Full Version : Cant get rid of Padding in a Table Cell

Mar 21st, 2010, 10:30 AM
I'm trying to make a DHTML dialogue box with rounded corners. I have it mostly done, but i can't quite figure out how to get rid of some extra padding at the top of the cell where the image (rounded corner) is...

here's my HTML code

<table CellPadding="0" CellSpacing="0" style="width: auto; Background-color: lightblue;" border=0>
<tr><td><img src="./Skins/TL.gif"></td><td><b><center>Add Notebook</center></b></td><td align="right"><img src="./Skins/TR.gif"></td> </tr>
<input id="NewNoteBookName" type="textbox" width="50">
<input type="button" value="ok" onClick="CreateNoteBook();">
<input type="button" value="Cancel" onClick="AddNoteBookDialogue('hide');">
<td>|</td> </tr>
<tr><td><img src="./Skins/BL.gif"></td> <td>_</td> <td align="right"><img src="./Skins/BR.gif"></td></tr>

attached are the images that are being used for the rounded corners. If someone can help me make this look really nice, let me know. I'm good with javascript, but graphics is my weak point.

Mar 21st, 2010, 11:05 AM

should be


Mar 21st, 2010, 11:19 AM

should be


that doesn't solve the problem, that just makes the HTML code more valid.

there is still a space in between the top edge of the image and the bottom edge of the table cell. I need to get rid of this space.

i want to create dialogue window boxes similar to those on http://meebo.com/

Mar 21st, 2010, 11:26 AM
i wouldnt use tables, but giv the TD with the corners a width and height of the image, should fix it.

Mar 21st, 2010, 01:52 PM
I'm trying to make a DHTML dialogue box with rounded corners. Don't ever use tables for making layout, which is very stupid (http://www.hotdesign.com/seybold/)!

Check the results of http://www.google.co.in/search?q=CSS+rounded+corner+box+with+borders

PS: The issue that you've noticed might be that mysterious gap (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps)!