CSS nested elements ignored by Chrome/Firefox? -
this might painfully easy, apologies in advance, i'm on hour 5 trying figure mess out. here's ul i'm trying present horizontal bar:
<div id="navbarwrapper"> <ul id="navbar"> <li><a href="works.html">search</a></li> <li><a href="works.html">tips</a></li> <li><a href="works.html">neighborhoods</a></li> <li><a href="works.html">relocation</a></li> </ul> </div>
and here's strange css seems malfunction:
#navbar {} #navbar ul { list-style-type: none; margin: 0px; padding: 0px; } #navbar li {display: inline;} #navbar ul li {text-decoration:line-through;}
the problem i'm having markup, text wrapped in anchor tags in html aren't receiving line-through (i'm using line-through placeholder because it's obvious when it's working or not; don't want line-through in end).
here's strange bit. if replace "#navbar ul li a" nest following, works:
#navbar li {text-decoration:line-through;}
furthermore, if change "#navbar li{display: inline;}" following, lose inline property:
#navbar ul li{display:inline;}
is because i'm duplicating "#navbar" , "ul"? seems entirely strange me, , feel though i've been able use syntax in past without error.
thanks in advance.
your selectors not correct.
#navbar
ul element itself, selector #navbar ul
not target anything.
the correct selectors are
#navbar { list-style-type: none; margin: 0px; padding: 0px; } #navbar li { display: inline; } #navbar li { text-decoration:line-through; }
Comments
Post a Comment