John Mee – Some programmer in Sydney

A little curiousity I’ve found trying to put icons inside my headers. The order is significant (IE6/7 and FF2) such that to get the right effect I should put the images before the text. This is what I get if I do it ‘normally’…

img.tool {
	float: right;
	cursor: pointer;
	display: inline;
	margin: 0px 2px 2px 0px;
}

<h1 class="position">
	Human Resources Administrator
	<img class="tool" src="img/new.png">
	<img class="tool" src="img/copy.png">
	<img class="tool" src="img/edit.png">
</h1>

Try as I might I just could not get the margin/padding/whatever to budge. But if I switch the images to be before the text I get the right result. Don’t bother to wonder why. Just make a mental note and keep moving.

<h1 class="position">
	<img class="tool" src="img/new.png">
	<img class="tool" src="img/copy.png">
	<img class="tool" src="img/edit.png">
	Human Resources Administrator
</h1>