List will not display in table cell 1

[LyndonOHRC]

I'm working on a suggest list, the two classes listed below are examples I found.

My ajax data displays fine until I apply the suggestList and listItem classes, then no data is displayed at all.



.css

.suggestList
{
	width: 302px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #8996B5;
	background-color: #FFFFFF;
	position: absolute;
	overflow:auto;
	list-style-type: none;
	height: 500;
}

.listItem 
{
	width: 302px;
	height: 20px;
	margin: 3px 0px 0px 0px;
	padding: 3px 0px 0px 0px;
	vertical-align: text-bottom;
	position: relative;
	font-family: arial;
	font-size: 12px;
	color: DarkBlue;
	background-color: #FFFFFF;
	cursor: hand;
	display: block;
}

.html

<tr>
 <td></td>
 <td id="RSWinHorseTableData1" colspan="3" style="display:none;"></td>
</tr>

.js

if(xmlhttp.readyState==4){
	var users = eval(trim(xmlhttp.responseText));
	var str = '<ul class="suggestList">';
	for ( var recno in users ) {
		str += '<li  class="listItem" id="'+users[recno].OBN+'" onclick="putIn( \'' +users[recno].OBN+ '\')">'+users[recno].HoresName+'</li>';
	}
	str +='</ul>';
	document.getElementById(TableData).innerHTML = str;
	document.getElementById(TableData).style.display='table-cell';
}

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[BillyRayPreachersSon]

I don't know if this is the cause or not, but (AFAIK) all non-IE browsers will ignore values with no units:

height: 500[!]px[/!];

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[BillyRayPreachersSon]

Oh - and this is not valid in non-IE browsers, either:

cursor: hand;

You should use:

cursor: pointer;

Perhaps validating your CSS might be a good idea?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[LyndonOHRC]

I validated the css, sorry I should have done that first.

If I set the position property value to absolute the data list does not display. The <td> I'm trying to use for the dynamic suggest list is in a table that is nested in a parent table.

I wanted the list to display over all elements in the document. Any position property value, other than absolute, will push all the other elements down; not the behavior we are after.

I'm using nested tables because this document is a very complex data entry form only to be used by five people. The most important design criteria, to the user, is that the form reflect the source document the users are typing from. If I used nested DIV’s would I have this same problem?

I tried changing the z-index property but it didn't have any effect.


Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[LyndonOHRC]

No response so I'll try to restate.

I want to have my suggest list pop up over the tables that are on the document. I suspect the problem is that the <td> element containing the list is in a table nested within another.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[Vragabond]

Is it possible for you to provide us with a link to a dummy page that shows this problem? There is nothing really jumping out, so we would need live example to debug.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[LyndonOHRC]

I solved this problem by validating the application wide .css file.

I guess I hadn't checked that one in a while.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey