We all remember good old “clearfix” (www.webtoolkit.info/css-clearfix.html) that we use to clear floats.

This is a new “lighter” version, based on the same principle.

The major difference from the original clearfix is that we use blank content (“”) in “:after”, instead of “.” in the original one. That helps us to get rid of three extra lines of code, which purpose was to hide this dot:

and to get rid of one more IE6 specific selector used for the same reason.

If you not too concerned about validity of your CSS you could leave the code as it is, else you can put .clearfix {//display:inline-block;} (the IE specific declaration) into separate IE Only CSS, or use the same trick, as per original clearfix – redefine “inline-block” to simply “block” for not IE, using:

after IE’s “inline-block”.

It is assumed that when we apply a background image to an input field that it is fixed. This is the case when short amounts of text is inputed, but once you type more than the length of the field in Internet Explorer, the background starts to move along with the text. Unfortunately, a simple background-attachment: fixed does not fix this problem.

Here is an example of what happens:

A work around which I stumbled upon is to wrap the input field in a DIV and apply the background to this, whilst making the input field’s background transparent. Your code should look like this:

#input_wrapper {
    width: 180px;
    height: 26px;
    background: url('input_bg.png') no-repeat top left;
}

input.search {
    width: 156px;
    height: 16px;
    background: transparent;
    border: 0;
    padding: 5px 12px;
    margin: 0;
}

This is tested in Internet Explorer 6+ and Firefox.

Though it may seem a simple technique to give a website a background image and centering it to the page with background: url('image_url_here') no-repeat center top, it doesn't always work out the way you want it to.

Whilst working on a client's website which required a very wide centered background and the page container to be 1024px wide, I found that once you made the browser window smaller than 1024px wide, the container made the page scroll horizontally like it should, but the background image kept shifting, centering itself to the browser window and therefore not lining up properly with the content.

Strangely, this problem was occurring in every browser except Internet Explorer 6 and 7, and after many attempts with Javascript functions and CSS expressions, a simple solution we found was to add min-width to your html and body CSS. By doing this, once the browser window reaches smaller than 1024px, the page will scroll horizontally, the background image will stop shifting and still line up with the content.

An example of how your CSS should look like is this:

html {
    min-width: 1024px;
}

body {
    min-width: 1024px;
    background: #FFFFFF url('/media/images/background.jpg') no-repeat center top;
}

Creating an overlay div isn’t a problem for modern browsers. We can do that easily by specifying the CSS property height: 100%; position: fixed;.

However, position:fixed doesn’t work in IE6, so for IE6 only we have to put position: absolute; height:100%;. This will have no effect until you put height:100%; on a parent element (usually the body tag). That brings us to a strange result, our overlay div covers 100% of a screen, but if the page is scrollable, the rest of the area isn’t covered by overlay div.

The easiest solution is to put fixed height on our div, that equals to the height of the page’s content. So, in IE6 only CSS we have the following: height:expression(document.body.clientHeight + "px");

Overlay divs can be used to blend the background whilst using a modal window.

As per an overlay div, position fixed doesn't work in IE6, so we can’t position our popup-div in a specific place on the page, even if we scroll the content.

What can help us – is recalculating the position every time we scroll the page. So, IE6 only CSS property will be: position: absolute; top: expression(eval(document.documentElement.scrollTop) + "px");

We can add some more offset, let’s say 200 pixels. top: expression(eval(document.documentElement.scrollTop) + 200 + "px");

The only problem we have now is that this popup-div doesn’t scroll smoothly enough. To prevent that we need to fix the background of the body. background-attachment: fixed;. That only works if you have an image as the page’s background.

If you don’t wan’t to fix your page’s background, you can always put a blank.gif as a background for body, and wrap the rest of your page in a wrapper height:100%; width: 100% and define it’s background as it was before on a body tag.

We have recently developed and released a great Carbon Offsetting website. We have put it forward to CSS Mania - as it's a great looking website, with a wicked design and great CSS build.

See what you think, and if you get the chance - rate it! http://cssmania.com/galleries/2008/09/30/carbonica.php

As Internet Explorer 8 continues it's build at Microsoft. Great to see that they are really thinking of the future and CSS 3 in this release.

http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

The beta of IE8 is available here, though DO NOT install this on your production computer - it's a beta!

This is a great article explaining why IE is not the browser of choice for many developers. Hopefully IE8 will break the mould.

PLEASE!

So, IE6 is a pretty out dated browser and amongst other things doesn't support PNGs. Unfortunately there is still a percentage of people using IE6 so we still need to support it which can be a real bummer when the only way to successfully execute your design is to use PNGs for transparency.

Well there are a few solutions out there which will do the trick, however the one we have recently been using has a few issues which limits it;s abilities, mainly the lack of being able to repeat background PNGs, and a few issues with Z-Index of links.

Today Rob pointed me in the direction of a new PNG fix which is real easy to implement.  You can download the script here.

All you have to do is put the JS file somewhere in your solution along with a blank GIF file and then call the script from any page using PNGs using the following bit of code:

<!--[if lt IE 7]><script type="text/javascript" src="unitpngfix.js"></script><![endif]-->

 As long as all your paths are set correctly you should be up and running!

I stumbled across an issue today when using this script but Rob managed to fix them up pretty easily. The problem I discovered today was as soon as I put a link on an image, the image wouldn't render, but as discovered by Rob all you need to do to fix this is on all your PNGs simply put display:block and everything is back to normal!

We had a problem where a website looked great on Windows and Mac – all browsers, but on Linux there were several issues. On analysis, these were caused by the differing font styles used by Linux. So we came up with the ultimate work around.

Before the fix we had the following CSS:

Body { font-family: Arial, Helvetica, Sans-Serif; }

Arial is not installed in Linux so the closest font (tested on Ubuntu and Kubuntu) is Freesans.

We then changed the CSS to:

Body { Font-family: Arial, Freesans, Sans-Serif; }

As a browser will pick-up the next font to see if it is installed or not. In this instance that will be Freesans, which is installed. If any operating systems don’t have Freesans installed, the next font of the font-family will be Sans-Serif, which doesn’t look too bad.

What about Windows and Mac OS? In case Arial is not installed (what is very unlikely to happen) it will simply skip Freesans (Windows and Mac OS don’t have Freesans installed) and use Sans-Serif as a font to render the page.

That’s how crossbrowser and crossOS compatibility works.

Tested on Kubuntu (version 8.04) on Konqueror and Firefox 3, Ubuntu (version 7.04) on Firefox 2, Safari 1.3 and Firefox 2 in Mac OS X (10.3), IE 6, IE7 and all other windows browsers as usual.

Looks good.

Heres a quick comparison of the <font> tag with a 'size' attribute and a <span> tag with an inline style. This shows what size in pixels the 'size' attribute actually relates to. This only works if the browser text settings are set to display text at medium size and have a DPI of 96, I'm not going to go into the benefits of EM over PX in this post - this table is what it is. Especially useful when attempting to create a HTML email that correctly renders in Outlook and GMail.

Nice list of design trends for 2008 over at WebDesignerWall