If you have ever tried to include code in a wordpress post you may have gone through hell trying to get it to output correctly; WordPress’ built in functions for formatting text (autop and texturize) mangle your code making it non-functional.

I’ve tried many solutions in the past, such as disabling wordpress’ formatting functions, however, this is not ideal -especially if you rely on them to clean up your text and properly encode characters. On top of that its not even valid to include certain things such as CSS in the body of a xHTML document.

The solution? Custom fields. This post will show you how.

First we need to prepare your template. Open your templates header.php file and insert the following php code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
if (is_single()) {
  if ($css = get_post_meta($post->ID, 'custom_css', true)) {
    echo '<style type="text/css">'.$css.'</style>';
  }
  if ($js = get_post_meta($post->ID, 'custom_js', true)) {
    echo '<script type="text/javascript">
    jQuery.noConflict();
    (function($) {
      '.$js.'
    })(jQuery);
    </script>';
  }
}
?>

When a post is being viewed (single page) this code will check if it contains the custom fields and display them. Notice in this case I’m using jQuery noConflict; this part is optional (you may not be using jQuery at all) so if you don’t want jQuery just use:

1
2
3
4
5
6
7
8
9
10

<?php
if (is_single()) {
  if ($css = get_post_meta($post->ID, 'custom_css', true)) {
    echo '<style type="text/css">'.$css.'</style>';
  }
  if ($js = get_post_meta($post->ID, 'custom_js', true)) {
    echo '<script type="text/javascript">'.$js.'</script>';
  }
}
?>

Whist writing a post, add two custom fields: custom_js and custom_css. Fill these with any example code you need to include in the post.

Adding custom css

That’s it! The code will now show in the page head, perfect for CSS and JS example code.

I hope this technique comes in handy.

I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).

Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.

Essentially, what you do is treat each section, or ‘strip’, separately and layer them like a cake.

Lets take a commonly used design and demonstrate what I mean.

In the above design as you can see we have a header, a content (with two sub sections), and a footer. The footer and header require a full width background. So, horizontally we can see 3 strips – header, content, footer.

1
2
3
4
5
6

<div id="header"><p>Header</p></div>
<div id="content">
    <div class="mainContent"><p>Main Content</p></div>
    <div class="subContent"><p>Sub Content</p></div>
</div>
<div id="footer"><p>Footer</p></div>

Using CSS we can style each strip, leaving them all as full width elements. Header and footer should get a tiled background image each, and the text should be aligned center (text-align:center;).

1
2
3
4
5
6

.inner {
    width:700px;     /* Limits its width */
    margin:0 auto;   /* Makes this inner div centered */
    text-align:left;    /* Parent strips have center aligned text */
    overflow:hidden; /* To clear floats */
}

Our HTML now looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
    <div class="inner">
        <p>Header</p>
    </div>
</div>
<div id="content">
    <div class="inner">
        <div class="mainContent"><p>Main Content</p></div>
        <div class="subContent"><p>Sub Content</p></div>
    </div>
</div>
<div id="footer">
    <div class="inner">
        <p>Footer</p>
    </div>
</div>

See how it works? Each strip can have its own background this way, and can shrink and grow to fit it’s content without breaking the layout.

As I said before, this is my preferred method of coding these kind of layouts and it has not failed me yet. I hope you found this useful.

XFN (XHTML Friends Network) is a microformat which represents relationships between people with hyperlinks and the use of a simple HTML tag.

They can represent colleagues, contacts, sweethearts, friends and more!

Based on the XFN icon set by Wolfgang Bartelme I have created a small set of mini icons (9×10 pixels) to represent these links between people. I have also made a CSS file which shows the relevant icon when the correct XFN rel tag is present.

How to create an XFN link

XFN links are very simple to create, they simply list the relationships in a ‘rel’ tag in the anchor, for example:

<a href="http://blue-anvil.com" rel="me">Blue Anvil</a>

The above example show a link to my site, therefore marked as ‘me’ in the ‘rel’ tag. To create your own, you can use the official XFN creator which is a very nice, simple, tool.

My Icons

First off, the icons. As i said before, i based them on the icons by Wolfgang Bartelme found on the Microformats icons website.

Download the icons here. – Downloaded 886 times.

My mini-icons are free to use, just don’t claim them as your own, and a link would be nice

My CSS

My CSS file, basically, looks for a present REL tag, then styles the link based on the present styles. It cascades, picking out the right icon depending on the rel tag.

It works with modern browsers that support CSS pattern matching.

Download the CSS file here. – Downloaded 785 times.

See it all working

I have set up a demo page showing the icons and css file, which you can view here.

I hope you find my icons prove useful!

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Method 1 – Stick the image in the Heading tag

This method simple involves putting your logo in a heading tag, and giving it relevant alt and title attributes. It works well with simple logos, but if you want cool rollovers etc, you will need a different method.

(X)HTML

<h1>
   <a href="home.htm" title="homepage">
      <img src="logo.gif" alt="Site name" />
   </a>
</h1>

Suits – Simple logo’s with an alt tag, and possibly a link

Pro’s – Alt text should remain visible with images off, logo visible when CSS disabled

Con’s – No css rollovers, you must resort to Javascript

Method 2 – Phark Method – modified

This method involved using a CSS background image to show the logo. If CSS is disabled you still see the heading text, however with images off and CSS on the logo is hidden, which is a shame.

It works by indenting the text out of sight, and showing the background image. I use this one when I have a transparent logo, e.g. A transparent png, since other methods (like Gilder/Levin below) show the heading text underneath the image.

My modded code below also allows pretty rollovers, a nice addition.

(X)HTML

<h1>
    <a title="Homepage" href="home.htm">
    <span>
        Site name
    </span></a>
</h1>

CSS

h1 a span
{
    	height:164px;
    	width:219px;
    	background: url('logo.png') no-repeat;
    	text-indent: -5000px;
}
h1 a:hover span, div#header h1 a:focus span
{
    	height:164px;
    	width:219px;
    	background: url('logoHover.png') no-repeat;
    	text-indent: -5000px;
}

Suits – Headings when you want a link, and your logo is transparent.

Pro’s – Text displayed when images off, transparent images work, css rollovers work.

Con’s – Breaks with images off and CSS on.

Method 3 – Gilder/Levin Method – modified

This method is my favorite when using opaque images. It works by hiding the text with a background image via CSS, it does however need some un-semantic markup; but thats a small price to pay. The span is basically positioned to cover up the header text, thats the reason it needs to be opaque. And remember; the width and height must match the image!

(X)HTML

<h1 id="header">
	Site name<span></span>
</h1>

CSS

h1#header
{
      margin:0; padding:0;
      position:relative;
      width:316px; height:29px;
      overflow:hidden;
}
h1#header span
{
      display:block;
      position:absolute;
      width:316px; height:29px;
      margin:0; padding:0;
      background:url(logo.gif) top left no-repeat;
}

Suits – Headings when you want a link, and your logo is opaque.

Pro’s – Text displayed when images off and also when CSS off.

Con’s – Cannot use a transparent image.

Conclusion

So they were my favorite methods, but are they best? DO you have better solutions? Leave a comment and tell me your views on image replacement.

Related reading

• Revised Image Replacement
• JavaScript Image Replacement
• MIR: Image Replacement
• Using Background-Image to Replace Text

For those with no clue about what I’m rambling on about, with CSS layouts, when you have a float inside an block-level element, it will collapse in most browsers, since floats have no dimensions. So for instance, if I had a div container with a blue background, and a float inside it, the blue background would not surround the float (and the floats contents), due to the div ignoring the height of the float.

To fix this you need to ‘clear’ the float, so the container recognises the fact the float is there, and adjusts its height accordingly.

There are many methods of doing this, personally in the past Ive used most of them, so in this article I will compare the main ones and rate them in terms of:

• The extra markup
• The Amount of CSS
• Cross Browser compatibility (I’m limited to IE5-7, Opera 9, Firefox)
• Ease to implement

Understanding the problem

To demonstrate the problem, I created a simple test page and ran it in various browsers to show what happens.

Test 1 – No clearing method, container has width

Firefox:

IE7

IE6

IE5.5

IE5

Opera 9

As you can see from the screen-shots, standards compliant browsers (firefox & opera) do not expand the container to contain the floats, whereas IE does.

This is because the container has a width, and in IE this tells the browser the element ‘hasLayout’, making it contain the floats. Making the container have layout is one of the techniques of fixing boxes in IE.

For fairness in the tests, and showing the methods, I will remove the width from the container, as in most cases containers of floats don’t have widths. I for one use a lot of ‘display:blocks’ to avoid setting the width.

Test 2 – No clearing method, container with no width (container inside a wrapper with width).

IE: (all versions did the same thing)

Thats more like it, Firefox and Opera have the same problem (I wont bore you with the screen-shots), but now IE faces the problem also. This is because the container doesn’t ‘have layout’ now, therefore a clearing method is needed.

Before I go into the methods of clearance, Ill just show you the web page & the code:

<?php $text='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
div {margin:0;padding:0;}
p {margin:0;padding:2px;}

div#wrapper{
							background-color:#ccc;
							width:400px;
							}

div#container{
							border:3px double #000;
							background-color:#999;
							font-size:60%;
							color:#fff;
							}
div#float1{
					float:left;
					width:48%;
					background-color:#4499cc;
					border:1px dotted #222;
}
div#float2{
					float:right;
					width:48%;
					background-color:#4499cc;
					border:1px dotted #222;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
    <div id="float1">
    		 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
    </div>
		<div id="float2">
    		 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
    </div>
</div>
</div>
</body>
</html>'; echo htmlspecialchars($text); ?>

There, now its time to look at the juicy stuff, the methods for clearing the floats.

Method 1: The ‘clear’ property

Using the clear property to clear floats is the method recommended by the W3C, and is one of the oldest methods of fixing floats. However, despite this, it is not the best solution, and does make you add a lot of extra markup to pages.

How it works

To use this method you add an element with the css property ‘clear:both’ at the bottom of the container with the floats inside it. This forces the container to stretch to fill the floats. As you can imagine, a complex layout would need a lot of these clearing elements, with can make the markup bloated & untidy.

Example code

<?php $text='<div id="wrapper">
    <div id="container">
        <div id="float1">
        		 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
        </div>
    		<div id="float2">
        		 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia viverra mauris. Suspendisse potenti. Pellentesque a tortor in ante pharetra commodo. Aliquam erat volutpat. Nam vel turpis. Suspendisse ullamcorper mattis turpis. Vivamus placerat pretium pede. Aenean consequat. In accumsan scelerisque lectus. Aenean suscipit eleifend nulla. Donec pede. Pellentesque quis diam. Aliquam neque. Fusce facilisis, turpis sit amet congue consequat, enim est dignissim nibh, in tristique lectus enim vitae dui. In pede purus, egestas eget, volutpat sit amet, bibendum non, purus.</p>
        </div>
				<div style="clear:both;"></div>
    </div><!--end container-->
</div><!--end wrapper-->'; echo htmlspecialchars($text); ?>

Testing

IE 6 (same as IE 5.5-7):

IE 5:

Firefox:

Opera:

As you can see from the results, it cured the float clearance, however there was a small amount of cut off in IE5.

Pros:

• Widely Supported
• Simple to understand

Cons:

• Bloated markup
• Sometimes you get weird results (e.g extra padding)

Overall:

• Browser support: 8/10
• Markup/css bloat: 2/10
• Simplicity: 6/10
• Overall Rating: 5/10

Method 2: Using ‘Overflow’ properties

This is the method I have been using the most, it involves adding a simple css style to the container of the floats; overflow.

This method is really simple, by using either ‘overflow:auto’ or ‘overflow:hidden’, you give the box layout, and tell the browser that it needs to contain the floats correctly. I wont go though overflow:hidden, because it often shows scrollbars (which looks nasty) so I will focus on the (in my opinion) superior overflow:hidden property.

The code

To code, add the overflow property via inline css, or optionally in your stylesheet. I will do it inline:

<div id="container" style="overflow:hidden;">

Testing

Firefox, IE7 & Opera cleared float fine.

IE6 and below did not clear the floats.

The reason that IE6 and below did not work is because they still require ‘hasLayout’ to clear the floats. How can we achieve this? By adding a width or a height.

I want to avoid setting width in this example, so I will use a hack to set the height in only IE:

<div id="container" style="overflow:hidden;  _height:1%; ">

This cures IE 6 and 5.5, so thats all the browsers except, alas, IE5 completely hides the content. A shame. To rectify this (if you care about IE5) you will most likely need to find anther way to give the container ‘hasLayout’, for example setting a width. You could set this up in conditional comments, for just IE5, and also make sure you dont give IE5 height:1%, again by using conditional comments (my article on conditional comments).

For more information on hasLayout visit this great site http://www.satzansatz.de/cssd/onhavinglayout.html.

Pros:

• Good support
• Easy to use
• No markup bloat

Cons:

• A pain to use in IE5

Overall:

• Browser support: 5/10
• Markup/css bloat: 9/10
• Simplicity: 9/10
• Overall Rating: 7/10

Method 3: FnE method

This method is called the ‘Float Nearly Everything’ method. See if yyou can guess what you have to do.

A float which contains a float automatically clears itself, in all of the browsers. This is how it works. Its called ‘nearly’ everything since the main container will not always be floated (if its centered on screen for instance) so it will need to be cleared with one of the other methods (e.g a footer with ‘clear:both’ in it.

I find this method hard to work with, and inconsistent, since using floats everywhere is awkward. Also you have to remember, you must give floats widths for them to work with this method, adding to the difficulty.

Example screenshot of method – Firefox

With patience this method works, but often its not worth the time it takes, when other methods exist.

Pros:

• Can work well
• No extra markup

Cons:

• Complicated
• Takes a lot of time to get right

Overall:

• Browser support: 8/10
• Markup/css bloat: 9/10
• Simplicity: 3/10
• Overall Rating: 6/10

Method 4: Pseudo :after clearfix

This is the method I have been using most recently. It uses a pseudo class (:after) to add an invisible full stop inside the container, which makes the container clear correctly. It also needs some conditional comments to make it compatible with browsers that don’t support :after (IE7) and other older browsers (e.g IE on the Mac).

This method is hard to get your head round, but it works, as I will show soon.

Dissecting the code

The first bit of code needed is some css:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

• The ‘:after’ pseudo class makes the browser apply the style after the content of the element ‘clearfix’ is applied to.
• The ‘content’ attribute makes the browser generate a full stop.
• The ‘display:block’ attribute stops it defaulting to display:inline, which cannot clear elements.
• The ‘height:0′ attribute stops it taking up space.
• The ‘clear:both’ attribute clears the floats.
• The ‘visibility: hidden;’ attribute makes the generated full stop hidden.

Now lets look at some browsers, implementing the code so far. I have simply added a class of ‘clearfix; to the container class like so:

<div id="container" class="clearfix">

*note remember, if you need to apply a clear fix to a div with an existing classname, just nest another clearfix div/span inside it, since you cannot have two class names in one div. To have more than one class in a div, seperate the class names with a space (thanks for spotting my error Colin).

Firefox

IE6

As you can see, its all looking hunky-dory in Firefox, however IE6 (and all the other versions of IE) fails to clear the float.

To fix this, we give the container ‘hasLayout’ via conditional comments, we also add a hack to hide it from IE MAC using the holly-hack (I don’t have the resources to test in IE MAC) like so:

<!--[if IE]>
	<style>
          /* Hides from IE-mac \*/
          * html .clearfix {height: 1%;}
          /* End hide from IE-mac */
	</style>
<![endif]-->

IE6 (same in IE5 and IE5.5)

IE7

So thats all version less than, and including, 6 done. But, o no, IE7 wont clear the floats. This is due to the face IE 7 has dropped support for the pseudo :after class, and since the holy hack doesn’t target IE 7 either, the box wont clear.

This is where the display property saves the day. We change the conditional comment code to read:

<!--[if IE]>
	<style>
          .clearfix {display: inline-block;}
          /* Hides from IE-mac \*/
          * html .clearfix {height: 1%;}
          .clearfix {display: block;}
          /* End hide from IE-mac */
        </style>
<![endif]-->

This gives IE7′s clearfix a ‘display:inline-block’, giving the clearfix ‘hasLayout’, and then resets the display property inside the hack for all the other IE versions, solving the error.

IE7

And thats a wrap. All browsers are correctly clearing the floats using the clearfix class.

Pros:

• Good browser support
• Not a lot of extra markup
• Simple to reuse, once implemented

Cons:

• Needs conditional comments

Overall:

• Browser support: 8/10
• Markup/css bloat: 8/10
• Simplicity: 7/10
• Overall Rating: 8/10

Conclusion

Overall, I think that the ‘clearfix’ pseudo method is the best method, currently, for clearing floats. The clear:both method is too bulky, the FnE method is just unnecessary, and the overflow:hidden method can get messy.

Therefore I have decided to use the “clearfix” pseudo class method in future projects, as it seems to balance browser support with ease of use and markup bulk, making it my favorite technique. Blue Anvil now uses this technique (instead of the overflow method I previously used).

I hope this article was useful, and helps you to make your websites.

References / Further Reading

• “How To Clear Floats Without Structural Markup”
• Sitepoint
• “Clearing Floats: The FnE Method”
• Clearing floats without structural markup in IE7
• New clearing method needed for IE7?

That is where ems can help. This guide will explain ems, and show you how to convert a layout to utilize ems.

Title changed, I made a mistake, liquid is for % layouts, ems is elastic. Sorry for the confusion, and thanks to Mike Cherim for pointing out my mistake.

What are ems?

An ‘em’ is a unit of measurement that is relative to the base font/font size. Basically, where pixels are fixed (a pixel is always the same width), an em’s width can vary, depending on the font size. This makes them very powerful, as by using ems you can essentially make the widths change depending on user preference.

Example sites

Visit the two sites listed below, and resize the text in either firefox or internet explorer (see browser support to learn how to do this).

• MailSift
• BBC

Notice anything different between them?

BBC.co.uk has a static, pixel based layout, meaning when the text resizes the layout stays the same. As you can see, resizing too much breaks the layout and ruins the usability.

Mailsift on the other hand, was coded (by me) using ems, meaning as text resizes, the layout does too, keeping the text in pretty much the same place, avoiding the problems on the bbc site.

Other examples of sites that use ems include

• Blue anvil (your looking at it)
• Designbit
• cssliquid.com

5 reasons why ems can improve accessibility

1. Internet explorer has trouble resizing pixel font-sizes
2. Pixel layouts often break when increasing the font size.
3. Visually impaired people can in effect ‘zoom in’ to your page.
4. People with large monitors can make your site larger by increasing the size.
5. People with low resolution can make the text smaller, to fit in their windows.

Browser support

Increasing the text size in the manner I have shown is supported primerily by Firefox and Internet explorer, Opera has its own resizing method (covered in Future).

To resize in firefox go to view > text size, or use the shortcut keys (control and + or -).

In IE6 go to view > text size, and select a text size.

How I convert a site to make it elastic

This is how I personally make a site elastic with ems. Before trying this please backup your existing css stylesheet, I don’t want your hate mail if you cock it up!

1. Firstly, you need a layout done in CSS (see example 1). The example shows a basic page using pixels for font sizes and the actual layout. Nothing is resizable in IE6.
2. Now to get your hands dirty. Add the following to the ‘body’ style.
   

   body {
            font-size:62.5%;
   }

   This is the base font size. I have chosen 62.5% as it is round about 10px, which will represent 1em. See example 2.

3. Now you have a base font size you can make all other font sizes relative to this value. Example 3 shows how I have done this, paragraphs are set as 1.4em, headings are 2em. You can resize the text (in IE) in this example, but the layout is static.
4. Next we need to work on the layout. Convert the px values to em, divide the value by 10 and add em after it. For example, the container div has a width of 716px, this should be converted to 71.6em, it should look roughly the same. See example 4.

And that’s basically it, look at example 4 and try resizing, the layout should change with the text.

Testing & what to watch out for

The main thing to watch out for when setting em widths is that due to inheritance in css, if you change a font size in a div, the width of the ems will need modifying to keep it the same. For example, If I set the font size the 1.4em in the container, the containers width itself would increase. You can avoid this by not changing the font size in divs with widths, or by dividing the width by the new font size. Example; original container width – 71.6em, divided by new font size (1.4em) makes it roughly 51em to keep it the same width.

Making images resize with ems

Images can also be resized with the layout, albeit tricky. To achieve this you shouldn’t set a width for the image in the html, you should set it in css. Look at example 4 again; notice the image stays the same size as you resize the text.
By removing the html width and height attribute, we can manipulate this image in css. Add a class of ‘image_size’ to the image in the html:

<img class="image_resize" src="lens.jpg" alt="Lens" />

Now in the css add the following:

.image_resize{
		 float:left;
		 margin-right:8px;
		 margin-bottom:4px;
		 width:12.5em;
		 }

Now the image will resize with the text (see Final example). *Note that using this method requires a different css style for each image if their sizes are not the same.

In the future

We are already seeing accessibility tweaks regarding resizing, notably in Opera and IE7. These browsers have a built in zoom function, meaning they can resize any page. These improvements mean that in the future we may not need to make our layouts and text sizes increase in the way described in this article, as the browsers will handle it. But for now, If you are keen on accessibility, you should make your site easy to read for the visually impaired, whatever their browser of choice.

This article teaches the basics of using conditional comments, and shows some examples of their uses.

A conditional comment is a method of talking directly to a version of internet explorer above version 5, allowing you to pass
IE specific rules without affecting other browsers such as firefox.

By utilizing conditional comments you can effectively reduce the usage of css hacks to make your web pages compatible with
Internet explorer.

Common uses

With conditional comments you can:

• Target IE specifically
• Make IE 5+ ignore a block of code

A great usage, for example, would be using conditional comments with CSS style sheets so you can have certain IE specific css rules that you want other browsers to ignore.

The code

You may be aware that, in html, the syntax of a normal comment is:

1

<!--comment goes here-->

Comments can be placed anywhere in the document.

Now, a conditional comment looks like this:

1

<![if ]><![endif]>

Conditional comments can also be placed anywhere in your HTML document.

Types of conditional comment

downlevel-hidden

A downlevel-hidden comment is a comment that is visible only to the IE version you are targeting.

Example:

1
2
3

<!--[if IE]>
     <em>your code</em>
<![endif]-->

The above code will only be seen by IE versions 5 and up.

Other, older, versions of IE, and also other browsers, will not see the code enclosed by the tags, and will therefore ignore anything you put inside, hence the name, downlevel-hidden.

The other browsers just see the <– and –&rt parts, so it looks like a regular comment to them.

Just to show you, for reference, if you used the code,

1
2
3

<!--[if !IE]>
     <em>your code</em>
<![endif]-->

NO browser would see the code. This is because the rule is !IE, which means NOT IE. Therefore IE 5+ wont see the code, and since it is downlevel hidden, no other browsers will either.

Visibility conclusion:

Firefox/non-ie browsers – code hidden

Targeted IE – code visible

downlevel-revealed

A downlevel-revealed comment is a comment that is visible to the IE version you are targetting, and also non-IE browsers and old versions of IE. It is useful when you wish to make code invisible to a version of internet explorer, but you want non-IE browsers to still see it.

Example:

1
2
3

<![if !IE]>
     <em>your code</em>
<![endif]>

The above example would be visible to all browsers except IE versions 5+.

Validity

You may notice that the downlevel-revealed code provided by Microsoft does not validate correctly, the correct code is outlined on this page, or is shown below:

1
2
3

<!--[if !IE]>-->
     <em>your code</em>
<!--<![endif]-->

The difference between this downlevel-revealed code and the downlevel-hidden code is that the comment is closed after each line, so non-IE browsers will not ignore it.

Visibility conclusion:

Firefox/non-ie browsers – code visible

Targeted IE – code visible

Targeting specific IE versions and extra commands

The [if ] portion of the conditional comment code has extra functionality so you can target certain versions of IE, or exclude versions. These are outlined below.

Targeting an IE version

To target a specific version of IE you just add the version number in the if statement, for example, to target IE 6 only you could use:

1
2
3

<!--[if IE 6]>
     <em>your code</em>
<![endif]-->

You must leave a space between ‘IE’ and the version number.

Targeting multiple IE versions

If, for example, you wanted to target versions of IE older than IE 6, rather than writing individual statements for each version you could use the ‘less than’ comparison :

1
2
3

<!--[if lt IE 6]>
     <em>your code for versions less than IE 6, but not including IE 6</em>
<![endif]-->

If you wanted to target versions older than, and equal to IE6 you would use:

1
2
3

<!--[if lte IE 6]>
     <em>your code</em>
<![endif]-->

The commands for comparing versions are as follows:

lt – less than

lte – less than or equal too

gt – greater than

gte – greater than or equal too

Excluding an IE version/versions

To exclude a version you can make use of the ! (NOT) operator, for example, to target all IE versions except IE 6 you could use:

1
2
3

<!--[if !IE 6]>
     <em>your code</em>
<![endif]-->

This would mean if not ie 6.

You could also mix the not operator with multiple IE versions, for example to target all versions of IE except IE 6 and above you could use the code:

1
2
3

<!--[if gte !IE 6]>
     <em>your code</em>
<![endif]-->

This would mean if not greater than or equal to ie 6.

Version Vectors

Version vectors allow you to target minor versions of IE, for example you could target IE 5.5 instead of IE 5 as a whole. This is particularly useful, as some bugs are fixed in higher versions. The format of a version vector is x.xxxx, but you do not have to make the decimal 4 digits long, e.g 5.0 is valid, as is 5.0000, however the 5.0000 targets the 0000 build of the browser specifically.

Usage examples

Some of the best example of usage would be using conditional comments in conjunction with CSS. Say for instance you wanted to fix a box model error in IE 5, rather than use hacks you could just make a separate style sheet for IE 5 with modified width values of an element which wasn’t rendering correctly. You would then add the following to the header of the html page:

1
2
3
4
5

<!--[if IE 5]>
  <style type="text/css">
    @import url(ie5.css);
  </style>
<![endif]-->

And hey presto, IE 5 will use the fixed styling, no box model hacks needed. Of course with this method you would have to ensure the conditional comment was after the style sheet include, if not the style would be overwritten by the default style sheet. Of course another method that would not be affected by the order would be to just add the styling directly to the conditional comment :

1
2
3
4
5

<!--[if IE 5]>
  <style type="text/css">
    #element{width:200px;}
  </style>
<![endif]-->

Since styles in the document have a higher priority than those in the style sheets, it would take priority.

So there you have it, a simple guide to using conditional comments in your web pages to avoid hacks, I hope this was useful and don’t forget to post a comment. Thanks for reading!

Further reading

Microsofts conditional comments page

The main thing on my agenda was the blue anvil redesign I’ve been working on. It all went pretty smoothly, excluding the few set-backs I encountered (see my last blog entry), but all in all it went well and the website was looking fairly nice…in firefox.

Yes, I left the cross browser stuff until last, it would only take an hour or two, right? How wrong was I. This was my day from hell and I have the coffee breath and bad temperament to prove it. With any luck the problems and solutions I used may be
helpful, and save others from a hellish day that I experienced.

Bug #1 – Negative margins

Negative margins have a variety of uses, I love them to bits. Great for overlapping content or escaping a div. This bug wasn’t bad at all, Id experienced it before, and it does make sense why it goes wrong really.

In my case I have a div with padding which my content was being put into. Above the content I wanted to have a strip for the date that was wider then the content itself.

Rather than fiddle with padding, or adding more divs, I went down the negative margin route.

The code

The strip was in a box with a padding of 32px.

1
2
3
4
5
6
7

.date_strip {
display:block;  
padding-left:32px;  
margin-left:-32px;  
margin-right:-32px; 
background-color:#000;
}

The problem

The code works as it should in firefox, but IE cuts off the edges of the strip.

The solution

Simply add the rule:

1

position:relative;

Later on in the day (just before I had the urge to put the laptop in the oven and watch it die) I found a second error, this one with Opera 9. Opera 9 would render the left negative margin fine, but cut off the right hand side. To fix this I just added padding to right, as I already did to the left.

1

padding-right:32px

Bug conclusion

Difficulty rating: 1/10 Annoyance factor: 1/10

Bug #2 – Form heights

If you look in the sidebar you will see the search form, I had some problems regarding the height of the input box and the height of the submit button.

The code

1
2
3
4
5
6

#searchbox input {
border:1px solid #73B531;  
background:#fff;  
display:inline;  
width:125px
}

1
2
3
4
5
6
7
8
9
10

#searchbox input.button {
text-align:center;  
padding:0;  
margin:0;  
background:#8C4;  
color:#fff;  
border:1px solid #692;  
width:75px !important;  
margin-left:4px
}

The problem

Firefox renders the button with more height than the input box. This was happening when my input button had a border.

I thought that simply adding one pixel of padding to the input box would solve the problem, and it did, but this made IE render the boxes at different heights. To solve this I needed to add
2 padding to the input box, which broke firefox.

The solution

Conditional comments were the key to solving this bug. By setting the padding to 1px in the css stylesheet (fixing firefox) i could add a conditional comment to make IE render the same box with 2px padding, solving the problem.

In the header of the document:

1
2
3
4
5
6

<!--[if IE]>
      <style>
      #searchbox input{padding:2px;}
      #searchbox input.button{padding:0;}
      </style>
<![endif]-->

(check back in a few weeks, I will be covering conditional comments in more detail in a future post).

Despite this there is still a problem, as the boxes are not equal height in opera, as of yet I have not been able to solve this as I cannot find a hack for opera that works well. If you know one, please leave a comment.

Bug conclusion

Difficulty rating: 3/10 Annoyance factor: 7/10

Bug #3 – accessible forms

I was quite disappointed when I found this bug, as I thought my forms were perfect. Well it seems IE has a nasty quirk concerning field set backgrounds.

In firefox and other standard compliant browsers, the field set background goes up to the border, as it should.

In internet explorer the field set background breaks out of the border to fill the legend (the label for the field set) too, making it very difficult to make the forms look the same between browsers.

The code

CSS:

1
2

#commonform fieldset {margin-top:16px;  background-color:#fff;  border:1px solid #8FA7C2;  padding:16px;}
#commonform legend {margin:0;  font-weight:bold;  border-bottom:1px solid #dbdbdb;  color:#7191B0;   font-size:1.2em;  background:#efefef url(images/bits2.png) repeat-x}

HTML

1
2

<fieldset>
<legend>Your Contact Details</legend>...etc

The solution

To fix the problem in IE, I found that the only way was to position the legend absolutely to the relatively positioned field set, essentially breaking it from the flow so the background wouldn’t fill the legends area. The code is quite fiddly to get right, and only works in IE, therefore conditional comments come in handy once again.

1
2
3
4
5
6

<!--[if IE]>
      <style>
      #commonform fieldset {margin:0;  margin-bottom:16px;  <strong>position:relative ;</strong>  background-color:#fff;  border:1px solid #8FA7C2;  padding:16px;}
      #commonform legend {<strong>position:absolute;</strong>  margin-top:-26px;  font-weight:bold;  border-bottom:1px solid #dbdbdb;  color:#7191B0;  font-size:1.2em;  background:#efefef url(images/bits2.png) repeat-x}
      </style>
<![endif]-->

Bug conclusion

Difficulty rating: 8/10 Annoyance factor: 8/10

Bug #4 – Safari wrap bug

This was a quick bug I found with my navbar. My navbar is essentially just an inline list with padding above and below. Its width is set with display:block;.

The problem

Safari would break the list, causing the last item to wrap, breaking the layout.

The solution

Simply adding white-space:nowrap; to the navigation container solved the issue.

Bug conclusion

Difficulty rating: 1/10 Annoyance factor: 1/10

Bug #5 – Internet explorer making content disappear a.k.a peek-a-boo bug

I’m not sure if this was the peek-a-boo bug for sure, but strangely it also happened in IE7, which is a bit of a downer considering they were supposed to fix it!

Anyway what happened is that sometimes when scrolling content would randomly vanish, also background images would disappear revealing the background colour of the page.

This bug probably took the longest to fix, simply because I hadn’t encountered it before.

The fix

I found a fix by searching, and it seemed rather odd to me, but somehow it worked. It was called the holly hack, and applied a height of 1% to the box with the problem in IE, causing the background to fill the box correctly. Hoorah.

1
2
3

/* \*/
* html  .block {height:1%};
/* */

Note that the rule after this hack can be ignored, so it is best to insert a dummy rule afterwards e.g. *{margin:0;}.

Bug conclusion

Difficulty rating: 6/10 Annoyance factor: 10/10

Bug #6 – Image/background image positioning bug

My banner image is actually two images, one background (the sunburst), and the logo. The logo is just inserted inside a div
with padding to make it taller. It also has a background image using the css:

1

background:#557799 url(images/burst.png) repeat left bottom;

In firefox the image lines up perfectly, however IE looks like the background image is not aligned to the bottom left perfectly, and is shifted slightly.

The fix

By adding a conditional comment to add negative margins to my logo, I can line the image up manually so it works in both browsers.

1
2
3
4
5

<!--[if IE]>
    <style>
      #header img{position:relative;margin-bottom:-4px;}
    </style>
<![endif]-->

Bug conclusion

Difficulty rating: 5/10 Annoyance factor: 7/10

Bug #7 – Doubled margins bug

If you are a coder there’s a 99% chance you have encountered this bug before.

For some reason IE doubles the margins of floated elements, this is do to a bug in the engine.

The fix

This ones easy, just add display:inline to the floated element!

Bug conclusion

Difficulty rating: 1/10 Annoyance factor: 2/10

Bug #8 – Box model

Like the above bug, this is probably the most common IE bugs encountered due to the fact IE 5 renders the box model differently to standards based browsers.

To put it simply, standards browsers render the width of a div with the width + the padding, whereas IE 5 renders the width of a div with the set width – the padding.

So for standards browsers, if you wanted a box 200px wide with a 10px padding left and right, you would set:

width: 180px; padding:10px;

But IE would show the box just as 180px wide, not 200px (width + padding).

The solution

There are many solutions to this common problem, such as conditional comments again. However I chose to use a simple box model hack to fix this problem. The code for the hack looks like this:

1
2
3
4
5

* html #box
{
  width: 200px;
  w\idth: 180px;
}

The * html makes this rule visible to only Internet Explorer. However this is not enough since the rules contained would be visible to all versions of IE, including IE 6 which doesn’t have the problem. This is where the backslash comes into play. The code with the backslash rule is not seen by IE 5, but is by IE 6, meaning we can set the value for old versions, then reset for IE6.

1
2
3
4
5

* html #box /*Rules for IE only*/
{
  width: 260px; /*rule for IE 5 and below*/
  w\idth: 228px; /*Rule for IE 6*/
}

Bug conclusion

Difficulty rating: 4/10 Annoyance factor: 8/10

Bug #9 – Inline list of items

This one drove me mad, I found this later on in testing IE 6, when I thought I was done.

It seemed that my list for post options (read more, comments, digg etc) would wrap partly around, leaving behind the background items and half the text.

The icons were done by adding a background image to the span of text, with a padding-left. This was to make the icon centred next to the text correctly.

To fix this I tried white-space:nowrap to the spans, this stopped the text from breaking up, but still left the icon behind. I think this was do to the padding staying where the box wrapped from, and not from its new position.

The fix? I ended up having to surround the spans with the background image icons, with a second span that had position:relative; so that the padding of the contained span would be relative to the new position. I called the outer span ‘wrapper’.

1
2
3

.wrapper{
  display: inline;  white-space:nowrap;  position:relative;
}

Bug conclusion

Difficulty rating: 7/10 Annoyance factor: 9/10

Complications of my fix

It seems that, whilst working in IE 6, this fix made my icons overlap the text in IE 5/5.5, so to rectify this I added a conditional comment that targets IE 5 only, to give the span with the image a large width, making it display without overlap. It doesent look the same, however it makes it useable so is a good solution.

The code below is what i used, note the ‘lte’ before the version of IE, this means ‘less than or equal to’.

1
2
3
4
5

<!--[if lte IE 5.5000]>
      <style>
        .moretext{padding-left:32px;width:200px;}
     </style>
<![endif]-->

Bug conclusion

Difficulty rating: 8/10 Annoyance factor: 10/10

And so you have it, if you took the time to read this you will understand why it was all so frustrating, but in the end it was worth it.

If you have any improved solutions to any of these bugs, or your own bugs and solutions, feel free to post them as a comment,
I’m always willing to learn from others!

If you spot any bugs feel free to tell me, just note it may make my head implode!

Colour scheme tools

Online color scheme generator 2

http://wellstyled.com/tools/colorscheme2/index-en.html

This is a wonderful tool you can use to make your own colour schemes. You can set up a scheme based on different models (e.g complements, see my colour schemes article).
Another great feature is that you can see your scheme from the perspective of people with colour disabilities; this aids you in finding a scheme that is accessible!

Color Schemer online

http://www.colorschemer.com/online.html

Not as feature packed as ‘color scheme tools’, but can help convert colors from RGB and hex, and shows colors that fit with the selected color.

CSS tools

Flumpcakes css optimiser

http://flumpcakes.co.uk/css/optimiser/

Excellent online tool for optimising and tidying up your CSS files. You simply plug in your css file, and it outputs a cleaner version, and also displays the amount it has cleaned up so you can compare file sizes. The only drawback is that it will remove any hacks you have added to your css file.

Validation

W3C CSS Validator

http://jigsaw.w3.org/css-validator/

This is the bog standard css validator from the W3C. Make sure your code validates, then you can also have a little icon to put on your site to show this!

W3C HTML validator

http://validator.w3.org/

Probably the most useful tool in this listing. Allows you to validate your html code. This is essential for making sure the page will render right, and clearing out bugs.

WDG HTML validator

http://www.htmlhelp.com/tools/validator/

Very similar to the W3C validator.

FEED validator

http://feedvalidator.org/

Validate your RSS feeds to ensure users will have no problems viewing them..

Accessibility checkers

Watchfire

http://webxact.watchfire.com

Validate your WebPages and highlights flaws with the accessibility.

Compatibility testing

Safari test

http://www.snugtech.com/safaritest/

Great tool for testing Mac compatibility. You just add your site url, and the tester renders an image of your site in safari, showing you want mac browsers will see. This tool is also useful for generating full screen page screenshots!

Misc tools

Button maker

http://kalsey.com/tools/buttonmaker/

This tool allows you to create cool little buttons for your site. You can customise the text and colours and output to a file.

Web 2.0 validator

http://web2.0validator.com/

This tool allows you to check how web 2.0 your site is!. Quite entertaining to see the results.