Set table caption location using CSS

If you use table captions on your site and want to be able to define the caption location there is a little used CSS rule called caption-location.

Internet Explorer puts the caption underneath the table, for example. If you want to put the caption above the table just add:

caption-side:top;

Now your table caption will sit at the top.

Style hyperlinks by filetype

You’re probably seen those links with the little icons next to them. It might have been a mailto link or a link to a PDF file, but you knew what it was going to be before you clicked on it because it had the small icon next to it.

This is probably because the web designer had included a little trick that styles links based on the content that they point to.

Taking the PDF example, imagine you wanted a small PDF icon to appear automatically to the left of your link. The first thing you need to do is add some padding to the left so that the text doesn’t overlap the icon.

a{
   padding-left: 20px;
}

Next you’ll want to add the actual icon, so our CSS selector will look like this:

a{
   padding-left: 20px;
   background: url(icon_pdf.gif) no-repeat left;
}

The final step is that we only want this to apply to links that point to a pdf file. We don’t want to have to add a class to every PDF link either, we need it to happen automatically.

a[href $='.pdf']{
   padding-left: 20px;
   background: url(icon_pdf.gif) no-repeat left;
}

Finished. This selector will now apply to any where the href ends in .pdf.

Make nth-child work in IE

Nth-child is one of the most useful pseudo classes that CSS has but the problem is it doesn’t work in any version of Internet Explorer prior to version 9. There are still a lot of people using IE7 and IE8.

Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and advanced attribute selectors in Internet Explorer versions 6 to 8.

All you need to do is download the Selectivizr code and include it in your page like this:

<script type=”text/javascript” src=”[JS library]“></script>
<!–[if (gte IE 6)&(lte IE 8)]>
<script type=”text/javascript” src=”selectivizr.js”></script>
<noscript><link rel=”stylesheet” href=”[fallback css]” /></noscript>
<![endif]–>

The first line, where it says [JS library] refers to one of the common JavaScript libraries. If you’re not already using a JavaScript library, you’ll need to choose one of the following:

• jQuery
• dojo
• Prototype
• Yahoo
• DOMAssistant
• Mootools
• NWMatcher

And that’s it. You can now start putting advanced selectors like nth-child in your CSS and they’ll just work!

CSS Syntax highlighting in nano

If your server’s version of nano doesn’t have syntax highlighting for CSS you can turn it on yourself.

Just edit your nano config file (which may not exist yet):

nano -w ~/.nanorc

And add the following:

syntax “css” “\.css$”

color brightred “.”

color brightyellow start=”\{” end=”\}”

color brightwhite start=”:” end=”[;^\{]“

color brightblue “:active|:focus|:hover|:link|:visited|:link|:after|:before|$”

color brightblue start=”\/\*” end=”\\*/”

color green “;|:|\{|\}”

 

Save and exit. The next time you open a .css file your code will be highlighted.

Tip courtesy of the nanosyntax project where you can also find code for HTML and lots of other file types.

Add a span around WordPress menu links

I often have the requirement to add an additional element in the standard WordPress menu – usually adding a span around the anchors.

This is very easy to do using the link_before and link_after functions:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location'
 => 'primary', 'link_before' => '<span>', 'link_after' => '</span>') ); ?>

Depending on your theme, you’ll probably find this code in header.php.

Moving mail to Zimbra server using imapsync

If you attempt moving mail using imapsync to a Zimbra server, the first error you are likely to get is:

Host mydomain.com says it has NO CAPABILITY for AUTHENTICATE CRAM-MD5

You can fix this quite quickly by adding –noauthmd5

So, that’s fixed but Zimbra still isn’t going to let you connect. You’ll get another error that says:

Error login: [mydomain.com] with user [user@mydomain.com] auth [LOGIN]: 2 NO cleartext logins disabled

To fix this one you need to enable clear text logins on the Zimbra admin panel. There’s a checkbox under the IMAP section of Server Settings. Except it’s greyed out and doesn’t work.

What you actually need to do is logon to your server, make sure you are running as the Zimbra user (su zimbra) and then execute the following command:

zmprov mcf zimbraImapCleartextLoginEnabled TRUE

Done. Run imapsync again it hopefully it will work.

Using CSS3 in older browsers

If you want to use CSS3 and HTML5 in older browsers there are a few ways of doing it, but today we are going to focus on something called Modernizr.

Modernizr adds various classes to the <html> element which allow you to target specific browser functionality using your stylesheet.

The simplest example is just as the Modernizr site says;

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

In the example above, the Modernizr JavaScript code will detect if the browser your visitor is using supports multiple backgrounds or not. If it is one of the browsers that does not, Modernizr appends class=”no-multiplegbs” to your <html> element.

Then, it’s up to you to decide what should happen on your site. You can control what users of these older browsers see using the stylesheet and help your site to degrade gracefully.

Safari Firebug equivalent

If you’ve been doing website development for a while you’ll know how invaluable Firefox’s web developer addon Firebug is.

Safari has something just like Firebug already built in – it’s called the Web Inspector.

The instructions to enable Safari’s web inspector are:

1. Open the Safari preferences (Safari > Preferences)
2. Click on the advanced tab so that you see the following screen:
   
3. Tick the box at the bottom that says ‘Show Develop menu in menu bar’
4. You can now bring up the Web Inspector at any time by right clicking on any element and choosing the ‘Inspect Element’ option.