hasLayout.net

Affected Versions

This bug affects: IE8, IE7

Symptoms

No background appears in IE when background image is used (using `background` shorthand property)

Date of the Tutorial

Fri Jul 17 18:14:59 2009

Description

This bug mostly affects lazy people :). The reason I say that is because the only reason why the bug appears is because one single space chacter is missing between the values of the background property. There may be several combinations that trigger the bug, however, I'll settle on one - no space between url() part and whatever would follow next, e.g. no-repeat. Let's glance at our demo:

Demo

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 115px;
    background: #fff url(/pics/hl_logo.png)no-repeat;
    /* note that there is no space after url() part */
}

In IE the image of a ladybug that is visibile in "sane" browsers will not show up.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Fri Jul 17 18:25:52 2009

Fixed Versions

all of the affected

Description

This is probably one of the easiest IE bugs to fix - simply add a space after the url() part; here's a fixed demo:

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 115px;
    background: #fff url(/pics/hl_logo.png) no-repeat;
    /* note that now there IS a space after url() part */
}

Now IE renders everything just fine...