+ Post New Thread
Results 1 to 6 of 6
Web Development Thread, FF background position problem in Coding and Web Development; I have been working on a website for a private client, and everything is going rather smoothly - except for ...
  1. #1

    Join Date
    Mar 2007
    Location
    Cambridge, UK & Reno, USA
    Posts
    339
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0

    FF background position problem

    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:

    Code:
    #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!
    Attached Images Attached Images

  2. #2

    beeswax's Avatar
    Join Date
    Jul 2005
    Location
    England
    Posts
    2,285
    Thank Post
    285
    Thanked 225 Times in 153 Posts
    Rep Power
    131

    Re: FF background position problem

    have you thought of making the shadow part of the image?
    Last edited by beeswax; 11th June 2008 at 07:09 PM.

  3. #3

    Join Date
    Mar 2007
    Location
    Cambridge, UK & Reno, USA
    Posts
    339
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0

    Re: FF background position problem

    Quote Originally Posted by beeswax
    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.

  4. #4

    Join Date
    Sep 2006
    Location
    Bath, BANES
    Posts
    19
    Thank Post
    2
    Thanked 1 Time in 1 Post
    Rep Power
    0

    Re: FF background position problem

    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:

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

    Code:
    * 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

  5. #5

    Join Date
    Mar 2007
    Location
    Cambridge, UK & Reno, USA
    Posts
    339
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    0

    Re: FF background position problem

    Quote Originally Posted by 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:

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

    Code:
    * 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
    Code:
    Now it looks good on all browsers...except Opera. Turns out Opera doesn't like negative margins - I migh tackle that later though!

  6. #6

    Join Date
    Sep 2006
    Location
    Bath, BANES
    Posts
    19
    Thank Post
    2
    Thanked 1 Time in 1 Post
    Rep Power
    0

    Re: FF background position problem

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

SHARE:
+ Post New Thread

Similar Threads

  1. EduGeek Joomla Package Logo Background Problem
    By FN-GM in forum EduGeek Joomla 1.0 Package
    Replies: 10
    Last Post: 7th December 2007, 09:06 PM
  2. CMIS Manager position
    By budgester in forum Educational IT Jobs
    Replies: 10
    Last Post: 10th October 2007, 02:37 PM
  3. Please delete-position filled
    By MGSTech in forum Educational IT Jobs
    Replies: 1
    Last Post: 11th September 2007, 08:33 AM
  4. ICT Technical Manager Position located at
    By leonard.powers in forum Educational IT Jobs
    Replies: 19
    Last Post: 16th March 2007, 09:20 AM
  5. ICT Technician Position
    By openhgs in forum Educational IT Jobs
    Replies: 0
    Last Post: 20th March 2006, 09:33 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •