As I’ve mentioned previously I am an advocate of PNG images (Portable Network Graphics). It supports 24bit colour and greyscale, but even more importantly, its lossless and supports 8bit transparency. I often use this transparency feature to create logos or banners (See wikipedia for more details).
However one thing I noticed was that they can be considerably larger than GIF or JPG images… significantly larger; but this can be easily rectified. I run OS X, so I don’t have an opinion on any windows apps, but
PNG Crusher
is brilliant at taking PNGs and recompressing them. All you do is drop and drag your file and PNG performs its magic. For example:
40Kb before compression
28Kb after compression
This was quite a complex image, on something as simple as a logo I’ve seen a reduction in size 9x times over (8Kb from 72Kb). This dramatic decrease in size will help my site to load faster, reduce the bandwidth required by myself and the user. Efficient!
Having written a small post about favicons, I stumbled across some interesting information while looking through works apache error log. Besides being HUGE, it was also annoyingly filled with favicon.ico missing statements.
This wouldn’t be such a big problem, if it wasn’t for the fact that I have never referenced a file called favicon.ico (for that matter my favicon are .PNGs). It turns out that IE5 by default looks for ‘favicon.ico’ in sites root directory, regardless of whether you specified a meta location or not (see the post below).
The solution?…. Nothing elegant I am afraid. Your chooses:
- Place the ‘favicon.ico’ in your sites root directory
- Inform apache that the file isn’t their and too not even bother looking (http://www.trilithium.com/johan/2005/02/no-favicon/)
- Create a dummy favicon.ico and place it in the root directory
I hate IE…
So today I was playing around with -moz-border-radius and I was having problems with text touching the border of my div, ideally I wanted some sort of internal margin… ok so, padding I thought… 5px or so should do it.
I would have been right as well, except I had defined a width for the div and when used in combination with the padding property it was causing the div to expand beyond the width I had specified, ugh!
To get around this I had to take the border size into consideration:
border: 4px #BB834B solid;
padding: 10px;
width: 180px;
would become:
border: 4px #BB834B solid;
padding: 10px;
width: 170px;
8px have been deducted for the left (4px) and right (4px). This makes sense, but it would make more sense for the borders to be deducted from the width, not added. If anyone can suggest a better method, I would be very interested!
UPDATE:
As it happens, I have found a better solution, rather than deducting the borders from the width… simply don’t determine a width, but wrap the div around an outer div (which has its width set). That way the inner div will not expand when you add the padding:
<div class='outer_div' style='width: 200px'>
<div class='inner_div' style='border: solid 4px #000000; padding: 10px;'>
</div>
</div>