HTML and CSS

CSS forms z-index hell

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2008

Posts: 1

Reputation: bpeikes is an unknown quantity at this point

Solved Threads: 0

bpeikes

Offline

Newbie Poster

CSS forms z-index hell

Feb 9th, 2008

OK, I'm fairly new to the world of CSS and am basically ready to give up. I've tried to look for good books on CSS design, but they mostly just talk about the specifics. Not many "cookbooks" out there as far as I can tell.

Now the problem:
I've got a form in which I've created styles for each piece. Example, I've got a "item-field" style which I apply to a div which wraps an entire entry, a "item-label" which is the label for a field and "item-data" which is the input. All are divs, so a snippet of the code whould look like this:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div style="new-user-form" >
   <div style="item-field">
       <div style="item-label">Name</div>
       <div style="item-data"><input type="text" name="name" /></div>
   </div>
   <div style="item-field">
       <div style="item-label">Catgegory</div>
       <div style="item-data"><input type="text" name="category" /></div>
   </div>
   <div style="item-field">
       <div style="item-label">Age</div>
       <div style="item-data"><input type="text" name="age" /></div>
   </div>
</div>
<div style="new-user-form" >
   <div style="item-field">
       <div style="item-label">Name</div>
       <div style="item-data"><input type="text" name="name" /></div>
   </div>
   <div style="item-field">
       <div style="item-label">Catgegory</div>
       <div style="item-data"><input type="text" name="category" /></div>
   </div>
   <div style="item-field">
       <div style="item-label">Age</div>
       <div style="item-data"><input type="text" name="age" /></div>
   </div>
</div>

etc....
I've got some code which makes the category field an autocomplete dropdown of sorts. The problem is that the only way that I could get it to work is to make each item-field have decreasing z-index otherwise the "dropdown" in the item-field for category won't go in front of the Age textbox.
The problem is that if all of the "item-field" divs are on the same z-index, then their children can't display in front of the other boxes. THe problem is that if I make each "item-field" at decreasing z-index, the containing div, "new-user-form" wont expand as I add fields. I have a dynamic number of "item-field" objects.

I wish there was someway to have relative positioning for everything other than z-index, and then absolute z-indexing. How do people create well behaved sites with little pop-up messages, etc. It seems that you can't have a child draw in front of it's parents, only in front of siblings which have a lower z-index.

Any ideas? Books? Thanks everyone.

Last edited by bpeikes; Feb 9th, 2008 at 2:36 am.