Trouble with div tags and positioning

I am attempting to create a form element that looks like a drop-down, but instead is actually a div tag with an image of the down arrow. When you click the down arrow, a list box displays under the div for the user to select from. The reason I'm doing it this way is that I need to have multiple columns of data displayed for the user to select from. That part I have working fine. The issue I am having now is that when I make a selection, the down arrow moves depending on the text selected. I want to have the button to stay in the same place no matter what is in the div tag.
I am sure it is probably something very simple, but since I haven't used CSS in a while, the solution is failing me. My current page is displayed below.

Chris


<!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 runat="server">
 <title>Untitled Page</title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=201809
function changeMsg(msg) {
 document.getElementById('expDDmsg').innerHTML = msg;
 document.getElementById('expDD').style.display='none';
}
function dispDD() {
 disp = document.getElementById('expDD').style.display;
 if (disp=="none") {
  document.getElementById('expDD').style.display='inline';
 } else {
  document.getElementById('expDD').style.display='none';
 }
}
</script>
</head>
<body>
 <form id="form1">
 <table>
  <tr>
   <td>Add, Modify, or Delete</td>
  </tr>
  <tr>
   <td colspan="2"><div style="border:1px solid #7F9DB9; width:43px;">
  <div id="expDDmsg" style="display:inline" onclick="dispDD()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><img src="down.gif" onmouseup="this.src='down.gif'" onmousedown="this.src='downPress.gif'" onclick="dispDD()" height="16" width="15" />
 </div>
 <select id="expDD" size="4" style="display:none; position:absolute" onchange="changeMsg(this.value)">
 <option value=""></option>
 <option value="A">A Ś Add</option>
 <option value="Mod">Mod Ś Modify</option>
 <option value="Del">Del Ś Delete</option>
 </select></td>
  </tr>
  <tr>
   <td>Name:</td>
   <td><input type="text" name="name" size="20" /></td>
  </tr>
  <tr>
   <td>Address:</td>
   <td><input type="text" name="address" size="20" /></td>
  </tr>
 </table>
 </form>
</body>
</html>

Trouble with div tags and positioning

chrscote

frattaroli

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week