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.
<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]–>
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
<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.
<a class=”addthis_button_facebook_like” ></a>
since button count is the default layout.
Here’s the correct way of making a telephone number clickable for direct dialling on mobile or VoIP enabled devices.
<a href=”tel:+447973283970″>07973 283970</a>
I see a lot of people registering & enqueuing scriptsand CSS in WordPress quite poorly.
Here’s how and why. Continue reading “Registering & enqueuing scripts and CSS correctly in WordPress”
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”
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_elements & valid_child_elements parts of the code.
Use the following code Continue reading “Embedding Videos with TinyMCE”
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;
You have a choice of 1.jpg or 2.jpg or 3.jpg
How easy is that!
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”
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”
Vertically Centering content in divs isn’t as straight forward as it used to be in classic table based layouts.
http://phrogz.net/CSS/vertical-align/index.html explains all.