background-size property overwritten by background shorthand by Firefox

As I start to use new CSS3 properties more often new issues are arising that I didn’t have to deal with before. Building out a new responsive site now that is using retina images for the mobile site so I’m using the background-size property extensively. I ran into a bug in Firefox 11 where in some situations the property was ignored.

Here’s an example of the code that did not work in Firefox:

112
113
114
115
116
117
118
119
120
121
122
123
124
125
.author:after {
	background-size: 30px 30px;
	content: "";
	height: 30px;
	padding: 0;
	position: absolute;
	right: -32px;
	top: 0;
	width: 30px;
}
 
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
}

Turns out, using the background shorthand was overwriting the size. Adding the background-size property to the more specific author declaration fixed the issue.

It looks like this is actually correct behavior according to the spec. Using the shorthand overwrites all other background properties. From the Standarista site’s notes on CSS3 background properties:

If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values […].

I thought it was time to learn the more detailed background shorthand that includes the new properties like background-size and background-clip. However, the W3C’s spec for it isn’t actually supported by seemingly any browsers yet. Here’s what the new shorthand declaration of the code should be:

123
124
125
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top / 30px 30px no-repeat;
}

Unfortunately, that valid line of CSS breaks in every browser I tried it on and results in the image not displaying at all. I ended up needing to define the background-size property separately after the shorthand declaration:

123
124
125
126
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
	background-size: 30px 30px;
}

The actual code will vary depending on what you’re doing but the important thing is to not forget to include the other background properties even if you’re not specifying them in your shorthand.

WordPress post scheduling bug

If you schedule posts for future publication in your WordPress blogs, don’t just Set It and Forget It but remember to check frequently to confirm your posts actually go live. You could have posts still sitting in limbo that you thought had been published out days or weeks ago.

Various server configurations or temporary issues can apparently cause a scheduled post not to go out on time. When you look at your list of posts the status Missed schedule shows up in the date column (see the graphic at right) and once it’s scheduled time has past WordPress will not try again to publish that post. In order to publish the post you have to go in and very frustratingly switch the post status back to draft, change the time of the post, then and try to republish to get it onto the site.

We’re running WordPress 2.7 but it still appears to affect some sites running the current 2.8.1 version. Other than manual workaround mentioned above, there are a few other “fixes” you can try to solve the problem until a fix is in the official WordPress builds.

Please note the following workarounds have not been tested by MarketNet, use at your own risk:

  1. Modify the file wp-cron.php
  2. Replace wp-cron.php with a version from WP 2.6.5
  3. Install the Scheduled MIAs plugin

Until the issue is fixed, don’t forget to occasionally check your post lists for unpublished posts.