rounded corner image placement in table
when I place the image of a rounded corner in a table, the TD that was 50px by 50px becomes something like 50px wide by 70 px high. Where do the extra pixels come from and how do I eliminate them?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index3.html</title>
<link href="styling3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<h1><center>James V. Cannon - CS120S08</center></h1>
<center><table border="2px"
bordercolor="CCFFCC" ></center>
<caption> Crossword Puzzle </caption>
<tr> <!--reserve for rounded corners in row -->
<td <img src="ULRC.jpg"/> </td> <!--row 1, column 1 for rounded corner-->
<td bgcolor="#000000";> </td> <!--row 1, column 2 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 1, column 3 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 1, column 4 for solid black celL-->
<td bgcolor="#000000";> </td> <!--row 1, column 5 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 1, column 6 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 1, column 7 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 1, column 8 for solid black cell-->
<td > </td> <!--row 1, column 9 for solid black cell-->
</tr> <!--/*row 1-->
<tr> <!-- reserve for ACE, row 2 -->
<td bgcolor="#000000";> </td> <!--row 2, column 1 for rounded corner-->
<td> </td> <!--row 2, column 2 for solid black cell-->
<td> </td> <!--row 2, column 3 for solid black cell-->
<td> </td> <!--row 2, column 4 for solid black celL-->
<td bgcolor="#000000";> </td> <!--row 2, column 5 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 2, column 6 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 2, column 7 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 2, column 8 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 2, column 9 for solid black cell-->
</tr> <!--/*row 2-->
<tr> <!-- reserve for N A, row 3 -->
<td bgcolor="#000000";> </td> <!--row 3, column 1 for rounded corner-->
<td> </td> <!--row 3, column 2 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 3, column 3 for solid black cell-->
<td> </td> <!--row 3, column 4 for solid black celL-->
<td bgcolor="#000000";> </td> <!--row 3, column 5 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 3, column 6 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 3, column 7 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 3, column 8 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 3, column 9 for solid black cell-->
</tr> <!--/*row 3-->
<tr> <!-- reserve for N A, row 4 -->
<td bgcolor="#000000";> </td> <!--row 4, column 1 for rounded corner-->
<td> </td> <!--row 4, column 2 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 4, column 3 for solid black cell-->
<td> </td> <!--row 4, column 4 for solid black celL-->
<td> </td> <!--row 4, column 5 for solid black cell-->
<td> </td> <!--row 4, column 6 for solid black cell-->
<td> </td> <!--row 4, column 7 for solid black cell-->
<td> </td> <!--row 4, column 8 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 4, column 9 for solid black cell-->
</tr> <!--/*row 4-->
<tr> <!-- reserve for N A, row 5 -->
<td> </td> <!--row 5, column 1 for rounded corner-->
<td bgcolor="#000000";> </td> <!--row 5, column 2 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 5, column 3 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 5, column 4 for solid black celL-->
<td bgcolor="#000000";> </td> <!--row 5, column 5 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 5, column 6 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 5, column 7 for solid black cell-->
<td bgcolor="#000000";> </td> <!--row 5, column 8 for solid black cell-->
<td> </td> <!--row 5, column 9 for solid black cell-->
</tr> <!--/*row 5-->
</table>
<p>
<div class="solidborder">
<center id="footer" >
Copyright © 2008 James V. Cannon <br />
email: jascanon@gmail.com</center>
</p>
</div>
</div> <!--wrapper-->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
logicalinsanity
Forgot to mention that in that last solution (setting the corner image as a background), you'd need to make sure you removed the image itself from the TD (since it's being served as a background image instead)
ASKER
the problem was the %nbsp;
I don't understand why the B grading when I specifically mentioned the & nbsp; in #2 for one of the possible issues.
ASKER
I did not understant the image idea as I am a beginner and only work with Microsoft Paint. I thought I had to have someithing like Adobe Photoshop to do images, My apologies.
Jim
Jim