Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Location
    Rio, Brazil
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Background image gets displaced in FF

    Hello all!
    I have a mysterious problem and I haven´t found a single reference to it.
    I have a tableless page that uses strict xhtml doctype:
    http://www.atividade.com.br/licksass...agina=servicos

    It is centered using Simon Coggins' technique of giving the page container an absolute 50% position and a negative margin.
    Inside the page, the content div has a background image, which is supposed to be fixed to the top-right corner.
    Now the fun part: IE6 renders it OK, FF and IE7 don´t. I haven´t tested with other browsers.
    Assuming IE6 is rendering it incorrectly (which it normally does), what would be the correct way of doing it?

    ****EDIT****
    Actually, I just found a similar problem in this post.
    I tried removing the "fixed" property from the background, and voila, the scene is the exact opposite:
    FF keeps the background fixed, the way I intended it to (although I can´t understand why).
    IE6 does what I thought it would do: prints the background only once.
    You can see an example of this new situation in this link.
    ****/EDIT****

    I appreciate your help,

    Phil
    Last edited by philosp; 10-27-2006 at 11:59 PM. Reason: relevant findings

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Internet Explorer doesn’t support the fixed value correctly. When you use background-attachment: fixed, that means “fixed” relative to the viewport, not the element itself. In other words, Firefox positions the background image at the top right of the page instead of at the top right of the div element; that’s why you can’t see it unless you make the window very small. Fixing the background locally to an element is done via CSS3’s background-position: local declaration; unfortunately, I don’t believe that any browser has implemented it yet.

    Now, you could work around that by providing the correct code normally to standards-compliant browsers and serving a conditional comment (CC) to Internet Explorer 6 to override that and exploit it’s rendering flaw. However, while it’ll display fine in Internet Explorer 6 and the others, Internet Explorer 7 still won’t look like you want it to; I’m not sure why either. In the worst case, you can simply hide the background entirely from IE7 using a version-specific CC.

    By the way, the star-HTML exploit doesn’t work in Internet Explorer 7.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Location
    Rio, Brazil
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your answer, Arbitrator!
    Now, I still have a question about background-image behavior: Why does FF render the background as if it was fixed? I mean, that's exactly what I wanted, but it goes against my understanding of what "background-position: scroll" is supposed to do. After removing the "fixed" property I expected it to behave like it does on IE6 and 7. Could it be a FF issue instead?

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    From http://www.quirksmode.org/css/background.html with regards to background-attachment: scroll: “The background image scrolls along with the document. Since scrolling a div is not scrolling the document, the background image of my div with overflow: auto shouldn't react.”
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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