problem in css issue ..

Question

i have 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;
}

its working great in ie

the problem is the bg image doesn't appear properly in firefox

here is the ie div view and here is the firefox div view

i don't know whats wrong is it the height or what? please i need some help

Answer 1

try declerating a strict doctype that should do the job

Answer 2

It appears that one browser is stretching the height/width to fill the div without keeping the image's height/width ratio, whereas the other is using the image's dimensions to scale it properly.

Make sure your image and your div have the same dimensions, minus the 2 extra pixels for the left and right border.

EDIT:

After closer inspection, it appears that the top of the second image is being cut off. Try specifying background-position: top left;.

Answer 3

You may need to supply the background-position, try this:

.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;
}