I'm a website rookie so be easy on me!
A company has created a website for me which I'm currently editing using Dreamweaver mx 2004. All I'm really doing is improving the look with some jpegs, etc.
One jpeg that I have residing in the top left corner [food.jpg] of the site is fine when viewed with Firefox [my preferred browser] but when I looked at the site with IE the image has a small gap above and below the image, when it should be snug against the coloured bar underneath as in Firefox. The website is www.epulo.co.uk, so you can see for yourself what I mean.
Here's the code where that part of the page is built:
<body onload="initPage();initFocus();populate();" border="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" leftmargin="0" bottommargin="0" bgcolor="#FFFFFF">
<!--add height="100%"-->
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td width="50%" rowspan="4";" bgcolor="#000000"> </td>
<td width="1" bgcolor="#000000" rowspan="4"><img src="/_images/layout/spacer.gif" width="1" height="1" alt="" /></td>
<td style="background-color:#ffffff" valign="top">
<table width="775" cellspacing="0" cellpadding="0" border="0" class="defaultFont">
<tr>
<!-- Page holder cell-->
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<!--Table for food pic-->
<table width="250" height="110" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top">
<img src="/_images/layout/food.jpg" alt="" />
</td>
</tr>
</table>
<td>
<!--Cell for logo-->
<img src="/_images/layout/LogoAndName.jpg" border="0" alt=""/>
</td>
<td width="199" align="right" valign="bottom">
<!--login box--> <form name="frmLogin" method="post" action="/site/login/index.php" onsubmit="return validate(this)" onkeypress="checkEnter(event)">
<input type="hidden" name="hdnPath" value="/site/welcome/index.php" />
<input type="hidden" name="hdnGet" value="" />
<table width="190" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="darkBG" height="20"> <img src="/_images/layout/unlocked.gif" border="0" width="16" height="14" alt="" /> <img src="/_images/layout/pleaselogin.jpg" style="padding-top:2px"</td>
</tr>
<tr>
<td class="brightBG" height="90" align="center">
<table width="180" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="60" height="15" style="padding-left=5px" align="left"><img src="/_images/layout/username.jpg"</td>
<td height="25" align="left" style="padding-left=5px">
<input type="text" name="txtuser_notBlank" id="txtuser_notBlank" class="inputText3" style="width:100px" />
</td>
</tr>
<tr>
<td height="15" align="left" style="padding-left=5px"><img src="/_images/layout/password.jpg"</td>
<td height="15" align="left" style="padding-left=5px">
<input type="password" name="txtpass_notBlank" id="txtpass_notBlank" class="inputText3" style="width:100px" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<a href="#" onclick="if (document.frmLogin.onsubmit()) document.frmLogin.submit();" class="login">GO</a>
</td>
</tr>
<tr>
<td colspan="2" height="15">
<a href="/site/register/index.php" class="login"> not registered yet?</a>
</td>
</tr>
<tr>
<td colspan="2" height="15" style="padding-bottom:3px;">
<a href="/site/login/reminder.php" class="login"> forgotten password?</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form> </td>
</tr>
</table
Anyone tell me why this happens and how to fix it?
Many thanks