ansaurus

Question

Forms CSS ... this is getting ridiculous

Answer 1

A:

Seems like a z-index issue. Try to increase the z-index of the div showed for the autocomplete.

Sinan Taifour 2009-07-18 22:16:34

please, please read my posting.I've added "position:relative;z-index:1" (0, 1, 99999, and all other index values that are large). And I've tried position:absoluteI've added "position:relative;z-index:0" (and -1, oops) to the other field elements.All to no avail.

joej 2009-07-19 00:29:00

Answer 2

A:

It's a lot to follow, but wondering if you tried placing the item inside of a <div> tag, then you can assign style info to the div (like height and overflow)?

Upon further inspection of your screen shot -- is that a div that appears with the possible items -- is that what the issue is? It's not appearing above the other form elements? I am not sure I understand exactly, but based on screen shot, looks like you may be able to either adjust the zindex, or the transparency of that div make it fully opaque).

OneNerd 2009-07-18 22:17:21

YesCore issue = the div does not lay on top of the other form elements: fieldset, legend, checkbox, label, etc.

joej 2009-07-19 00:30:09

Answer 3

A:

Just out of interest put have you tried using the clear:both CSS tag after the floats to see if this has any effect? E.g. <br style="clear:both" />.

Michael Ciba 2009-07-18 22:55:55

In between the form "rows" (label, input pairs) I do a <br class="clear">.In the styles for the plugin ... I've not tried that, since there is only the "dropdown div" and the inside "ul li tags" -- and they all line up nicely.

joej 2009-07-19 00:31:33

Answer 4

+5 A:

You didn't actually mention this in your question, but you're only experiencing the problem in IE, right? Because I can't reproduce it in any other browser.

The answer is pretty simple:

Fix your doctype!

Your current doctype triggers quirks mode because it's missing the system identifier. Consequently, all bets are off. Change it to HTML4 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;

Even fixing your current doctype should do:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;

Or better yet, use the HTML5 doctype (since the only thing doctypes are good for is triggering standards mode, and this is the shortest doctype you need to do so):

<!DOCTYPE html>

mercator 2009-07-19 02:06:26

Answer 5

+1 A:

What version of IE are you using? This is a known problem in IE6.

In IE6, selects are windowed objects which means they exist on a plane above all other windowless elements on a page. The Select element in IE6 does not support z-index and other properties.

The only way I have reliably gotten around this problem is to hide the select with 'display:none' when the select is covered by the other element.

edit after comment

Removing z-index:0 from form#newsearch div.fs, form#newsearch fieldset in base_new.css (line 251) will fix it in FF

Emily 2009-07-19 11:53:42

I was just reading about Windowed vs. Non-Windowed elements last night. I will try an IFRAME solution to see -- HOWEVER, it occurs with Firefox 3.0.5, Chrome, Safari and IE. --> hence the post to StackOverflow :-)

joej 2009-07-19 16:43:56

Ah...I thought you were just having an IE problem. See my edit for a fix. It still won't work in IE6 though.

Emily 2009-07-19 17:09:26

**** Yes -- for firefox, the removal of fieldset{z-index:0} solved the problem. The drop-down div now lies on top of the other elements.

joej 2009-07-21 00:43:41

Answer 6

A:

OK -- I found the answer.

There is no pure-CSS solution (that I could find) that allows the existing jquery plugin's drop-down list to properly hover over all form elements.

Lesson learned: if they haven't crafted the markup properly ... there is nothing you can do.

Here is what I did to fix the Tokenizing Autocomplet Text Entry plugin (jquery) from http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

Edit the jquery.tokeninput.js file to:

Alter how it initially inserts the DIV
- Find the place where the dropdown is created (var dropdown = ...)
- Replace its .insertAfter(token_list) with .appendTo(document.body)
- This ensures the markup is not in the normal form/html flow
- Do this where the code initializes and inserts the dynamic "" its going to use
Alter its location when it shows the DIV
- Need to make sure it places the div not at the bottom, but under the input field
- So, in the show_dropdown_searching() function, tack these onto the string of calls tacked on the dropdown var (see below). Do this just before the .show() call.

.

.css("position", "absolute")
.css("top", $(token_list).offset().top + $(token_list).height()) 
.css("left", $(token_list).offset().left)

joej 2009-07-21 03:44:58

ansaurus

tags:

views:

answers:

Forms CSS ... this is getting ridiculous

related questions