Erledigt: IE6 Formfelder über Div

 


morphcore
Veteran

28.02.08
13:07 Uhr
Ich habe ein Menü gebaut welches sich bei mouseover ausklappt, ähnlich dem Menü hier bei Supertopic. Unter dem ausgeklappten Menü sind normale Dropdownfelder für eine Suche.
Wenn ich im IE6 das Menü ausklappe werden die Dropdownfelder über dem ausgeklappten
Div angezeigt und verdecken den darin enthaltenen Content. Auch Z-positioning bringt keinen effekt.

Jemand eine Lösung/Hack parat?
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
Christoph
Veteran

28.02.08
13:35 Uhr
link doch mal bitte )
Link zu diesem Beitrag in die Zwischenablage kopieren
morphcore
Veteran

28.02.08
13:52 Uhr
darf ich nicht. pee und hab auch keine zeit jetzt ne demo nachzubauen.
Link zu diesem Beitrag in die Zwischenablage kopieren
Toby
Veteran

28.02.08
13:54 Uhr
kot?
Link zu diesem Beitrag in die Zwischenablage kopieren
Fabu
Chefetage

28.02.08
13:55 Uhr
morphcore schrieb am 28.02.08, 13:07 Uhr:

Ich habe ein Menü gebaut welches sich bei mouseover ausklappt, ähnlich dem Menü hier bei Supertopic. Unter dem ausgeklappten Menü sind normale Dropdownfelder für eine Suche.
Wenn ich im IE6 das Menü ausklappe werden die Dropdownfelder über dem ausgeklappten
Div angezeigt und verdecken den darin enthaltenen Content. Auch Z-positioning bringt keinen effekt.

Jemand eine Lösung/Hack parat?

beim mousover die dropdowns einfach ausblenden (visibility:hidden)? hammer
Link zu diesem Beitrag in die Zwischenablage kopieren
morphcore
Veteran

28.02.08
13:59 Uhr
  1. <!-- START Primary Navigation -->
  2. <div id="primnav">
  3. <ul>
  4. <li>
  5. <div id="menu_parent_101" class="pn_attach">
  6. <h2>Party</h2>
  7. </div>
  8.  
  9. <div id="menu_child_101" style="position: absolute; visibility: hidden;">
  10. <a class="pn_attach" href="#">&Uuml;bersicht</a>
  11. <a class="pn_attach" href="#">News</a>
  12. <a class="pn_attach" href="#">Dein Eventkalender</a>
  13. <a class="pn_attach" href="#">Scouts</a>
  14. <a class="pn_attach" href="#">Gewinnspiele</a>
  15.  
  16. <div class="pn_dd_party_last_link"><a href="#">Specials</a></div>
  17. </div>
  18. <script type="text/javascript">
  19. at_attach("menu_parent_101", "menu_child_101", "hover", "y", "pointer");
  20. </script></li>
  21. <li>
  22. <div id="menu_parent_102" class="pn_attach">
  23. <h2>Dating</h2>
  24. </div>
  25.  
  26. <div id="menu_child_102" style="position: absolute; visibility: hidden;">
  27. <a class="pn_attach" href="#">&Uuml;bersicht</a>
  28. <a class="pn_attach" href="#">Datingprofil einstellen</a>
  29. <a class="pn_attach" href="#">Profilvorschau</a>
  30. <a class="pn_attach" href="#">Suche</a>
  31. <a class="pn_attach" href="#">MessageCenter</a>
  32.  
  33. <div class="pn_dd_dating_last_link"><a href="#">Visitenkarten verwalten</a></div>
  34. </div>
  35. <script type="text/javascript">
  36. at_attach("menu_parent_102", "menu_child_102", "hover", "y", "pointer");
  37. </script></li>
  38. <li>
  39. <div id="menu_parent_103" class="pn_attach">
  40. <h2>MySite</h2>
  41. </div>
  42.  
  43. <div id="menu_child_103" style="position: absolute; visibility: hidden;">
  44. <a class="pn_attach" href="#">&Uuml;bersicht</a>
  45. <a class="pn_attach" href="#">Deine MySite</a>
  46. <a class="pn_attach" href="#">MyZone bearbeiten</a>
  47. <a class="pn_attach" href="#">MyPics bearbeiten</a>
  48. <a class="pn_attach" href="#">MyClips bearbeiten</a>
  49.  
  50. <div class="pn_dd_mysite_last_link"><a href="#">MyMobile bearbeiten</a></div>
  51. </div>
  52. <script type="text/javascript">
  53. at_attach("menu_parent_103", "menu_child_103", "hover", "y", "pointer");
  54. </script></li>
  55. </ul>
  56. </div>
  57. <!-- primnav -->
  58. <!-- END Primary Navigation -->
  59.  
  60. <!-- START Find -->
  61.  
  62. <div id="header_finden">
  63. <form action="#" method="post">
  64. <ul>
  65. <li>
  66. <span class="txt_find_headline"> Dates finden:
  67. </span></li>
  68. <li>
  69. <fieldset>
  70. <legend> Auswahl der Region
  71. </legend>
  72.  
  73. <select id="postcode" name="postcode">
  74. <option value=""> -nach Ort-
  75. </option>
  76. <option value="" selected="selected"> Ganz Deutschland
  77. </option>
  78. <option value="10000-15000"> Berlin
  79. </option>
  80. <option value="20000-23000"> Hamburg
  81. </option>
  82.  
  83. <option value="30000-30700"> Hannover
  84. </option>
  85. <option value="40000-40700"> Düsseldorf
  86. </option>
  87. <option value="50000-51200"> Köln
  88. </option>
  89. <option value="60000-60700"> Frankfurt am Main
  90. </option>
  91. <option value="70000-70700"> Stuttgart
  92. </option>
  93.  
  94. <option value="80000-82000"> München
  95. </option>
  96. <option value="00001-09999"> 0xxxx
  97. </option>
  98. <option value="10000-19999"> 1xxxx
  99. </option>
  100. <option value="20000-29999"> 2xxxx
  101. </option>
  102. <option value="30000-39999"> 3xxxx
  103. </option>
  104.  
  105. <option value="40000-49999"> 4xxxx
  106. </option>
  107. <option value="50000-59999"> 5xxxx
  108. </option>
  109. <option value="60000-69999"> 6xxxx
  110. </option>
  111. <option value="70000-79999"> 7xxxx
  112. </option>
  113. <option value="80000-89999"> 8xxxx
  114. </option>
  115.  
  116. <option value="90000-99999"> 9xxxx
  117. </option>
  118. </select>
  119. </fieldset></li>
  120. <li>
  121. <fieldset>
  122. <legend> Auswahl des Geschlechts
  123. </legend>
  124. <select id="gender" name="gender">
  125.  
  126. <option value=""> -nach Geschlecht-
  127. </option>
  128. <option value="" selected="selected"> Alle Benutzer
  129. </option>
  130. <option value="m"> Chicos
  131. </option>
  132. <option value="w"> Chicas
  133. </option>
  134. </select>
  135.  
  136. </fieldset></li>
  137. <li>
  138. <fieldset>
  139. <legend> Auswahl der Aktivität
  140. </legend>
  141. <select id="online" name="online">
  142. <option value="0"> alle
  143. </option>
  144. <option value="1"> online
  145. </option>
  146.  
  147. </select>
  148. </fieldset></li>
  149. <li>
  150. <fieldset>
  151. <legend> Auswahl des Alters
  152. </legend>
  153. <select id="age_from" name="age_from">
  154. <option value=""> -von-
  155. </option>
  156.  
  157. <option value="18-25" selected="selected"> 18-25
  158. </option>
  159. <option value="25"> 25
  160. </option>
  161. <option value="35"> 35
  162. </option>
  163. <option value="45"> 45
  164. </option>
  165. <option value="55"> 55
  166. </option>
  167.  
  168. </select>
  169. </fieldset></li>
  170. <li>
  171. <fieldset class="find_button">
  172. <legend> Finden
  173. </legend>
  174. <div class="clear_button">
  175. <p>
  176. <a href="#" class="button_grey" onclick="this.blur(); return false;">
  177.  
  178. <span> Finden!
  179. </span></a>
  180. </p>
  181. </div>
  182. </fieldset></li>
  183. </ul>
  184. </form>
  185. </div>
  186. <!-- header_finden -->
  187.  
  188. <!-- END Find -->
  189.  
  190.  
  191. <!-- END Category -->
  192. </div>
  193. <!-- Header -->
  194. <!-- END Header -->
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
Toby
Veteran

28.02.08
14:28 Uhr
versteh ich nicht ganz, bei mir schaut's dann so aus:

Link zu diesem Beitrag in die Zwischenablage kopieren
morphcore
Veteran

28.02.08
14:30 Uhr
das konstrukt drumherum ist komplexer als dass ich es einfach hier hineinkopieren könnte, und darf es leider nicht veröffentlichen. hätte ja sein können dass es einen hack für dieses explizite problem gibt. mir würde nur einfallen die dropdowns in nen iframe zu packen aber das werde ich definitiv nicht tun. vorher bau ich die dropdowns auch als ausklappbare divs.
Link zu diesem Beitrag in die Zwischenablage kopieren
Toby
Veteran

28.02.08
14:35 Uhr
Also ich hab einmal per Javascript ein Div sichtbar/unsichtbar gesschalten, in dem div waren auch diverse Dropdown-Felder, da gab's keine Probleme.

Einfach dem Div eine eindeutige ID geben und dann den Style bei Aktivierung ändern:

  1. function sh(id)
  2. {
  3. if(document.getElementById(id).style.display == ''){
  4. document.getElementById(id).style.display = 'none';
  5. }
  6. else{
  7. document.getElementById(id).style.display = '';
  8. }
  9. }
Quelltext in Zwischenablage kopieren

planlos
Link zu diesem Beitrag in die Zwischenablage kopieren
morphcore
Veteran

28.02.08
14:40 Uhr
mal varsuchen.
Link zu diesem Beitrag in die Zwischenablage kopieren
Kaihawaii
Dauergast

28.02.08
15:41 Uhr
Link zu diesem Beitrag in die Zwischenablage kopieren
Fabu
Chefetage

28.02.08
15:43 Uhr
Der gängige Workaround besteht darin, das select per visibility zu verstecken, wenn das Menü ausgeklappt wird.

ich bin so kluk! cheer
Link zu diesem Beitrag in die Zwischenablage kopieren
Kaihawaii
Dauergast

28.02.08
16:13 Uhr
Fabu schrieb am 28.02.08, 15:43 Uhr:

ich bin so kluk! cheer
man könnte auch statt das nur auszublenden gleich ein Bild, also ein Abbild des dropdown als gif einblenden...

muhaha, was füe ein fusch hammer
Link zu diesem Beitrag in die Zwischenablage kopieren
morphcore
Veteran

28.02.08
16:13 Uhr
baue jetzt die dropdowns auch als divs mit radiobuttons drin.
fabus bauernlösung find ich doof.

danke trotzdem.
Link zu diesem Beitrag in die Zwischenablage kopieren
Fabu
Chefetage

28.02.08
16:21 Uhr
morphcore schrieb am 28.02.08, 16:13 Uhr:

fabus bauernlösung find ich doof.

ich finde das voll elegant. pah
Link zu diesem Beitrag in die Zwischenablage kopieren
Kaihawaii
Dauergast

28.02.08
16:29 Uhr
morphcore schrieb am 28.02.08, 16:13 Uhr:

baue jetzt die dropdowns auch als divs mit radiobuttons drin.
fabus bauernlösung find ich doof.

danke trotzdem.

vielleicht erspart dir das die Arbeit...
http://badboy.ro/articles/2007-01-30/niceforms/


hf
Link zu diesem Beitrag in die Zwischenablage kopieren
stefan schleich
Veteran

28.02.08
16:56 Uhr
Kaihawaii schrieb am 28.02.08, 16:29 Uhr:

morphcore schrieb am 28.02.08, 16:13 Uhr:

baue jetzt die dropdowns auch als divs mit radiobuttons drin.
fabus bauernlösung find ich doof.

danke trotzdem.

vielleicht erspart dir das die Arbeit...
http://badboy.ro/articles/2007-01-30/niceforms/


hf

hmmm.

e: bei jedem reload siehts anders aus eek
Link zu diesem Beitrag in die Zwischenablage kopieren
Kaihawaii
Dauergast

28.02.08
17:03 Uhr
e: bei jedem reload siehts anders aus

hey dee schonklar
womit schaust du?
Link zu diesem Beitrag in die Zwischenablage kopieren
stefan schleich
Veteran

28.02.08
17:06 Uhr
Kaihawaii schrieb am 28.02.08, 17:03 Uhr:

e: bei jedem reload siehts anders aus

hey dee schonklar
womit schaust du?

huhu! hab mit ff 2.0.0.12 xp geschaut.
Link zu diesem Beitrag in die Zwischenablage kopieren
Kaihawaii
Dauergast

28.02.08
17:22 Uhr
hmm, habs auch mit ff2, ie6&7 und opera auf xp getestet, ohne probleme...
allerdings dauert es ein bischen bis die bilder alle geladen sind, liegt wohl am server
Link zu diesem Beitrag in die Zwischenablage kopieren
 
#