The <blink>Blink Tag</blink>, re-implemented!
Be sure to give attribution for the above code, so your users will know where to go to thank me…
Edit: Just to demonstrate that !
Inspect the code if you don't believe me...
The company I work for, 2Degrees, is looking for a front-end developer to join our team.
More details are below. Email the address at the bottom of the job description, and mention this blog!
When writing the image wrapping script, I came across a difference between Firefox and Opera. Basically, when there are small floated divs in a vertical stack, the text to the right will be aligned to the topmost div in Firefox, even if the divs underneath extend farther than the topmost div. Opera handles this situation better and places the text after the maximum extents of the floated divs. Take the following HTML:
<div style="float:left;clear:left;width:100;height:8px;background-color:#55f;" ></div>
<div style="float:left;clear:left;width:120;height:8px;background-color:#66f;" ></div>
<div style="float:left;clear:left;width:140;height:8px;background-color:#77f;" ></div>
<div style="float:left;clear:left;width:160;height:8px;background-color:#88f;" ></div>
<p>This text should not be displayed over the blue bars...</p>
Since the text is greater than 8px in height, I would expect it to push the text inside the tag farther to the right. Instead, what happens is that the div is rendered underneath the text. Here is what it looks like in Firefox 3:
And here is what it looks like in Opera:
I haven't tried it on Internet Explorer as yet, because I'm a Linux fan-boy and I can't be bothered booting in to Vista. So, dear lazyweb, is this a documented bug?Update: Try the html yourself... divbug.html
One of the things that used to annoy me about working with CSS, is that I had a mental block about margin and padding. I could never recall which was which, because the two terms mean pretty much the same thing; an arbitrary space around text. Frankly I think the creators of CSS should have used have called them inner-margin and outer-margin, or inner-padding and outer-padding. I'm sure there is a good reason for using the terms margin and padding (I'm guessing its from typesetting nomenclature), but to me they feel arbitrary and may have well have been called bob and jane.
Fortunately I came up with a mnemonic that made it click. Just remember the phrase 'padded cell'. In a padded cell, the padding goes on the inside. So there you have it, you'll never again forget that the box model is text -> padding -> border -> margin.
I like the idea of tag-clouds and tags in general, but I had problems making them look good in becontrary.com. I experimented with changing the relative size and blending colors, as well as with the huge number of visual tweaks you can do with CSS, but the amorphous blob of words just didn't seem to fit with the nice neat columns I had. Until, that is, I sorted the tags by popularity, which made it a lot neater and enhanced the effect of blending the font size / color. I don't know why it didn't occur to me before. I don't see many sites doing this, most tag clouds are sorted alphabetically.
The image below shows a tag-cloud sorted by popularity (left) and just alphabetically (right). Which one do you think looks better?
(Click for a larger image.)Update: A few people have commented that without alphabetical order it is difficult to pick out a tag you are looking for. Personally I have never used a tag cloud like that, its usually just a starting off point to explore the site. If I wanted something specific I would use the search function. Even if the tag-cloud is used to scan for specific tags, it becomes redundant if you have so many tags that you can only show a subset, which is the case for becontrary.com. So I chose form over function, consequences be damned!