J
jcnews at earthlink.net
I am working on a website. I cut an image into two sections to accomodate
the layout. At first everything was fine, but after doing some other
improvements, the two parts of the image are now separated from each other
in Internet Explorer 6 (it works fine in Firefox and Opera).
I can try to sketch out the layout here. The "*"s are the top part of the
image, and the "+"s are the bottom part of the same image, both within their
own table cells. IE 6 and NS 4 leave a gap between the images.
****************
****************
****************
++++++ Main Content Here
++++++
++++++
++++++
This is some of the problem code (it is a new version coded by hand in an
attempt to find the problem -- all content has been removed). I don't want
the two parts of my image to have a space between them. I tried adding
border="0" to the images, to put in all empty table cells, taking
away the specific measurements for cells... nothing has worked with IE. It
DID work originally in IE when I assembled the page in Dreamweaver MX, but
something that I did later broke it, and now I cannot get it back even by
hand-coding. Any help would be greatly appreciated!
<!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>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<!--1st row-->
<tr>
<td width="450" height="198" colspan="2">
<img src="images-top.jpg" width="450" height="198" border="0"/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<!--2nd row -->
<tr>
<td width="209" height="163" valign="top">
<img src="images2.jpg" width="209" height="163" border="0" />
</td>
<!--Content cell-->
<td colspan="3" rowspan="2">
<p>Content goes here</p>
</td>
<td>
</td>
</tr>
<!--3rd Row-->
<tr>
<td>
</td>
<td>
</td>
</tr>
<!--4th row-->
<tr>
<td>
</td>
<td>
<p>Content goes here</p>
</td>
<td colspan="2" width="358" height="178">
<img src="image-footer.jpg" />
</td>
</tr>
</table>
</body>
</html>
the layout. At first everything was fine, but after doing some other
improvements, the two parts of the image are now separated from each other
in Internet Explorer 6 (it works fine in Firefox and Opera).
I can try to sketch out the layout here. The "*"s are the top part of the
image, and the "+"s are the bottom part of the same image, both within their
own table cells. IE 6 and NS 4 leave a gap between the images.
****************
****************
****************
++++++ Main Content Here
++++++
++++++
++++++
This is some of the problem code (it is a new version coded by hand in an
attempt to find the problem -- all content has been removed). I don't want
the two parts of my image to have a space between them. I tried adding
border="0" to the images, to put in all empty table cells, taking
away the specific measurements for cells... nothing has worked with IE. It
DID work originally in IE when I assembled the page in Dreamweaver MX, but
something that I did later broke it, and now I cannot get it back even by
hand-coding. Any help would be greatly appreciated!
<!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>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<!--1st row-->
<tr>
<td width="450" height="198" colspan="2">
<img src="images-top.jpg" width="450" height="198" border="0"/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<!--2nd row -->
<tr>
<td width="209" height="163" valign="top">
<img src="images2.jpg" width="209" height="163" border="0" />
</td>
<!--Content cell-->
<td colspan="3" rowspan="2">
<p>Content goes here</p>
</td>
<td>
</td>
</tr>
<!--3rd Row-->
<tr>
<td>
</td>
<td>
</td>
</tr>
<!--4th row-->
<tr>
<td>
</td>
<td>
<p>Content goes here</p>
</td>
<td colspan="2" width="358" height="178">
<img src="image-footer.jpg" />
</td>
</tr>
</table>
</body>
</html>
