Танцы с бубнами, или оберточный див.

[Destrifer]

<div class='sic'> <div class="call call-on"><span href="#non"> </span></div> <div class="email"><span> </span></div></div>

.sic div {    position:relative;    z-index:1;    overflow:hidden;    list-style:none;    padding:0;    margin:0 0 0.25em;	width: 30px;}.sic div:before,.sic div:after,.sic div span:before,.sic div span:after {    content:"";    position:absolute;    top:50%;    left:0;}.sic div span:before,.sic div span:after {    margin:-8px 0 0;    background:#c55500;}

Если код с классом то все выглядит так:

http://prntscr.com/475oby

А если без класса .sic, то так:

http://prntscr.com/475p17

 

Все пустое, ничего лишнего только тестовый код (показан не целиком).

 

Я не понимаю почему простой, оберточный тег с классом ломает верстку .

Edited July 28, 2014 by Destrifer

[Bloomerwd]

На http://jsfiddle.net/, пожалуйста.

И если не сложно, опиши как все должно выглядеть, как было задумано ?

[Destrifer]

Вот как должно:

http://jsfiddle.net/SX8Ax/

 

Добавляем оберточный див с классом АЕ, - все ползет:

http://jsfiddle.net/3Ewd5/

[Bloomerwd]

http://jsfiddle.net/BloomerWD/52Hp8/

[xpanda]

Действительно, танцы с бубнами какие-то. Я бы использовал обычное изображение. Может быть я просто не понимаю зачем эта пляска.

[Destrifer]

http://jsfiddle.net/BloomerWD/52Hp8/

Спасибо!

Догадывался, что проблема в наследовании.

 

2xpanda: это просто следующий уровень css-дзен , когда люди придумывают геморрой на пустом месте.

Простым смертным не понять.

 

Не а так понятно, конечно - меньше размер, меньше запросов, простота редактирования и манипуляций.

Edited July 29, 2014 by Destrifer

[advokatua]

это не танцы с бубном, а элементарный недостаток опыта, который сказывается в непонимании работы селекторов и их приоритета. 
Ты сначала написал: 
 

.ae li:before,
.ae li:after,
.ae li span:before,
.ae li span:after

 
а затем пишешь

.call span:before

суть в том, что второй код не в сотоянии переопределить первый, т.к. приоритет меньше

[Destrifer]

Я понимаю.

Но это глупо. Можно к call, ae добавить - а можно, у ae li стреть, и все будет работать. Т.е. зависит от написания а не сути.

[advokatua]

ничего не глупо, оно работает ровно так как ты и написал ведь. Просто нужно совсем чуть чуть знать о приоритете.

[xpanda]

простота редактирования и манипуляций.

Настолько просто, аж тему создал.

Edited August 15, 2014 by xpanda