Here are some examples of various sites (if they have not already been fixed): http://www.beautifulpeople.com/index/en http://gameinformer.com/games/singularity/b/pc/default.aspx http://cph.dk/CPH/DK/MAIN

Mind you, the sites are displayed correctly in other popular web browsers.  They can be displayed correctly in Opera if you ask them to be parsed as HTML and not XML. (Click “Parse Document as HTML”).

So is it Opera that cannot parse XML or do other browsers chose to ignore XML in the page type and simply parse it as HTML?  The answer is in the server’s response:

If the browser is Opera:

If the browser is Mozilla Firefox:

Turns out the server lies to some browsers.  It can be said with a certain level of confidence that it does so based on the User-Agent line.  If you set Opera to Internet Explorer or Firefox in “Browser Identification” – the pages are displayed correctly.  The reverse is true as well – setting user agent to «Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US)» in Safari causes the server to mark the content as application/xhtml-xml in which case Safari fails to parse the document.

Silverlight environment is not .NET and simply adding the assembly to the GAC with gacutil gives no effect.  On the other hand one may notice the standard Silverlight assemblies in “Add reference” dialog of Visual Studio after having installed Silverlight.

As it turns out, to be able to refer to any assembly from any project with “Add reference” all that’s needed is a special key in the registry:

• openHKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\MicrosoftSDKs\Silverlight\v4.0\AssemblyFoldersEx
• if you have a 32-bit Windows, remove the Wow6432Node part.
• Create a registry key with the name of your project
• Add the default value containing the path to the assemblies

Now “Add reference” will show all the assemblies from the path in the key.

The solution turned out to be quite straight-forward.  Hope this helps.

The solution: add a function to the source code of the plugin:

return this.each(function(){

// Uncomment the line below to test your preloader
// alert(“Testing preloader”);

var slider = $(this);

// to add current class to current panel
slider.setCurrentPanel = function() {
$(‘.panel’, slider).removeClass(‘current’);
$(‘.panel:eq(‘ + (currentPanel-1) + ‘)’, slider).addClass(‘current’);
}

Next, add the function call to the places where currentPanel is set: lines 83, 99, 119 and 226)

slider.setCurrentPanel();

You can change the file yourself or just download the result.

Basic functionality and features:

• minimize, maximize and close buttons
• special feature: shiny objects animation during window move
• double-clicking the window bar maximizes the window
• infinitely extensible windows
• visual window highlighting
• animated window size change
• moving windows with mouse
• Z-order management (managing the windows stacking order)

and so on…

Available parameters:

• window title
• initial window X and Y coordinates, centering
• standard window size
• minimal window size
• window state: minimized, maximum size, normal
• parameters for window animation tuning
• generating windows on mouse and Javascript events

Examples:

Define a simple windows in AeroWindow

$ (‘#YourContainerDiv’).AeroWindow((WindowTitle: ‘My first very cool Aero Window for Web’,));

Define some special window parameters:

$ (‘# YourContainerDiv’).AeroWindow((WindowTitle:’My first very cool Aero Window for Web’, WindowPositionTop: ‘center’, WindowPositionLeft: ‘center’, WindowWidth: 400, WindowHeight: 100, Window Animation: ‘easeOutCubic’ WindowResizable: true, WindowDraggable: true WindowMinimize: true, WindowMaximize : false, WindowClosable: true));

Browser compatibility has been verified for IE 6, IE 7, IE 8, Firefox 3, Chrome 4, Safari 4, Opera 10.  The current (as of the time of this writing) AeroWindow release is 2.0 and is based on jQuery v1.4.2.

Here’s a nice little demo.  To download AeroWindow, follow this link.

Google Chrome Frame

This IE plugin renders pages with the Chrome engine.  Among the drawbacks is the need to install the plugin.  People who use IE do not want to / are afraid to / cannot install anything.

The fact that the plugin is being used makes one think – perhaps the answer is in using something to render the page instead of IE.  It makes little sense to try and build such a solution from scratch, but hey, there are some solutions out there already.

Like an html renderer written in Flash: HTMLWrapper.  It renders HTML and CSS through Actionscript with Flash goodies like gradients, animation, audio, video, etc.  There’s also the AS3 HTML Parser Library and DENG.  There are even SVG HTML renderers and enven a Javascript renderer for Javascript (talk about odd).

All of the above seems rather hard core, below are some examples of slightly more elegant solutions.

One could use different hacks like the advice from the Smashing Magazine though this solution is hardly convenient or pretty.

A systematic solution is needed and it exists: jQuery to the rescue!

jQuery CSS parser

This wonderful jQuery plugin lets you replace the following javascript:

$(‘.gallery a’).lightbox({overlayBgColor: ‘#ddd’});

with the following CSS:

.gallery a {
-jquery-lightbox: {overlayBgColor: ‘#ddd’};
}

There are plenty of plugins that emulate CSS3 in jQuery:

border-radius
jQuery Canvas Rounded Corners
jQuery Corners

border-image
borderImage

Multiple Backgrounds
Background Layers

and so on…

There are caveats, however.  Most of these emulators are rather raw and only work well on the demos on their home pages.  Those that work well will turn the web page into a mess if used together.  Try applying the border-radius and Multiple Background to the same block.

Perhaps your project could benefit from writing your own library that emulates CSS3.

Oh yeah, all of the proposed solutions will slow IE6-8 down.  This makes sense, let them suffer for not switching.

As usual, it’s quite simple for the compliant browsers:

.block {

width: 100px;

height: 100px;

background: #ff6600;

-webkit-box-shadow: 0px 0px 10px  #000000;

-moz-box-shadow: 0px 0px 10px #000000;

box-shadow: 0px 0px 10px #000000;

}

For IE we will use VML.  The following code enables it.  (this is a conditional comment of course).

<!–[if IE]>

<xml:namespace ns=”urn:schemas-microsoft-com:vml” prefix=”v” />

<![endif]–>

<!–[if IE]>

<style>

v\:rect  {

behavior:url(#default#VML);

}

v\:fill  {

behavior:url(#default#VML);

}

</style>

<![endif]–>

Without the above the browser will not recognize VML tags.

And here’s the markup:

<!–[if IE]>

<v:rect stroked=”false” class=”shadow”>

<v:fill focusposition=”.1,.1″ focussize=”.79,.79″ color=”white” color2=”#999999″ opacity=”90%” opacity2=”.0″>

<![endif]–>

<div class=”block”>&nbsp;</div>

<!–[if IE]>

</v:fill>

</v:rect>

<![endif]–>

For those not familiar with VML, here’s a brief explanation:

• v:roundrect — creates a rectangle with rounded corners
• stroked=«false» — stroked is true by default which creates a pixel-wide black frame
• arcsize — rounding radius
• v:fill — fills a shape with color, gradient or an image
• color2 — the shadow color
• color — can be anything, we’re making it transparent anyway
• opacity — second color’s opacity
• opacity2 — shadow opacity
• type — fill type. In our case it’s a circular gradient
• focusposition — the gradient’s focal point position within the block
• focussize — size of the gradient

The two final parameters control the placement and the intensity of our shadow.  They will change depending on the block size.

And finally, the shadow’s parameters:

<!–[if IE]>

<style>

.shadow {

width: 120px;

height: 120px;

padding: 10px;

display: block;

margin: -10px;

}

</style>

<![endif]–>

The VLM shape size does not include the padding.  It’s size is equal to block width + padding on the left + padding on the right (same with height).  A negative margin is added to compensate for the padding.

Here’s the end result:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ru”>

<!–[if IE]>

<xml:namespace ns=”urn:schemas-microsoft-com:vml” prefix=”v” />

<![endif]–>

<head>

<title></title>

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>

<script src=”shared/js/jquery-1.4.2.min.js“></script>

<style>

* {

margin: 0;

padding: 0;

}

body {

padding: 100px;

}

.block {

width: 100px;

height: 100px;

background: #ff6600;

-webkit-box-shadow: 0px 0px 10px  #000000;

-moz-box-shadow: 0px 0px 10px #000000;

box-shadow: 0px 0px 10px #000000;

}

</style>

<!–[if IE]>

<style>

v\:roundrect  {

behavior:url(#default#VML);

}

v\:fill  {

behavior:url(#default#VML);

}

.shadow {

width: 116px;

height: 116px;

padding: 8px;

display: block;

margin: -8px;

}

</style>

<![endif]–>

</head>

<body>

<!–[if IE]>

<v:roundrect stroked=”false” arcsize=”0.09″>

<v:fill focusposition=”.1,.1″ focussize=”.79,.79″ color=”white” color2=”#000000″ opacity=”.9″ opacity2=”.0″>

<![endif]–>

<div class=”block”>&nbsp;</div>

<!–[if IE]>

</v:fill>

</v:rect>

<![endif]–>

</body>

</html>

Try it from different browsers, the shadow should be identical in all of them, like this:

Here’s a very simple way to implement the box-shadow in css. Perhaps the idea is too simple and obvious for the esteemed writers of the Internet to ever want to publish it.

First, the compliant browsers:

div {
background: green; /* required for IE */
-webkit-box-shadow: 0px 0px 15px #222;
-moz-box-shadow: 0px 0px 15px #222;
box-shadow: 0px 0px 15px #222;
}

The idea really boils down to applying the shadow filter four times with different directions. This way the shadow wraps around the edges of the container.

<!–[if IE]>
<style type=”text/css”>
div {
filter:
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=45, Strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=135, Strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=225, Strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=315, Strength=6);
position: relative;
top: -12px;
left: -12px;
zoom: 1;
}
</style>
<![endif]–>

There are however some caveates:
• the shadow created with the four filters is darker than the box-shadow from css, a little tweaking of color and strength may be required
• IE augments the block by the size of the shadow and since we have two shadows on each side the size in incremented twice. At the end the block needs to be moved to the left an up according to this formula: left = top = -(strength*2)
• IE6 and IE7 require hashlayout, for them the zoom (width, height or any other parameters assigned to hashlayout) needs to be set at 1
• The block must have a background or the filters will be applied to child elements
Drawbacks:

• filters slow things down
• IE does not switch off font anti-aliasing inside a block with filters
• The shadows displayed in IE is more square than the one rendered in other browsers
• alphaImageLoader does not work inside such a block. Perhaps neither do other filters – the research continues.

Here’s an example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
<!–<link rel=”stylesheet” type=”text/css” href=”css/main.css” media=”all”>–>
<!–<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>–>
<!–<script type=”text/javascript” src=”js/main.js”></script>–>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
background: #064064;
padding: 50px;
}
.main {
width: 300px;
height: 300px;
background: green;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 15px #222;
-moz-box-shadow: 0px 0px 15px #222;
box-shadow: 0px 0px 15px #222;
}
</style>

<!–[if IE]>
<style type=”text/css”>
.main {
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=45, Strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=135, Strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=225, Strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=’#042b47′, Direction=315, Strength=6);
position: relative;
top: -12px;
left: -12px;
}
</style>
<![endif]–>
<title></title>
</head>
<body>

<div style=”margin: 0 auto; width: 300px; margin-bottom: 50px; color: #fff;”>anti-aliasing anti-aliasing anti-aliasing anti-aliasing anti-aliasing anti-aliasing</div>
<div>
<div style=”margin: 0 auto;”>without anti-aliasing without anti-aliasing without anti-aliasing without anti-aliasing without anti-aliasing</div>
</div>

</body>
</html>

Despite all the criticism of Flash, Adobe Systems keeps developing products based on it. The company is not staying astray from the general fascination with 3D that is being observed all over the world. This fall they plan to present the new version of the browser Flash Plugin with full support of 3D graphics.

Lately the main task was making sure the technology can perform on smart-phones and other devices with limited computing capabilities so the newer versions of Flash are much less power-demanding. They even have some 3D functionality though it remains very limited.

The information about the upcoming 3rd dimension was published in the agenda of Adobe MAX – a conference for developers scheduled to take place at the end of October in LA. The innovation to be presented at the Flash Player 3D Future session for developers. The name suggests that Adobe sees it’s future in 3D.

No details are being disclosed to let the suspense build up till the last minute. Adobe is promising a packed agenda as the 3D functionality looks to be quite extensive. Some tools for creating 3D presentations in Flash are already available, but the plan is to expand on them greatly as the capabilities of the plugin are about to multiply. The plan is to discuss the deadlines for developing new versions of Flash Player and to present the new 3D API. The participants are being promised a thorough introduction into the capabilities of the new technology.

If you are planning to develop 3D games, augmented reality or new interactive web sites – you must visit the upcoming conference – states Adobe.

The highest demand for 3D Flash is likely to come from the browser games developers. If Adobe can provide enough performance (perhaps through utilizing the graphical accelerators) – there will be a breakthrough in the industry.

Adobe Systems is most likely reacting to the tightening market conditions with the popularity of 3D. In the recent past most leading platform developers have been releasing products with a certain amount of 3D support. Nvidia for example presented it’s 3D video streaming based on Microsoft Silverlight at the recent Computex.

The bug has been reproduced in versions 10.54 and 10.60 for Mac OS. The illustration shows just how the shadow is rendered in blocks with the following properties:

/* top block */
div.first:hover {
box-shadow: 0 2px 10px #5f5
}
/* bottom block */
div.second {
box-shadow: 0 2px 10px rgba(0,0,0,0)
}
div.second:hover {
box-shadow: 0 2px 10px #5f5
}

This might help the web programmers, but hopefully the browser developers will notice it too and fix this tiny but unpleasant issue.

The IE9 Platform Preview can be downloaded from IE9 TestDrive web site.

The new version provides for HTML5 tags like audio, video and canvas (with hardware acceleration), support of Web Open Front Format (WOFF), a number of performance enhancements and bug fixes.

There are many new demo samples:

118 new tests have been added to the Testing Center + 1309 tests for ES5.

A score of 83/100 has been reached for ACID3. WebKit SunSpider JavaScript Benchmark shows an improvement in JavaScript handling speed.

A lot of new video footage has been released on Channel 9 to support the release:

• Internet Explorer 9 Platform Preview 3: A Look at the New Demos
• Internet Explorer 9 Platform Preview 3: A Look at ECMAscript 5
• Internet Explorer 9 Platform Preview 3: A Look at Canvas
• Internet Explorer 9 Platform Preview 3: A Look at HTML5 Video Support
• Internet Explorer 9 Platform Preview 3: A Look at Canvas and Amazon.com

There’s also a new post in the IE development team blog.

IE9 Platform Preview has been downloaded more than 2 million times since the release date.