A couple of days ago while working on a website redesign I've noticed a small bug in Internet Exlorer 6 regarding some background settings in the CSS file. Well, I've seen this little bug before, but I didn't waste more time on this since this bug is very easy to fix. Actually it's not worth to talk or write about, but anyway here I am writing this small tutorial. This little bug appears when setting up a background image using the shorthand way. Here is an example how the normal working shorthand code looks like.
background: #ccc url("background-image.gif") no-repeat 0 0;As you can see we have a grey background color ( #ccc ), a nice background image called "background-image.gif" which isn't repeated horizontal nor vertical. The horizontal align of the background image is set to left and it's vertical to top. This is all clear and you shouldn't have any problems with this setting in any browser. But what happens if you type in this code without leaving space between the bacgkround image and the repeat option ? Here is the code how it looks like. . .
background: #ccc url("background-image.gif")no-repeat 0 0;If you refresh the page in Internet Explorer 6, you'll see that the missing space between url("background-image.gif") and no-repeat will make Internet Explorer 6 act like there's no background image at all. Why this happens is another unsolved mystery in the Internet Explorer universe. All I know is, it's important to have a space between the image URL and the image repeat option ( no-repeat / repeat-x / repeat-y ). If you keep this in mind there shouldn't be an bug in Internet Explorer 6.
I don't have Internet Explorer 7 installed on my computer so I can't tell you wether this has been fixed or not. If you use the lates Internet Explorer version please let me know wether this has been fixed or not by sending me a note via the contact form.
Add to social bookmarking websites