HTML: цвет фона и изображения - почему цвет не отображается под изображением?

Question

Я пытаюсь добавить изображение стрелки рядом с текстом в промежутке. Вот HTML-код, с которым я работаю:

<span id="status" class='unreviewed'>
  Unreviewed 
  <img src="bullet_arrow_down.png" />
</span>

Теперь я закрасил фон пролета с помощью этой CSS:

#status {
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

#status span.unreviewed {
  padding: 3px 4px; 
  background:#DA704B none repeat scroll 0 0;
}

#status span.unreviewed img {
  float: right;
}

Теперь это показывает, что все правильно выстроено, но цвет фона не выходит за пределы слова "Unreviewed" Изображение, несмотря на то, что оно является прозрачным png, позади белое, а не # DA704B.

Это касается как Firefox, так и Safari. Любая помощь будет оценена!

Answer 1

Пролеты должны иметь отображение: блок; чтобы так работать.

#status {
  display: block;
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

Answer 2

Ну, что выскакивает из меня:

#status span.unreviewed 

будет селектором для span с классом "unreviewed", который является потомком из #status. Селектор, который вы ищете,

#status.unreviewed

Возможно, вы захотите взглянуть на спецификации w3c для CSS2, чтобы избежать подобных проблем с селектором. http://www.w3.org/TR/CSS2/selector.html

Надеюсь, это поможет.

edit: еще один быстрый момент, почему бы не использовать background-color вместо background, поскольку все, что вы делаете, это меняете цвет фона?

Answer 3

Вы также можете найти, что стоит заявить:

#status span.unreviewed img {
background-color: transparent;
}

это должно как минимум удалить белый фон изображения по умолчанию.

Answer 4

изменение:

#status span.unreviewed {

в span.unreviewed {

, который работает для меня во всех браузерах.

Если это все еще не работает, попробуйте сделать его блочным или использовать div, поскольку раскраска не совсем работает, как вы ожидаете для встроенных элементов