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 alt text http://img341.imageshack.us/img341/3595/35520026.jpg and here is the firefox div view alt text http://img641.imageshack.us/img641/950/31289427.jpg

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

I suspect firefox doesn't like the ../ relative link. but I'm not confident enough there to list that as an answer. — Joel Coehoorn
– Joel Coehoorn, Commented Feb 15, 2010 at 17:20
These two images don't say anything about what you think is wrong. Please describe the problem, and if possible link to an actual web page by way of example. If it's just a height issue, it may well be to do with adjacent/surrounding elements. — Richard H
– Richard H, Commented Feb 15, 2010 at 17:21
There's more going on here then just your CSS, see Pekka's comment. — Erik
– Erik, Commented Feb 15, 2010 at 17:21

mythz · Accepted Answer · 2010-02-15 17:24:57Z

1

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

answered Feb 15, 2010 at 17:24

mythz

144k31 gold badges253 silver badges400 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jan-Willem Hoekman · Accepted Answer · 2010-02-15 17:20:21Z

1

try declerating a strict doctype that should do the job

answered Feb 15, 2010 at 17:20

Jan-Willem Hoekman

651 silver badge8 bronze badges

Comments

Timothy S. Van Haren · Accepted Answer · 2010-02-15 17:20:28Z

0

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

answered Feb 15, 2010 at 17:20

Timothy S. Van Haren

8,9762 gold badges32 silver badges34 bronze badges

Collectives™ on Stack Overflow

problem in css issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related