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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    France
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background-image and firefox

    This code works perfectly with IE and not at all with firefox (no image)

    #cRight
    {
    width:170px;
    padding:0;
    vertical-align:top;
    background-color:#ffffff;
    height:100%;
    border-right:2px solid #9F4615;
    text-align:center;
    background-image:url(../images/basDroitCourbe.gif);
    background-attachment:fixed;
    background-position:100% 100%;
    background-repeat:no-repeat;
    }

    here's the doctype of the document >

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    I have tried with quoted url but it's exactly the same

    what's wrong ?

    thank you

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try using:
    Code:
    #cRight
    {
    width:170px;
    padding:0;
    vertical-align:top;
    height:auto;
    border-right:2px solid #9F4615;
    text-align:center;
    background: #fff url(../images/basDroitCourbe.gif) top left no-repeat;
    }
    instead. I noticed that you didn't have anything about the position of the image (that "top left" bit) and am thinking that might be throwing Firefox off. Also, I wonder about the height:100% bit. Be warned, though. I don't have Firefox so I can't test that. Just give it a shot and hope for the best. Let us know!
    -ts
    Last edited by tsguitar2004; 10-01-2004 at 06:41 AM.
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Shouldn't matter

    Neither rewriting the different background properties as a shorthand one nor suppying other position values (did you miss "background-position:100% 100%;"...? ) should have much influence.

    I do recommend though to restrict the properties for starters to only the background-image; when all is well it should by default tile in both directions starting from the top left corner. If this already doesn't work, the rest is pointless. Once you've got your image showing, start adding properties one by one until it goes wrong again or you end up with the desired effect.

    And although I must admit I have found no clue in the W3C recommendation demanding or even advising it, I'd recommend having all colons after a property followed by a space before starting with the (first) value, if for no other reason then legibility. I find it indicative though that in the specs themselves nearly all colons are followed by a space before the first value.

    Example:
    Code:
    color: red;
    instead of
    Code:
    color:red;
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    France
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I finally found it
    firefox doesn't recognize background-attachment:fixed;
    if I remove it it works

    thank you

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It didn't work? What element were you applying the image to? I tried both using a <div> and it worked just fine.

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    France
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it was on a td and with the fixed attachment it doesn't work .. if i remove it it works fine

    can i see your code xhtml + css ?
    thanks

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wonder if you tried the code I suggested. The background: fixed was actually the property that I removed when I changed it to that shorthand. I should have been more explicit about what I removed. Glad you got it to work!
    -ts
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    France
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes ... but I thought you forgot it
    anyway it's strang that attachment isn't supported by firefox

    thank you

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    fixed works just fine in Firefox -- can we see the webpage? I'm thinking there's something else going on, and IE is just being forgiving.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope! Didn't forget it! I seem to recall Eric Meyer having written a few things about background-attachment: fixed and I just remember that it doesn't work everywhere. So I just thought that would be an issue. Just curious if my code would have worked, so I know for future reference.
    -ts

    Edit: Blast it! So it's not a "fixed" problem. That would have been such a good name for a bug, too! The "fixed" problem hack...
    -Challenge The Status Quo
    -www.toddseal.com/rodin

  • #11
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For most CSS that "doesn't work in X browser" you can pretty much assume X is IE.

    Though, I was shagrined to note that Opera seems to be the only UA supporting CSS counters at this point.

  • #12
    Regular Coder
    Join Date
    Jul 2004
    Location
    France
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    only with body

    here is a test

    -------------------------------

    <?xml version="1.0" encoding="iso-8859-1"?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1"/>
    <title> nouveau </title>
    <style type="text/css" title="">
    <!--
    body
    {
    background-image:url(img_077.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    }
    .bgA {
    height:100px;
    width:100px;
    background-image:url(img_077.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:1px solid black;
    background-attachment:fixed;
    }
    -->
    </style>
    </head>
    <body>
    <form id="MainForm" method="post" action="">
    <div class="bgA">
    &nbsp;
    </div>
    <table>
    <tr>
    <td class="bgA">&nbsp;</td>
    </tr>
    </table>
    <p class="bgA">&nbsp;</p>
    </form>
    </body>
    </html>

    ------------------------------------------
    with attachment it works only on the bidy


  •  

    Posting Permissions

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