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
Post a Comment