Forum Moderators: open
While designing my site with Dreamweaver, I ran into a problem.
The design is simple. There is an image on the left, and a block of text on the right, with a divider in between. Underneath are links to various sections of the site. The divider should be kept in an absolute position.
This works fine with Firefox, Mac and Windows, but with IE Windows, the divider jumps all over the place depending on the width of the image.
I should be very grateful for any suggestion on how to keep the divider in place.
Following is the relevant section of the source codes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!-- InstanceBegin template="/Templates/projects.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>lktc22</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<style type="text/css">
<!--
h3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #ededed;
}
-->
</style>
</head>
<body bgcolor="#3e3e3e" leftmargin="o" topmargin="o" marginwidth="o" marginheight="o">
<div align="center">
<table width="899" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="10" rowspan="6" valign="top"><!--DWLayoutEmptyCell--> </td>
<td height="20" colspan="11" valign="top"><!--DWLayoutEmptyCell--> </td>
<td width="10" rowspan="6" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr> <!-- InstanceBeginEditable name="l arrow" -->
<td width="16" height="525" align="center" valign="middle"><a href="p08.html"><img src="graphics/larrow.png" width="16" height="525" border="0"></a></td>
<!-- InstanceEndEditable -->
<td width="10" valign="top"><!--DWLayoutEmptyCell--> </td>
<!-- InstanceBeginEditable name="photos" -->
<td colspan="2" align="center" valign="middle"><h3><img src="photo_small/p_09.JPG" width="346" height="525"></h3></td>
<!-- InstanceEndEditable -->
<td width="15" valign="top"><!--DWLayoutEmptyCell--> </td>
<td width="16" align="center" valign="middle"><img src="graphics/line.png" width="16" height="525"></td>
<td width="15" valign="top"><!--DWLayoutEmptyCell--> </td>
<!-- InstanceBeginEditable name="text" -->
<td colspan="2" align="center" valign="middle"><h3 align="justify">George </h3>
<h3 align="justify"> Blah blah blah</h3>
</td>
<!-- InstanceEndEditable -->
<td width="10" valign="top"><!--DWLayoutEmptyCell--> </td>
<!-- InstanceBeginEditable name="r arrow" -->
<td width="16" align="center" valign="middle"><a href="p10.html"><img src="graphics/rarrow.png" width="16" height="525" border="0"></a></td>
<!-- InstanceEndEditable --></tr>
I have a feeling that the code can be cleaned up considerably, but the important is to be able to set the divider in a fixed position when viewed with IE Windows.
Thanks for your help.
LKT
It's hard to tell from that code exactly what is generating the "divider" and what it has to do with the table width. Can you explain further?
The page is laid out with an image on the left
<img src="photo_small/p_09.JPG" width="346" height="525">
and a block of text on the right
<h3 align="justify">George </h3>
<h3 align="justify"> Blah blah blah</h3>
with a line divider in between
<img src="graphics/line.png" width="16" height="525">.
It is actually a simple web page, but somehow IE Windows can not keep the line in place, and it jumps according to the size of the image.
Any idea appreciated.
LKT
