[Web4lib] Summary: AJAX/CSS and select drop down boxes

Stephen Graham sgraham at london.edu
Fri Mar 9 09:33:05 EST 2007


Thanks for all the replies. It appears, according to:

http://weblogs.asp.net/bleroy/archive/2005/08/09/422047.aspx

, that some version of IE do have problems with SELECT boxes (i.e. they
always appear on top regardless of the z-index you use). The above
article also mentions a work around using an iframe. I decided that it
would be a lot easier to re-order the fields in my form.

Cheers, Stephen

-----Original Message-----
From: web4lib-bounces at webjunction.org
[mailto:web4lib-bounces at webjunction.org] On Behalf Of Stephen Graham
Sent: 08 March 2007 10:25
To: web4lib at webjunction.org
Subject: [Web4lib] AJAX/CSS and select drop down boxes

Hi - I'm using a Ajax library (AutoSuggest from
http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.htm
l) to add some functionality to our ArticleFinder service. When a user
starts to type in a title in the "Journal title" field, a drop box
appears that suggests the desired title. I've got the server side script
working which retrieves and outputs the data in XML, and I nearly have
the client side sorted too. The problem I am having can be seen at:

http://telos.london.edu/ajax/afTest.html

If you start to type in the journal title, a box appears underneath the
relevant field. In every other browser apart from Internet Explorer 6
(well, it works in IE7, Seamonkey and Opera) the box goes over the Date
drop down boxes. In Internet Explorer 6 the drop down fields stay on top
and the text in the Ajax generated box gets obsured by the boxes.

I must admit that CSS is not my strong point. I've been editing the CSS
file that comes with the ajax library, and the relevant sections seem to
be:

div.autosuggest ul
{
	list-style: none;
	border:1px solid #000;
	display: block;
	margin: 0 0 0 0;
	padding: 0;
	background-color: #FFFFFF;
}

div.autosuggest ul li a
{
	color: #000000;
	border: none;
	display: block;
    	text-decoration: none;
	background-color: white;
	text-shadow: #000 0px 0px 5pm;
	padding: 0;
	width: 100%;
}

No matter what I seemt o do I cannot get IE6 to render this like the
other browsers do. Ny advice/suggestions would be most welcome!

Stephen
---------------------------
Stephen Graham
Electronic Library Team
Information Systems Division
London Business School
Regents Park, London NW1 4SA
Tel: +44 (0)20 7000 7631
Fax: +44 (0)20 7706 1897 


______________________________________________________________________

This email has been scanned by the MessageLabs Email Security System on
behalf of the London Business School community.
For more information please visit http://www.messagelabs.com/email
______________________________________________________________________
_______________________________________________
Web4lib mailing list
Web4lib at webjunction.org
http://lists.webjunction.org/web4lib/

______________________________________________________________________

This email has been scanned by the MessageLabs Email Security System on
behalf of the London Business School community.
For more information please visit http://www.messagelabs.com/email
______________________________________________________________________

______________________________________________________________________

This email has been scanned by the MessageLabs Email Security System
on behalf of the London Business School community.
For more information please visit http://www.messagelabs.com/email
______________________________________________________________________


More information about the Web4lib mailing list