...

View Full Version : Trouble with div tags and positioning



chrscote
02-13-2009, 02:50 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum