html - Select element not working inside nested divs -
my html is
<div id="div1"> <div id="div2"></div> <div id="div3"> <div id="div4"> <select><several options></select> </div> </div> </div> </div>
the div
s nested , select
element won't work. using css in external file, wanted ask if html layout, itself, cause problems. understanding ie6/7 can cause z-index
issues, using chrome.
if wants take time review css happily post it, wanted first see if answerable on own.
edit
here css. note, div#2 semi-transparent background. other divs supposed positioned on top of it.
#div1{ width:100%; height:8em; position:relative; margin-top:3em; margin-bottom:3em; border-style:solid; border-width:thin; border-color:black; border-radius:4px; z-index:10; #div2{ width:80%; height:100%; position:absolute; margin-top:5%; left:0%; background-image:url(images/calendar_original.png); background-position:center; background-repeat:no-repeat; background-size:contain; opacity:0.2; z-index:1; } #div3{ width:100%; heigh:40%; overflow:hidden; margin-top:1em; padding-left:1.5%; z-index:13; } #div4{ height:4em; width:44%; float:left; font-family:verdana, helvetica,arial,sans-serif; font-size:medium; font-weight:bold; border-style:solid; border-width:thin; border-color:black; overflow:hidden; z-index:14;} select{ height:1em; color:black; font-family:helvetica,arial,sans-serif; font-size:large; font-weight:bold; width:150%; padding-left:0.5em; z-index:15;}
please, post html. often, happens me, don't see small things , 1 character missing or @ wrong place can lead errors.
so, first html code has 1 </div>
(closed div) much, if of code. probably, don't want after <div id="div2">
?
furthermore, ? if select not work (in browsers) may be, maybe " (quote) or / (slash) or sth small missing or e.g. wrote instead of etc. (believe me, had experts found wrote maibox instead of mailbox etc.)
depending on mean with: "is not working" (that never great description of error). not work? don't see select or cannot open it? or options not (completely) shown?
i don't think connected css or nested div issue, rather code within select/option tags have not posted.
furthermore, side note: if use chrome, still many users use different browsers, suppose want code clean , working right in of them, right? ;)
edit: 1 thing, can cause troubles select assign width of divs % values. should know how works: each element assumes 100% width of element located in. so, div4 has 44% width of div3, , select has 150% of 44% of 100% of 80% of 100%. however, 150% magic number, depending on overflow, select can cut @ 100% , right 50% possibly not shown.
in addition, if use png background image, need opacity on div2?
Comments
Post a Comment