scriptygoddess

There's probably a really good reason for this (actually, wait. We're talking about IE. Nevermind)

Just wanted to post a reminder to myself should I ever come across this weirdness again. I was working on a layout recently, and everything was working fine in Firefox, and everything was fine in IE except for one little nagging problem. A box that had a repeating background image in it sometimes showed up with the background in IE, and then sometimes not. Sometimes if I refreshed the page – suddenly the background image appeared. The line in my css calling for the background image looked like this:

#mybox {
background: url(images/my_background_tile.jpg) top left repeat-y;
}

Everything looks kosher – at least it SHOULD be. For some reason IE REALLY wanted a background color too! (even though it wouldn't be showing up because the image would be covering over it). Okay. Whatever. So this is what made the background image show up consistently:

#mybox {
background #fff url(images/my_background_tile.jpg) top left repeat-y;
}

IE was happy. And there was much rejoicing.
(*one quick note: this problem was specific to REPEATING background images. Background images set to no-repeat were not having problems)

Oh also – don't ever do this:

#mybox {
background: #fff url(images/my_background_tile.jpg) top repeat-y;
}

All kinds of weirdness happens then. If you're going to specify background coordinate locations (with either "top", "left", "5px", etc.) you have to specify both x and y locations. IE will hate you otherwise. And we don't want THAT! do we?

Related posts:

1. Striping IMG tags from the_content in WordPress (and how to fudge page excerpts) Background: For a site I was working on, I was...
2. Multi-Row Carousel and Image Loader with JQuery A recent project I've been working on involved a portfolio...

Related posts brought to you by Yet Another Related Posts Plugin.