[tceramesh]

Hi,
I am using auto suggest drop down menu..by using div tags and css.. below that i have navigation bar by using list items..
when i search in auto suggest the results are display behind the navigation bar...
what can i do....anyone help me ..

Expand|Select|Wrap|Line Numbers

1. this is for auto suggest css
2.  
3. #auto li{padding:0; margin:0px 0px 0px 15px; border:0; list-style:none; position:absolute;}
4.  
5. and this for navigation section:
6. .groupItem .itemHeader
7. {
8.     line-height: 23px;
9.     background-color:#541C03;
10.     color: #000;
11.     padding: 0 0px;
12.  
13.     font-weight: bold;
14.     font-size: 16px;
15.     height: 23px;
16.     position: relative;
17. }
18.  
19. .groupItem .itemHeader a
20. {
21.     position: absolute;
22.     right: 30px;
23.     top: 0px;
24.     font-weight: normal;
25.     font-size: 11px;
26.     text-decoration: none;
27. }
28. .cross
29. {
30.     position: absolute;
31.     right: 10px;
32.     top: 0px;
33.     font-weight: bold;
34.     font-size: 11px;
35.     text-decoration: none;
36.     cursor:pointer;
37. }
38.  
39.  

[Dormilich]

I don't know, whether the problem is caused by this, but I recommend _always_ defining top/bottom, left/right properties when using position: absolute/relative (like the first two clauses).

[Markus]

Maybe giving the auto-suggest a z-index would help.

[tceramesh]

Originally Posted by Dormilich

I don't know, whether the problem is caused by this, but I recommend _always_ defining top/bottom, left/right properties when using position: absolute/relative (like the first two clauses).

Hi,
i applied the properties that u mention... but still i am getting the same problem

[tceramesh]

Originally Posted by markusn00b

Maybe giving the auto-suggest a z-index would help.

hi,
u told about z-index, where can i put that ...?? i don't know how to apply that..can u explain ( i saw in w3 schools but still i get confused )

[Dormilich]

Originally Posted by tceramesh

hi,
u told about z-index, where can i put that ...?? i don't know how to apply that..can u explain ( i saw in w3 schools but still i get confused )

It's handled like any other property, e.g.

Expand|Select|Wrap|Line Numbers

1. #auto li {
2.   /* your definitions here */
3.   z-index: 20;
4. }
5.  
6. .groupitem {
7.   /* your definitions here */
8.   z-index: 10;
9. }

this should force the browser to draw li above/on top of .groupitem (due to the higher z-index).

Basicly z-index is something like stacking height and in the end you look from above to (more or less) overlapping elements having the ones with lower z-indices beneath the other ones.

note: you can even use z-indices in the range of 1000 an more, only question is, whether this is useful or not (there you have to make your own experiences)