[RESOLVED] Why is this space underneath my image

7xb_co_uk

Hi Guys,

After following web standards to make this multi-browser compliant i've came across a gap underneath my header image. It doesnt show in firefox, which is good, but in internet explorer (and maybe other browers, i havent checked) it does.
And i'm not sure why either. It's really starting to frustrate me.

click for example

Any ideas?

Jon

coldwerturkey

keep in mind, not everyone has IE, posting screen shots of the differences better your chances of help. also please post relative code.. it's annoying to have to dig through the source code ourselves.

& make sure you reset css when trying to make cross-browser compatible with something like

* {
  padding:0;
  margin:0;
}

7xb_co_uk

sorry about that

		<!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>
				<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
				<title>
					SevenTimesBroken :: Online Store				</title>
				<link href="library/style.css" rel="stylesheet" type="text/css" />
				<link rel="stylesheet" href="library/lightbox.css" type="text/css" media="screen" />
					<script type="text/javascript" src="library/prototype.js"></script>
					<script type="text/javascript" src="library/scriptaculous.js?load=effects,builder"></script>
					<script type="text/javascript" src="library/lightbox.js"></script>
			</head>

		<body>

<table id="pagelayout" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    	<div>
    		<img src="images/top.jpg" alt="SevenTimesBroken" usemap="#headerMap" border="0" style="margin: none;" width="800" height="242" />
    		<map name="headerMap" id="headerMap"><area shape="rect" coords="378,10,790,49" href="http://shop.7xb.co.uk" title="SevenTimesBroken Clothing" alt="SevenTimesBroken Clothing" /></map>
    	</div>
    </td>
  </tr>
  <tr style="height: 100%; background-image: url('images/tbg.jpg');" valign="top">
    <td>

    <div align="center">

		<table border="0" align="center" cellpadding="0" cellspacing="0" width="780">
			<tr valign="top">

			  <td width="68%">

			    <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
				    <tr>
				      <td><img src="images/tbl/tl.jpg" width="15" height="15" alt="" /></td>
				      <td height="15" style="background-image: url('images/tbl/tm.jpg');"><img src="images/tbl/tm.jpg" width="10" height="15" alt="" /></td>
				      <td><img src="images/tbl/tr.jpg" width="15" height="15" alt="" /></td>
				    </tr>
				    <tr>
				      <td width="15" style="background-image: url('images/tbl/ml.jpg');"></td>
				      <td align="center" valign="middle" bgcolor="#00c600" width="100%">

				      <div class="miniCart" style="text-align: left;"><a href="index.php" class="miniLink" title="Home">Online Store</a> > Products<hr class="bread" /></div>


				      </td>
				      <td width="15" style="background-image: url('images/tbl/mr.jpg');"></td>
				    </tr>
				    <tr>
				      <td><img src="images/tbl/bl.jpg" width="15" height="15" alt="" /></td>
				      <td height="15" style="background-image: url('images/tbl/bm.jpg');"><img src="images/tbl/bm.jpg" width="10" height="15" alt="" /></td>
				      <td><img src="images/tbl/br.jpg" width="15" height="15" alt="" /></td>
				    </tr>
				  </table>

				</td>

				<td width="2%">&nbsp;</td>

				<td width="30%">

			    <table border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
				    <tr>
				      <td><img src="images/tbl/tl.jpg" width="15" height="15" alt="" /></td>
				      <td height="15" style="background-image: url('images/tbl/tm.jpg');"><img src="images/tbl/tm.jpg" width="10" height="15" alt="" /></td>
				      <td><img src="images/tbl/tr.jpg" width="15" height="15" alt="" /></td>
				    </tr>
				    <tr>
				      <td width="15" style="background-image: url('images/tbl/ml.jpg');"></td>
				      <td align="center" valign="middle" bgcolor="#00c600" width="100%">

				      <span class="miniCart">Your cart is currently empty.</span>					      
				      </td>
				      <td width="15" style="background-image: url('images/tbl/mr.jpg');"></td>
				    </tr>
				    <tr>
				      <td><img src="images/tbl/bl.jpg" width="15" height="15" alt="" /></td>
				      <td height="15" style="background-image: url('images/tbl/bm.jpg');"><img src="images/tbl/bm.jpg" width="10" height="15" alt="" /></td>
				      <td><img src="images/tbl/br.jpg" width="15" height="15" alt="" /></td>
				    </tr>
				  </table>

				</td>

			</tr>
		</table>

	</div>

</td>
  </tr>
</table>
</body>
</html>

cahva

Its the good ol' IE bug. Put it to the same row and it will work:

<div><img src="images/top.jpg" alt="SevenTimesBroken" usemap="#headerMap" border="0" style="margin: none;" width="800" height="242" /><map name="headerMap" id="headerMap"><area shape="rect" coords="378,10,790,49" href="http://shop.7xb.co.uk" title="SevenTimesBroken Clothing" alt="SevenTimesBroken Clothing" /></map></div>

7xb_co_uk

wow! isn't that just annoying.

thank you very much 🙂

marked as resolved