on this page: http://billboardfamily.com/about/
In IE8, the image above the text in the big gray area loads SOMETIMES, but not always, and when it does load…it looks like it STARTS TO repeat once again into the text. Any ideas why this is happening?
Works like a champ in Firefox.
background:url("../images/aboutus_bg.png") no-repeat scroll 0 0 #F2F2F2;
Did you test it without the scroll? And why do you use the top padding 455px?
Seems to me Paul’s already given you the answer. What else is there to say?
Is it this one?
background: #ffffff url(…/images/headerbg.gif) repeat-x 0 0;
You let it repeat. Should be:
background: #ffffff url(…/images/headerbg.gif) no-repeat 0 0;
It is this one
http://billboardfamily.com/wp-content/themes/mensa/assets/images/aboutus_bg.png
background: #f2f2f2 url(…/images/aboutus_bg.png) no-repeat 0 0;
OMG! That is the answer. It now works in Firefox, and IE8 on my machine. Thanks!!!
Any ideas on a workaround on this issue: http://www.sitepoint.com/forums/showthread.php?t=700381
You’ve just copied that from Firebug though haven’t you? Firebug always adds all the properties when the background shorthand is used. Check the actual CSS file, scroll’s not there:
background: #f2f2f2 url(../images/aboutus_bg.png) no-repeat 0 0;
What scroll? Also on the padding, this was already done in the original design, and it worked great in Firefox.
It looks like the border-radius.htc you’re using is adding inline style to that div of background: none transparent scroll repeat 0% 0%. It’s the repeat that is causing the image to repeat (obviously). It doesn’t show up in Firefox because FF doesn’t apply the .htc (because it doesn’t need to). I’d guess that the .htc is also causing problems with the image loading initially too. If you’re determined to have rounded corners for IE, I’d think about using http://css3pie.com/ instead.