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

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -