Day 29: Assorted Tips for Webdevelopers

This post will not be an article as such. It will just be a collection of 3 tips for webdevelopers that I came across in the past week of work.

CSS: Clearfix Solution

No matter if you are just a beginner or a master of CSS, you must have already realized that float is an imperfect tool. The biggest problem with it is that floated content is taken out of the document’s flow and therefore will NOT extend the container it is in. This leads to some broken content and a big headache.

Floated content does not force height change on its container.

Luckily, there is a surprisingly simple solution to this problem called .clearfix. I found it in Dan Cederholm’s Handcrafted CSS book (which I very much recommend) but you can find it all over the web by simply googling for it (hint: you will also find some valuable comments and customization ideas if you google for it.).

1. Add the code below to your css file:

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

/*for IE6*/

*html .clearfix {
height:1%;
}

/* for IE7*/

*:first-child+html .group{
min-height: 1px;
}

As you can see IE6 and IE7 need additional lines of code but with them they work just fine.

2. Add clearfix class to

containing the floated element and you’re all done.

How does it work?  It creates content, that it places after the floated content in the

and styles it to clear floats. It is pretty much the same as if you were inserting 

. The solution is not ideal. For starters it adds content that has no semantic value and if you read more online you’ll find out it might cause problems in some cases in IE browsers. But so far it is the best solution I found and I’ll stick to it.

Favicon

Favicon is short for favorite icon and it is this small 16×16 pixels image you see next to some websites’ urls in browser url bar (or next to the websites’ name on the browser tab). And for something that small it can give you a really big headache.

For starters, despite how sophisticated it is, Photoshop cannot save as .ico (which is the proper file format for this little fellow). Fireworks and Illustrator won’t help you either. There are a few online tools or Photoshop plugins that you supposedly can use but I managed to get none of them to work properly for me. Interestingly enough, Microsoft Paint can save as .ico and is happy to do that (and yes, I did feel stupid using it).

Also, Opera and Firefox will happily display your favicons no matter what. But if you can’t see your favicon in Chrome and IE don’t despair and don’t spend hours trying to figure out what is wrong. Chrome and IE require the site to be online to display favicons.

Accordion

Accordion is a handy jquery plugin that allows you to display content in chunks at a time. This is very useful for content rich pages, for example FAQs where users are often interested in looking into one specific category of questions. You can download the plugin directly from jquery library but here is a tutorial from tuts+ that allows you to learn more about how accordion works. This gives you greater control over the code and the look and feel of your page. Unfortunately, the links on the page (to for example demo) don’t work.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>