[Web4lib] AJAX/CSS and select drop down boxes

[Bonnie Swoger]

I think that you are having the same problem that we did. (We are using 
suckerfish drop down menus).  I think it is a documented problem with 
IE6 and how it relates <select> elements and <div> elements with a 
z-index.  The <select> element will always show through no matter what 
z-index you give the <div> that is supposed to go on top of it.

I found a very hacky solution that I wasn't able to make work.  I solved 
the problem by doing some rearranging to avoid the problem.

I did find an article describing a solution here:
http://weblogs.asp.net/bleroy/archive/2005/08/09/422047.aspx

Someone else with a better grasp of javascript or other programming may 
be able to help you better.

-Bonnie

Bonnie J. M. Swoger
Instructional Support Associate
Milne Library
SUNY Geneseo
Geneseo, NY  14454
Phone: (585) 245-5593

"Scientific research is based on the assumption that all events, including the actions of mankind, are determined by the laws of nature."  - Albert Einstein, 1936



Stephen Graham wrote:
> 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/
>