background-image and firefox

gwendaal · 10-01-2004, 06:06 AM

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

tsguitar2004 · 10-01-2004, 06:39 AM

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

ronaldb66 · 10-01-2004, 08:00 AM

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;

gwendaal · 10-01-2004, 09:29 AM

I finally found it
firefox doesn't recognize background-attachment:fixed;
if I remove it it works

thank you

gohankid77 · 10-01-2004, 01:04 PM

It didn't work? What element were you applying the image to? I tried both using a <div> and it worked just fine.

gwendaal · 10-01-2004, 09:26 PM

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

tsguitar2004 · 10-01-2004, 09:31 PM

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

gwendaal · 10-01-2004, 09:34 PM

yes ... but I thought you forgot it
anyway it's strang that attachment isn't supported by firefox

thank you

bradyj · 10-01-2004, 09:42 PM

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.

tsguitar2004 · 10-01-2004, 09:42 PM

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

]|V|[agnus · 10-01-2004, 09:49 PM

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.

gwendaal · 10-02-2004, 07:00 PM

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="">

</style>
</head>
<body>
<form id="MainForm" method="post" action="">
<div class="bgA">
 
</div>
<table>
<tr>
<td class="bgA"> </td>
</tr>
</table>
<p class="bgA"> </p>
</form>
</body>
</html>

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