The CSS Blog, just CSS. (Tips, Tricks, Tutorials, Resources and more!) » Tips&Tricks

Château, Premium WordPress Theme Giveaway!

Nacho — Mon, 12 Jul 2010 20:29:43 +0000

Hi! Today I released a new premium WordPress 3.0 Theme called ‘Château’.
You can check Château and it’s features here.

Do you want a free copy? I’m giving away 5 this Friday.
The winners will be chosen according to their comment number using random.org

How to participate

Tweet this message.
Copy the tweet URL and paste it into a comment on this post.

That’s it! Tell your friends and good luck!

Just IE6 PNG fixes? Mmm how about this?

Nacho — Sun, 13 Dec 2009 06:15:46 +0000

Hi again guys! As you can see I’m not dead :p

I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though
Well, no more introductions. Let’s get down to business.

We all hate IE6

This browser is crap and we all know it. Unfortunately, some clients demand support for this browser so we can’t avoid having some workarounds for it.

PNG Images

.png images have the best quality and fidelity for our web designs. Their best feature is their seamless and smooth transparency. We can achieve transparency with .gif files but their smoothness are not even close to .png files.

There are many times where our designs need a transparent .png and we also need to add support for IE6. So… what do we do?

PNG fixes to the rescue!

PNG fixes are mostly javascript (sometimes css) solutions for fixing IE6’s lack of transparency support for.png files. There are various PNG fixes. Here are some of them:

The good thing about PNG fixes

They are easy and fast to setup.
They get rid of the problem in most cases.

Problems using PNG fixes

Well, unfortunately, it’s not everything as nice as cupcakes and rainbows. I’ve encountered some problems using PNG fixes:

Background-image support is quite poor (repeats and positions specially).
It’s a pain in the ass if you are using CSS sprites.
Sometimes the proportion of the images gets screwed up.
You add another javascript file to your page.
In CSS workarounds the code isn’t pretty and fails W3C’s validation.

Ok… so what now?

Well, I have my own workaround for transparent .png’s in IE6. Maybe you will like it, maybe not, but I wanted to share the technique in case it comes in handy for you.

I don’t use transparent PNG’s for IE6

That’s right. I use .gif files instead.
Sorry to dissapoint, but I believe this is the way to go.
The quality of our images decreases of course, but we are embracing and accepting the browser’s limitations.

Using the technique:

HTML code

CSS code

.section {background:url(briefcase.png) repeat 0 0;}
     #myDiv1 {background-color:#333;}
     #myDiv2 {background-color:#666;}
     #myDiv3 {background-color:#999;}

Ok, so this will give us a bunch of coloured divs with a briefcase on their background. This will work for every browser except IE6 (that instead of being transparent, it will have a light-blue background below the gradient image).

Fixing it for IE6:

We will use the star or holy hack to refer only to IE6.

* html .section {background-image:url(briefcase.gif);}

That’s it! We force IE6 to load a .gif file instead of loading the .png file.
Take a look at the final example

Benefits

Simple, easy and short.
Respects the background properties defined for all browsers (repeat + position).
Compatible with CSS sprites (you just save the file in another format).
Doesn’t mess up image proportions.
W3C valid.
You don’t add another file to your .

Drawbacks

The quality of the transparent image decreases (in some case more evident than others)
You have an extra image file in IE6.

Conclusion

IE6 can’t handle transparent .png files. It’s a deficiency of the browser. This technique gives the browser a file type that it can handle and not another thing that it’s not really meant for it.

This is not “THE ULTIMATE SOLUTION” but gives you another possibility to solve these type of problems.
Your experience will help you decide in which case you should use option A or B.

I hope it helps you. Cheers!

Image slicing and CSS – Being clever with file formats

Nacho — Thu, 09 Jul 2009 18:16:58 +0000

Although CSS can do lot’s of stuff by itself, it also relies a lot on images. Websites without bullets, icons and backgrounds aren’t that lovely to see.

When we slice and dice our designs in order to create a website, optimizing the images is a key factor when we are focusing in our site’s response time.

Be clever with image file formats and you’ll go a step further in optimizing your site.

The image file types

In web, there are three image file types we can use:

.gif (Graphic interchange format)
.jpg (Joint photographic experts group)
.png (Portable network graphics)

.GIF

Gif are lighter compared to jpgs or pngs.

This file type is great for:

Solid colors
Simple and small icons
Typography
Basic transparency (Simple shapes over a solid color)

.JPG

In my opinion .jpg files need at least a 80% quality to look good in web. More quality means really more weight, so be careful.

This file type is great for:

Photographs
Simple gradients

Why only simple gradients? Because the .jpg files with complex gradients start too look blurry and with low definition.

.PNG

There are three types of pngs: 8, 24 and 32 bits. More number = more quality.

Personally I find that 8 bit has extremely poor quality. I also find the weight difference between 24 and 32 bits very slim, but with a significant difference in quality.

Due to all this, I commonly use 32 bit .pngs

This file type is great for:

High detailed icons and illustrations
Complex gradients
Great fidelity in transparency (24 or 32 bits)

IE6 and transparent PNGs

IE6 doesn’t support png transparency. The transparency in the browser is replaced with a light blue background instead.

There are many techniques to fix this, and they are usually related with javascript.
An example of this kind of fix is the Unit PNG Fix.

There are lot of others out there. Each one has it’s pros and cons. Google ‘png fix’ and try them out. I still haven’t found THE BEST one.

About the images in this post

The little icons are a part of the Diagona Pack by Pinvoke.
The beautiful colored field is a great photograph by Allard One in Flickr.
The cool sweet icons belong to Kluke from Deviantart.

Final Thoughts

I hope this post helps you understand that you can choose different file types depending on the case and that each one has it’s strengths. Not everything needs to be .png! Especially if you are interested in optimizing your file’s size/weight.

Recreating the min-height property in IE6

Nacho — Tue, 30 Jun 2009 19:55:51 +0000

One of the existing CSS properties is: min-height.

The min-height property is quite self-explanatory. It defines the minimum height of an element. If the element’s content exceeds this value, the element resizes to the size needed.

On the other hand, the height property defines a fixed size. If the element’s content exceeds that size, the element doesn’t change it’s size, however it’s content overflows.

Internet Explorer 6 (IE6) doesn’t recognize this property at all, and is a property that many times I find quite handy.
But don’t worry, I have a tip to make it work on IE6

We will see some results on different browsers in order for you to understand the problem and the final solution.

Our HTML code for every div is the following:


     
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
          tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Our CSS code:

* {margin:0; padding:0;}
     div {float:left; width:240px;margin:40px 20px; background:#EEE; border:1px solid #CCC;}
          p {padding:20px; font:italic 90%/150% Georgia, serif;}

Now let’s compare the height and the min-height properties visually…

div {height:130px;}

div {min-height:250px;}

You see? IE6 does whatever he wants. However, if you pay attention, in the first example (height) IE6 is using the div’s height actually as a min-height. The box is being resized according to it’s content.

By realizing this, we can say that IE6’s height is actually a good browser’s min-height

So when using min height, use a conditional comment for IE6 or a hack and you’ll get the desired result.

The final CSS Code:

* {margin:0; padding:0;}
     div {float:left; width:240px; min-height:250px; margin:40px 20px; background:#EEE; border:1px solid #CCC;}
          p {padding:20px; font:italic 90%/150% Georgia, serif;}
     /* IE6 */
     * html div {height:250px;}

The final result:

The box will resize in case it needs to. You can check it by increasing the text size in this HTML versions:

Both example 2 and 3 will look the same in any browsers that are not IE6, so bear that in mind.

So there you go. Enjoy!

Reduce your headache when developing for IE6 & IE7 with just one line

Nacho — Mon, 29 Jun 2009 18:14:04 +0000

After some time battling with Internet Explorer 6 & 7, I discovered that most of it’s rendering problems are produced when using floats, because the hasLayout variable gets messed up.

Internet Explorer browser has a built-in variable called hasLayout, that allows the browser to ‘construct’ the elements in the page, interact with other elements, etc. When this variable is set to true, the content displays fine, but when it doesn’t our site gets pretty jammed.

Ignore the technicalities. Let’s go to the practical stage…

There are many ways to clear floats.
The most useful one, without adding any ‘non-semantic’ markup is the following:

ul {overflow:hidden;}
     li {float:left; margin-right:10px;}

This property is assigned to the parent element that will wrap around the floating ones.
It’s works like a charm in Firefox, Opera, Safari and Chrome and in IE in some cases too (many in IE7, nearly none in IE6...)

To fix this for IE you just have to add one line on your css.

IE6

* html ul {height:1%;}

IE7

*+ html ul {min-height:1%;}

Another case where this hack is useful

When elements misteriously ‘dissapear’ from a page in IE, and you select them with the mouse by dragging it (as if you were selecting text) and suddenly provoke a magical reappearing, is another great case to use this hack.

This simple tip will reduce your IE headache, try it, it saved me a nice amount of pills :p