Klaus Hartl – Stilbüro - Klaus Hartl

min-height: fixed !optimized;

July 25th, 2005

Category:

CSS,

Web Development

Safari 1.0 does not support that pretty useful property min-height.

Therefore Dave Shea came along and presented a tricky solution of how to implement min-height for Safari. But there is one little thing I did not like about that solution: the need for two elements in the markup to make it work.

What if I cannot easily change the markup, but have to to employ the min-height property, for example for an existing website?

Pseudo-element selector :before to the rescue! So here's a solution – based on Dave Shea's method – that works without the need for some extra markup:

/* EOMB */
.box {
    padding: 99px 0 0;
    min-height: 1px; /* : Opera */
}
.box:before { /* Safari 1.0 min-height */
    display: block;
    margin: -99px 0 0;
    content: " ";
}

/* IE/Win */
.box {
    padding-top: 0;
    height: 100px; /* similar to min-height property in IE/Win */
}

min-height: fixed !optimized; demo

I have tested this technique in Firefox 1.0, Safari 1.0, Netscape 7.1, Mozilla 1.3, Internet Explorer 6 and Opera 7.23/8.

· Trackback URI · Permalink

whatever:hover, fast and easy

July 19th, 2005

Category:

CSS,

Web Development

A way to easily implement whatever:hover in your IE/Win specific style sheet (you know, you should use Conditional Comments) is using Dynamic Properties.

Have a look at the following snippet:

.whatever {
    background-color: expression('#808080',
        this.onmouseover = function() { this.runtimeStyle.backgroundColor = '#eaeaea'; },
        this.onmouseout = function() { this.runtimeStyle.backgroundColor = '#808080'; });
}

It looks a bit odd, but it works! Here is a little demo page.

I like this solution a lot, because using htc-files always ended up in a hassle for me. And I like beating IE with his own weapons.

Update: It is of course better to avoid having to define the same styles in two different style sheets. One should use a class and just change the class attribute on mousover/mouseout. Here is an complete example (taken from the demo page) – first the CSS for all browsers:

.whatever {
    background: #808080;
}
.whatever:hover, .whateverhover {
    background: #eaeaea;
}

IE's extra CSS:

.whatever {
    background-color: expression(this.runtimeStyle.backgroundColor,
        this.onmouseover = function() { this.className += ' whateverhover'; },
        this.onmouseout = function() { this.className = this.className.replace('whateverhover', ''); });
}

Update: I got a tip at the css-discuss mailing list, that one can even leave out the first part of the expression – this.runtimeStyle.backgroundColor:

.whatever {
    background-color: expression(
        this.onmouseover = function() { this.className += ' whateverhover'; },
        this.onmouseout = function() { this.className = this.className.replace('whateverhover', ''); });
}

Thanks Brett!

Update: I got another hint from the css-d mailing list: The described technique fails in IE 5/Win, probably because of the braces { } inside the declaration.

Fortunately there is another way to create an anonymous function in JavaScript:

var myFunction = new Function([param1[, param2[,...paramN]]], "statement1[; ...statementN;"]);

That way, whatever:hover – fast and easy – works in that old browser as well:

.whatever {
    background-color: expression(
        this.onmouseover = new Function("this.className += ' whateverhover';"),
        this.onmouseout = new Function("this.className = this.className.replace('whateverhover', '');")
    );
}

One last thing to mention: The technique does not work in IE/Mac. That browser simply does not support Dynamic Properties.

20 comments · Trackback URI · Permalink