css - Missing span element -
i have problem span
element in ie (currently tested against ie9 , ie10). when open f12 developer tools , select span
element can't find on screen. however, if manually assign background-color
other transparent
or inherit
shown @ expected place.
the problem is, span
element used alignment element popup, since element missing, popup incorrectly aligned.
i wasn't able observe behavior in jsfiddle, yet. , can't test in other browsers.
here how significant markup looks like:
<div id="div1"> <div id="div2"> <span> <input id="in" value="somename"></input> <label for="in">person surname:</label> </span> </div> </div>
and corresponding css shown in developer tools (except background-color
attributes):
#div1 { background-color: grey; cursor: auto; font-family: thoma, verdana, helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: left; color: #000000; bottom: 0px; height: auto; left: 0px; position: absolute; right: 0px; top: 0px; width: auto; } #div2 { background-color: blue; cursor: auto; font-family: thoma, verdana, helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: left; color: #000000; } span { /* background-color: red; */ font-family: thoma, verdana, helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: left; color: #000000; margin-left: 0px; margin-right: 0px; box-sizing: border-box; width: 100%; } input { /*background-color: transparent;*/ color: #000000; padding: 1px 2px 1px 3px; font-family: thoma, verdana, helvetica, sans-serif; font-size: 11px; font-weight: normal; margin: 1px; border: 1px solid #b9b9b4; overflow-x: hidden; overflow-y: auto; width: 90%; } label { cursor: auto; font-family: thoma, verdana, helvetica, sans-serif; font-weight: normal; text-align: left; color: #000000; left: 0px; top: -99999px; font-size: 0px; position: absolute; }
any ideas, why span
tag missing?
maybe should clarify, i'am not interested in solution (since found one), in explanation why observe different behavior. both ie vs jsfiddle , vs without background-color.
i not responsible html markup, , can't change that. have limited access change css.
either use display:block or float:left tested on ie9-10
also note that: use div instead, span tag not designed use , not problem create #div3 unless have specific.
span { background-color: red; display:block; /* float:left; */ font-family: thoma, verdana, helvetica, sans-serif; font-size: 11px; font-weight: normal; text-align: left; color: #000000; margin-left: 0px; margin-right: 0px; box-sizing: border-box; width: 100%; }
Comments
Post a Comment