Templatix Blog

If you ever had to use GIFs and you know just how jaggedy that transparency around the edges is, the PNG format, with it’s smooth transparency levels, is purely God-send. it’s just that IE (5,6,7) is, as usual, so stupid, that it doesn’t know what to do with the transparent areas and simply puts them over an abnoxious opaque gray rectangle. If you really must have PNG transparency into IE, you must use a dedicated filter (yet another M$ abomination), which filter in turn is able to display a transparent PNG as a background image, like so:

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…

If you didn’t know it yet, there’s a little CSS “hack” that, properly used, not only passes all classic validation systems, but is also very useful. We’re talking about !important;.

Basic usage: instead of width: 300px; you can write width: 300px !important;. But, more important, what does it do? Let’s see…

The basic function of !important; is to priorotize/set an ierarchy among the CSS properties attached to a page (be those inline or linked in external css files). In this respect, it can be used for 2 main purposes: Continue reading ‘!important;’

When working with DIV-s (as I’ve been doing, for a while now), if you want a layout going down as long as its contend goes, you’re forced to work with FLOAT-s. That is, with DIV-s that are positioned RELATIVE and that have a float:left or a float:right set up on them.

The Problem
The problem is that the FLOAT’s visual rendering model is an archaic one, dating back when a float was limited to an <IMG>’s align: left / align: right, which allowed the text to flow around an image (or an image to “text-wrap”). Back in the day, a float was limited, conceptually, to < IMG > si < P >. What resulted from the old model? Something like this:

If you look closer, you’ll see that the image included in the first < P > (marked with magenta in the image) has an align=”left” (the functional equivalent of float: left; in CSS), which makes the < P >-s (including the ones to follow) to seamlessly flow around the image. All nice an dandy.

But what do you do when you want that image/float to “force” the height of it’s containing holder? What do you do if you want that < P > -ul containing the image to stretch down in a way to include ALL the image? That was easy peasy with tables, but DIVs make it much harder. Continue reading ‘CLEARFIX – problem and solution for FF and IE (incluing IE7)’

SIMPLY PUT: menu with submenus, CSS-only (no JS)

Any modern browser (implicitely excluding all versions of IE), if is playing by the CSS book, has support for the dynamic pseudo-class “:hover” on ALL tags, not just on the lonely sad pathetic < a >.

Note: As you may already know, in CSS there’s a series of dynamic pseudo-classes (:hover, :active si :focus) that traditionally get associated with “a” in order to create different styles for the 3 possible different states of a link, as in a:hover, for instance.

Modern browsers, as I was saying, having implemented the support for this, allow for the association of the pseudo-classes with any HTML tag. In other words, you could very well define something like:

td       {background-color: #cccccc;}
td:hover {background-color: #336699;}

which would result in a background-color change on those td-s, on roll-over, without any need whatsoever to use HTML-bloating javascript code.

Continue reading ‘:hover’

For the sleepless… a page built exclusively with CSS… even though it doesn’t look like html… guess how they did it.

For those using Firefoxe’s Firebug, inspecting DOM elements is already a breeze. But what about Internet Explorer? The guys at slayeroffice have created a new DOM inspector that works on any browser, which is easy to install, by simply bookmarking it. It’s not as advanced as the Firebug, but it can prove extremely useful sometimes. See here

…or “Building An Expanding DHTML Menu With CSS and JavaScript – revisited”.

What’s this all about: a vertical menu with submenus which are hidden initially and show on rollover.

Requests:

1. On roll-over over a zero-level element, the corresponding sub-menu must appear
2. On roll-over over another zero-level element, besides the effect from point 1. any other secondary menu must hide, only the the submenu corresponding to the active roll-over must remain visible

The most elegant solution I found is in the page linked at the beginning of the article, but it was a bit too long for what I needed, so I took it, adapted it, and I got exactly what I need (see here a functioning example, with all it needs to understand it, if you look in the source).

Later edit: for a more elegant menu version (in terms of coding and approach), but less functional and without JS, read here (in Romanian).

Versiunea in Romana a acestui articol aici.

I wrote, some time ago, about how to solve this problem with min or max dimensions in more retarder browsers.

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…