Bad value X-UA-Compatible for attribute http-equiv on element meta

The HTML 5 Boilerplate is a an excellent start to a valid HTML5 document, however it isn’t 100%, the HTML 5 Validator reports an error on the X-UA-Compatible attribute;

Bad value X-UA-Compatible for attribute http-equiv on element meta.

[codesyntax lang=”html4strict”]
<meta http-equiv=’X-UA-Compatible’ content=’IE=edge,chrome=1′>

If you’re looking to make it technically valid without affecting functionality, you should be able to just wrap it in a “if IE” tag.

<!–[if IE]><meta http-equiv=’X-UA-Compatible’ content=’IE=edge,chrome=1′><![endif]–>

[Snippet] AddThis does not pass HTML 5 Validation

AddThis is a popular social sharing widget to dump on your site. Shame it doesn’t pass HTML 5 validation.
I was getting the following errors
Attribute addthis:url is not serializable as XML 1.0.
Attribute addthis:title is not serializable as XML 1.0.
Attribute addthis:description is not serializable as XML 1.0.
Attribute addthis:url not allowed on element div at this point.
Attribute addthis:title not allowed on element div at this point.
Attribute fb:like:layout is not serializable as XML 1.0.
Attribute fb:like:layout not allowed on element a at this point.
The line in question was the Facebook Like button

[codesyntax lang=”html4strict”]
<a class=”addthis_button_facebook_like” fb:like:layout=”button_count”></a>

To fix this you can actually remove fb:like:layout=”button_count” as “Button Count” is the default behaviour anyway.

[codesyntax lang=”html4strict”]
<a class=”addthis_button_facebook_like” ></a>

since button count is the default layout.

Indenting Second Line of LI (List Items) in CSS

I work a lot with graphic designers who use publishing packages like Quark and InDesign. They have little quirks when it comes to laying out text. For example when a list item wraps, these packages indent the second line automatically.

CSS doesn’t. It drives them and myself mad. Continue reading “Indenting Second Line of LI (List Items) in CSS”

Embedding Videos with TinyMCE

By default TinyMCE strips out any code that you would use to embed videos or Flash into your site. To allow videos to be embedded you need to change how TinyMCE init’s.

Mainly, the valid_elements, extended_valid_elementsvalid_child_elements parts of the code.

Use the following code Continue reading “Embedding Videos with TinyMCE”

Getting YouTube thumbnails for HTML

It’s so simple to embed a YouTube video, with thumbnail into your site. Ditch any clever PHP scripts or completed jQuery libraries.

So you have a Youtube video – http://www.youtube.com/watch?v=t4_dZPVg8KI

Take the video ID t4_dZPVg8KI and craft yourself a link to YouTube’s image server;

http://img.youtube.com/vi/t4_dZPVg8KI/1.jpg

You have a choice of 1.jpg or 2.jpg or 3.jpg

How easy is that!

Prevent images from displaying while loading with AnythingSlider

AnythingSlider is just another jQuery slider effect, except we can embed any content as it uses a semantic unordered list HTML (5) structure.

My recent client wanted a mixture of HTML, videos and images, which means you get the nasty flash of the UL elements whilst your browser renders the window. Apparently its called Flash Of Unstyled Content (or FOUC). Whatever. Its called really annoying to me. So here is a bit of code that should be included in the default anythingslider.css but isn’t for some reason.

Continue reading “Prevent images from displaying while loading with AnythingSlider”

Using custom CSS in cForms

Pretty much every WordPress installation I’ve done in the last few years has got cForms installed. Its one of the must have plugins.

Many people are unaware of the custom CSS options available in cForms. Ever edited a default style and lost it during an upgrade? Annoying isn’t it?

Here’s how you make a custom, upgrade proof CSS skin for your cForms. Continue reading “Using custom CSS in cForms”