FF background position problem

[sqdge]

I have been working on a website for a private client, and everything is going rather smoothly - except for one thing. The client wants a shadow on their site, so I have been playing with repeating images in table cells and div boxes. However, I find that FF and IE can never agree on how to display something.

 

At the moment, I have the right-hand shadow in a div box, which displays perfectly in IE. However, firefox seems to want it about 10px further over than it should be. The CSS code it is listening to is:

 

#rightshadow {
width:753px !important;
padding:0px;
margin:0px;
background-image:url(../images/rightshadow.png);
background-position:732px 0px;
background-repeat:repeat-y;
}

 

732px is exactly where is should be, and is what IE displays, but FF doesn't. I feel like there is just a peice of code that will correct this, but can't currently think what it could be. Any ideas?

 

I've attached an image of the problem

 

Thanks - it's good to be back!

[beeswax]

have you thought of making the shadow part of the image?

[sqdge]

have you thought of making the shadow part of the image?

 

I thought of doing that at the start - but the design of the site, and requirements from the client, meant that the shadows had to be affixed separately. Which is a shame really, because that would solve the problem.

[nickje]

This probably isn't the best way to overcome the problem, but I'd create a separate CSS rule for IE and FF to explicitly state the position in each case

 

For FF:

 

#rightshadow {
width:753px !important;
padding:0px;
margin:0px;
background-image:url(../images/rightshadow.png);
background-position:722px 0px;
background-repeat:repeat-y;
}

 

For IE:

 

* html #rightshadow {
background-position:732px 0px;
}

 

Firefox should ignore the second rule and get it's background-position property from the first rule.

 

Hope it helps - I haven't tested this though!

 

Regards,

 

Nick

[sqdge]

This probably isn't the best way to overcome the problem, but I'd create a separate CSS rule for IE and FF to explicitly state the position in each case

 

For FF:

 

#rightshadow {
width:753px !important;
padding:0px;
margin:0px;
background-image:url(../images/rightshadow.png);
background-position:722px 0px;
background-repeat:repeat-y;
}

 

For IE:

 

* html #rightshadow {
background-position:732px 0px;
}

 

Firefox should ignore the second rule and get it's background-position property from the first rule.

 

Hope it helps - I haven't tested this though!

 

Regards,

 

Nick

 

Thanks for your help. Your solution didn't quite work, but did remind me that I could create conditional comments - so i just created a new style sheet for IE and inserted the following code in the

 

Now it looks good on all browsers...except Opera. Turns out Opera doesn't like negative margins - I migh tackle that later though!

[nickje]

Aha! Conditional comments... of course! Glad you got it sorted, sqdge.