html - Cannot add CSS attributes to <span> -

in css file have following rules:

div.breadcrumbs span {     position: relative;     left: -120px;     height: 16px;     line-height: 16px;     margin: 0 20px;     overflow: hidden; }  div.breadcrumbs img {     margin: 0 -20px;     padding: 5px 5px 0px 5px; }  div.breadcrumbs {     color: #88263f;     font-weight:bold; } 

the rules img , a work, not span.

also not work like

span {     display: none; } 

at moment have no clue how debug this.

in principal, posted css works.

if html looks this...

<div class="breadcrumbs">     these <span>breadcrumbs</span> in line... </div> 

and css:

div.breadcrumbs span {     position: relative;     left: -120px;     height: 16px;     line-height: 16px;     margin: 0 20px;     overflow: hidden; } span {     display: none; } 

then span element not shown intended.

see demo at: http://jsfiddle.net/audetwebdesign/qyu5a/

you may have other problems such other css rules conflicting , preventing display: none property working correctly.

there nothing wrong positioning of inline element, may not expect depending on line height , surrounding content.

you may want learn more how css cascade , specificity work.

reference: http://www.w3.org/tr/css2/cascade.html#cascade

note: height property ignored inline elements.