filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);

The most commonly used solution for the geek ones os to implement a javascript programmed to parse the whole shazan, to look for PNG references and, with a global replace, to turn those into filter areas. Since this is a javascript-dependent solution, and since it comes with alterations on the structure of the document, I’ll just drop it right here and move along to the really intersting part of the problem, which is the simpler CSS solution.

Why CSS? Well, simply because most ofthen than not, you need to use PNGs within an external CSS, and javascript stops there.

If you didn’t get a chance to read the !important; article, I strongly recommend you do so before moving along with this article.

Normally, in CSS, we set a background image like this:

.style {
background-image: url(img/png-file.png);
}

, which works in any sane browser, but not in IE.
In IE, as I was saying, you MUST do it like this:

.style {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);
}

As you can see, we have two different properties trying to accomplish the same thing. If you already read the above-recommended article, you’ll understand how the solution to this problem is to apply a double !important; , like this:

.style {

background-image: url(img/png-file.png) !important;

background-image: none;

filter: none !important;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=img/png-file.png);

}

This way, FF will “see” one valid background and zero filters, while IE will “see” zero background and one filter. Problem solved. That’s it for today…

In this image I’m using as an example, the blue border represents the parent element (the context), the red border is an element positioned absolute, and the green border represents an element positioned relative. The red and green elements are included, code-wise, in the blue one, obiously.

Relative – using the position: relative; CSS property, we instruct the browser to position the element relative to its context, in a fluid mode. In other words, we force the relative element to depend, position-wise, on it’s parent, but also on the in-line flow of the other elements present in the same context. Put bluntly, we force the element to behave like a letter in a block of text.
Absolute - using the position: absolute; CSS property, we instruct the browser to position the element relative to its context, but independent of the in-line flow of the other elements in the context. In other words, we force the element to maintain fixed position coordinates, expressed in pixels or directions.

At least in theory.

Because, when you try to do this in real life, you notice that IE and FF go bananas when using position:absolute, every browser interpreting in its own way what element to report the positioning to. And the resulting effect will look completely different in different browsers.

Why is that? Because browsers decide differently on wheather the next relative parent is either the next logical parent or the BODY.

Sounds absurd, I know, but all makes sense in the end, you’ll see. When they need to position an element = ABSOLUTE, all browsers start looking up, ierarchically, looking for the next HTML element defined specifically as RELATIVE. Some consider this to be the parent, some consider the body. Hence the difference in visual results.

The solution? very simple: (Even if it sounds redundant,) when you tant to position X absolute in Y, then specifically define Y as having a position: relative;.

This will force ANY browser to explicitely understand what tag to report to (remember? the next ierarchically superior element that is explicitely set as relative), and to visually solve the problem in the same way.

Saner browsers (FF included) don’t take things “for granted”. They don’t work user-friendly, but mathematically. To position an element in relative terms, the browser needs to know exactly what are the parameters needed for the calculation of that particular relative position. Since, in this case, we’re talking horisontal positioning, the browser needs to know the div’s horisontal margins (left and right). In other words, if I want a DIV to be horisontally centered, I MUST tell it to have:

margin-left: auto;
margin-right: auto;

Without these simple settings, FF would stubbornly position any non-floating div to the left margin of it’s holder/parent, irrespective of that holder/parent’s text-align.

All said and done, the problem is solved. Too easy? Doesn’t matter, what matters is that it helps you.

But the problem stays. Why? Because verical-aligning is only specific to certain HTML elements, and DIV isn’t one of them. So what then?

Well… it depends. You have not one, but two solutions, depending wheather you want your DIV to have a fixed height, or you want it to have a height relative to the height of the page. In either case, the basic principle is that your DIV must be placed into a context clearly defined position-wise, be it relative or absolute. Let’s take them one at a time…

Simple You set the din in the CSS, with the following parameters:

position: absolute; height: x%; top: ((100-x)/2)%;

Well, what I just wrote is an EXAMPLE, not to be taken literally, but to be interpreted. Don’t just copy-paste, cuz it won’t work. See it “translated” into usable code, in this example:

position: absolute; height: 40%; top: 30%;

If you have any questions, please leave a comment and we’ll sort them out

This one may look trickyer… but it’s doable. Before anything, let’s create a “dummy” div, and define it like so::

.dummy {position: absolute; top: 50%;}

Clearly, this div will sit exactly in the vertical middle of the page. Step 2 is to create, inside this dummy div, the div that we really care about. Let’s say it will have the height “X”. The CSS parameters will look like this:

position: absolute; height: Xpx; top: (-X/2)px;

Again, this is just an example of a formula. Translated in a real-life example, it would look something like this:

position: absolute; height: 300px; top: -150px;

Problem solved!

Note 1: For whoever doesn’t quite grasp yet what’s going on with position:absolute and what it involves, I strongly recommend the post Elements positioned ABSOLUTE in a RELATIVE context.
Note 2: For who has problems with horisontal alignment or with widths, read this: Horisontally centered DIVs: look out for MARGINs!.
Final Note: The parameters given in the examples above represent a bare minimum necessary for the functioning of these examples. You’re, obviously, free to add up as many extra parameters as you see fit, starting with the common width and going up the ladder to the baddest meanest hacks you know.

If you ever tried to get an 1px; border on a table, in HTML, you probably wrote this: < table border = ” 1 ” bordercolor = ” #000000 ” > etc. But see it in a browser and it’ll show 2px borders instead. WHY? Simple, if you come to think about it: because, when defining the 1px border, it applies to both the table and it’s cells (by means of inheritance), and the 2 borders adding up always result in disurbing, thick, 2px borders. To better understand how this happens, suffice it to give the table acellspacing=”5″ – only then will you see how, in fact, the border was 1px thick… The 2 cases look like this:

Still, what to do, if CSS isn’t at hand and you still want that fine 1px border? Use this little trick:

< table cellspacing = ” 1 ” bgcolor = ” #000000 ” > … and then give all the cells a white background-color. This way, with no table-border but with an 1px spacing, the spacing WILL BECOME the 1px border you wanted in the first place.

{ empty-cells: show }

This will force all the empty cells to SHOW the border, even if empty. (the other possible values for this property are: hide and inherit)

The solution proposed was to use conditional javascript expressions inside the CSS file. Not very elegant, and quite limited.

Meanwhile I found a much simpler, more elegant and better validating solution. Let’s say we want to get a min-height of 400px. How do we go about it? Easy enough, we use 3 CSS properties instead of just one, like so::

min-height: 400px;
height: 400px;
height: auto !important;

And, miracle! It works! In every browser that I always test against: IE6, IE7, FF, Opera, Safari. Enjoy…