These were done with browsercam, so the test may or may not have fully run its course by the time the 15 second delay was up. Still, it’s not like any of these browsers were close, so a few seconds isn’t going to save them if, in fact, they were cut off before the rendering was over.
As a note, I tried to do the Capture in Konqueror and it pretty much made Browsercam cry and/or vomit (“Do NOT Try The Capture Again!”) I’m going to log in shortly to see what the actual damage is.
[update]It’s a known bug and some commentors were gracious enough to take screen shots with updated versions.[/update]
Support: This technique is supported by IE 5.+, Firefox (and the rest of the Mozilla family) and Safari 3.0*. It is not supported by Opera** (any version), Netscape 6.2 and earlier or Camino.
Warning: I haven’t thought this all the way through, so if you see any problems with this technique other than the above support caveats, then please let me know I’m really just writing this up because I just thought of doing it, I tried it and it worked… Read the rest of this entry »
Why do such a thing? For fun, of course- and to expand on a point I made today at work…
Some background- I’m working with a new guy who is not so savvy to modern HTML/CSS layout techniques and today, while talking to him about some potential techniques he might use for an upcoming site, I remarked – “With CSS you can make practically any element do whatever you need it to do, so don’t always assume you need to wrap things in a DIV* to make a layout work.” The point related to the dangers of DIV-itis and my desire** to pare down markup to its absolute (meaningful) minimum. But it also illustrates a basic idea that, once fully understood, opens up all sorts of options for problem-solving.
So, anyway, chewing on the exchange on my way home from work I was struck with the idea of doing a simple three column layout using nothing but an Unordered List. My original comment was about a UL used as a menu and tweaking it to behave like a bunch of divs (which was his original idea for the menu) or something, so I thought it might be interesting to go all out use a UL for the entire layout, tweaking the LIs in a whole bunch of different ways to suit my needs. If that doesn’t illustrate my point, nothing will. Read the rest of this entry »
I was looking at the CSS 2.1 Candidate Recommendation today and notices that there’s a New ‘display’ value- ‘inline-block’. That caught my eye as I’m long actually familiar with the inline-block display value. I’ve used it a couple of times for IE-specific browser hacks and I’ve always thought it would be cool if it were picked up by Firefox. Hopefully now that it’s made its way into a candidate recommendation and, presumably a real specification, they’ll add support and then I’ll be happy- in a really nerdy way.
I’m looking something like two or three years into the future to a point where I can implement a small, almost neglible upgrade to the way I serve back, next and home buttons for my galleries. Add one part coding neuroses, one part browser incompatibility and one part CSS and this article will be a small glimpse at the way I think.
I’ve used this technique several times and I’m actually using it prominently in a UI component that I’m working on right now. I’ll have a lot more on that at a later date (plenty to write about with that piece:)) and I’ll actually have more on the potential pitfalls of this technique as well. This post is just the basics.
Anyway, this technique works in everything that browsercam offers other than the following unsupported browsers:
Konqueror 3.4.0-5
Explorer 5.2
Mozilla 1.6
Opera 8.5.0
Netscape 4.78
Internet Explorer 4.0
All things considered, that’s really pretty good coverage. So, if you’ve been dying to get some variable opacity into your life and you want to apply it to an arbitrary element, then this is your post.
Okay… enough with the intro. Here’s a sample:
And here’s the code for the sample page (all of it.) The important bits are in bold and the comments should explain all there is to know about the technique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>opacity sample</title>
<style type="text/css">
.seventy-percent {
color:white;
background-color:#336699;
position:absolute;
width:225px;
height:225px;
/*here's the CSS3 standard method. this works in everything* but IE. */
/*It's in fractions of 1. So 1 is 100% opacity (AKA the default) and .5 is 50% opacity.*/
opacity:.7;
top:20px;
left:20px;
padding:10px;
}
body {
background:url(http://www.drunkenfist.com/web/samples/transparency/bg.jpg)
}
h1 {
margin-top:75px;
}
</style>
<!-- and now I use conditional comments to slide in the IE specific code.
Since every other browser thinks this is just a comment it keeps all the evil IE-ness
away from other browsers.
-->
<!--[if gte IE 5]>
<style type="text/css">
.seventy-percent {
/*It's a 100 scale. So 100 is 100% opacity (AKA the default) and 50 is 50% opacity.
The worst part of this is not the CSS issues, since this sort of forking is common.
It's coding opacity in Javascript. You always
have to make some second calculation to
make things match across browsers
*/filter:alpha(opacity=70);
}
</style><![endif]-->
</head>
<body>
<div class="seventy-percent"> This is a div with seventy percent opacity </div>
<h1>This is some text in the background</h1>
</body>
</html>
*everything but the previously named browsers, that is…
I’m really just writing this up because I just thought of doing it, I tried it and it worked…