html - Disappearing <li> content. Alternating -


the css , html code below generate

news interviews ---------------------- djing break dance ---------------------- 

why horizontal line disappear?

the height of each <li> changed 53px, did not give needed effect. if <hr> inserted instead of <div> horizontal_line_rule, appears.

div#footer{     /*font-family: ptserifnarrow, sans-serif;*/     /*background-color: #e6e6e6;*/     background-color: #050505;     height: 23.75em;     clear: both; } div#footer a{     color: inherit; } div#footer span{     color: #8f8f8f; } /* 9.03.2014. edited. */ div#footer > div#footer-container{     padding: 0 6.875em;     /*padding-top: 1.312em;*/     padding-top: 2.624em;     padding-right: 1.312em;      width: 1380px;     background-color: #050505; } div#footer-container > ul > li{     display: block;      color: white;     font-family: proxima nova, sans-serif;     font-size: 11px; } div.horizontal_line_rule{     clear: both;     width: 10%;     background-color: #696969;     opacity: 0.2;     filter: alpha(opacity=20); /* ie8 , earlier. */     height: 0.5px;     margin-top: 10px;     margin-bottom: 10px; } div#footer-container > ul > li > {     text-decoration: none; } 

<div id = "footer">     <div id = "footer-container">         <ul>         <li>             <a href="/">news</a>             <div class = "horizontal_line_rule"></div>         </li>         <li>             <a href="../interviews">interviews</a>             <div class = "horizontal_line_rule"></div>         </li>         <li>             <a href="../djing">djing</a>             <div class = "horizontal_line_rule"></div>         </li>         <li>             <a href="../break-dance">break dance</a>             <div class = "horizontal_line_rule"></div>         </li>         </ul>     </div> </div> 

additionally, how display several such lists in line?

i'm not 100% sure here, highly suspect it's cause you've asked half-pixel height. smallest pc can display pixel, definition, can't you've asked , you'd either 1px or 0px depending on rounding & background logic can't control.

turn 1px , should more consistent. if don't want solid you'll have go lighter gray cause can't half pixel.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -