проблема в вопросе css

Question

У меня есть div take css class

.headbg01
{
 background-image: url(../images/header_background01.jpg);
 border-left: #cccccc 1px solid;
 background-color: #ffffff;
 width: 920px;
 background-repeat: no-repeat;
 height: 160px;
 border-right: #cccccc 1px solid;
}

отлично работает в т.е

проблема в том, что изображение bg не отображается должным образом в Firefox

вот вид ie div альтернативный текст http://img341.imageshack.us/img341/3595/35520026.jpg и вот представление Firefox Div альтернативный текст http://img641.imageshack.us/img641/950/31289427.jpg

Я не знаю, в чем дело, это высота или что? пожалуйста, мне нужна помощь

Answer 1

Возможно, вам потребуется указать background-position, попробуйте это:

.headbg01
{
  background: #fff url(../images/header_background01.jpg) no-repeat top left;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  width: 920px;
  height: 160px;
}

Answer 2

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

Answer 3

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

Убедитесь, что ваше изображение и ваш div имеют одинаковые размеры, за исключением 2 дополнительных пикселей для левой и правой границы.

EDIT:

После более тщательного изучения выясняется, что верх второго изображения обрезается. Попробуйте указать background-position: top left;.