David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. » Microsoft

Rounded Corners in Internet Explorer

David Walsh — Wed, 28 Oct 2009 12:38:00 +0000

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS:

.round	{ -moz-border-radius:12px; -webkit-border-radius:12px; }

As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners JavaScript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer.

View Demo

The CurvyCorners JavaScript

CurvyCorners detects the usage of “-webkit-border-radius” and “moz-border-radius” on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to:

var settings = {
			tl: { radius: 12 },
			tr: { radius: 12 },
			bl: { radius: 12 },
			br: { radius: 12 },
			antiAlias: true
		 };
/* moooo */
$$('.round').each(function(rd) {
	curvyCorners(settings,rd);
});

MooTools + Curvy Corners

CurvyCorners is known to brick your MooTools code. The trunk code fixes those issues.

View Demo

Don’t let Internet Explorer’s refusal to implement rounded corners via CSS keep your websites from being as dynamic as possible! CurvyCorners helps make rounded corners in IE possible!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Rounded Corners in Internet Explorer

Turn Internet Explorer into Chrome with Chrome Frame

David Walsh — Wed, 23 Sep 2009 02:00:59 +0000

I’m just going to cut to the chase: Internet Explorer is rubbish. I don’t care what version you throw at me — 6, 7, 8…rubbish. Apparently Google agrees with me because they’ve released Google Chrome Frame, a browser plugin and META tag system that allows you to turn IE installs into a virtual “Chrome” install so that IE will support HTML5′s canvas tag and take advantage of JavaScript performance improvements featured in Google Chrome.

Step 1: The Plugin

The user must first download the Chrome Frame plugin at the Google Chrome Frame page. The install works on XP and Vista operating systems, IE browser versions 6, 7, and 8.

Step 2: The HTML META tag

To activate Chromified Internet Explorer you must add the following META tag to your pages:

That’s it! Check out a demo here:

View Demo

More Details

Jump over to the Google Chrome Frame page to get more details about this project. There’s a great video featuring Alex Russell (of Dojo fame) where he explains the reason for Chrome Frame and usage.

Our Savior?

I don’t believe so. There are two big problems I see:

Most IT teams are keeping their businesses employees in the dark world of IE6. Chrome Frame would be a great solution for employees looking to get with the 90′s but how many businesses give their employees proper permissions to install applications? No many.
Users who don’t know the difference wont put an effort into downloading this plugin (i.e. my grandmother doesn’t even know what a browser is, much less IE and why it’s bad).

Thoughts?

I’m very interested in seeing what you all think of this. Crap? Gold? Let me know what you think!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Turn Internet Explorer into Chrome with Chrome Frame

Making IE8 Emulate IE7

David Walsh — Fri, 20 Mar 2009 12:55:27 +0000

As you probably know, Microsoft Internet Explorer 8 was “officially” released yesterday. If you were caught off guard by this and haven’t had time to test your sites in IE8, don’t lose sleep; you can make IE8 render pages like IE7 using a simple META tag.

The XHTML

It doesn’t get much easier than that. Don’t use this functionality as a crutch for too long though!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Making IE8 Emulate IE7

Sizzle and Peppy Selector Engines in MooTools

David Walsh — Tue, 24 Feb 2009 13:28:59 +0000

A few weeks back I touched on how you could implement the Peppy and Sizzle selector engines in MooTools. Both posts showed how to remove the default Moo engine from use and instead make each respective selector engine the one and only. It doesn’t have to be that way. You could use all three engines within the page as well.

Peppy, Sizzle, and Moo Together

//assuming that the JavaScript files we brought in via simple XHTML above...

/* MooTools */
var divs = $$('div');

/* Sizzle */
Window.$Sizzle = function(selector){
	return new Elements(new Sizzle(selector));
}
//sizzle usage
var divs = $Sizzle('div');

/* Peppy */
Window.$Peppy = function(selector){
	return new Elements(new peppy.query(selector));
}
//Peppy usage
var divs = $Peppy('div');

Why do this? Each engine has its advantages. Sizzle generally does better with Internet Explorer so if you detect that the user is using IE, you may want to use Sizzle to grab the elements instead.

In most cases the overhead of bringing in each engine makes this strategy overkill. It’s definitely an option though.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Sizzle and Peppy Selector Engines in MooTools

PHP, Microsoft SQL Server (MSSQL), and IIS: Connect and Query with ODBC

David Walsh — Thu, 31 Jul 2008 12:49:36 +0000

I was recently thrown a real curveball of a project. Instead of using a fresh MySQL database to pull information from, the customer required that we pull information from their new Microsoft SQL Server 2005 server. This isn’t the most desired method of PHP->Database interactivity but that’s what the project called for and that’s what I needed to do. Here’s how to get things going.

Connecting to Microsoft SQL Server 2005 from PHP

// the "driver" first
$virtual_dsn = 'DRIVER={SQL Server};SERVER=database.domain.org,45277;DATABASE=MyDatabase';
$connection = odbc_connect($virtual_dsn,'Username','Password') or die('ODBC Error:: '.odbc_error().' :: '.odbc_errormsg().' :: '.$virtual_dsn);

Choose Which Database

odbc_exec($connection,'USE MYDB');

Executing a Query

$result = odbc_exec($connection, 'SELECT FirstName FROM Names');

Using the Query Result

$first_name = odbc_result($result, 'FirstName')

Querying Tables and Columns with Spaces

// use brackets [] for tables and colums with spaces
$result = odbc_exec($connection, 'SELECT [First Name] FROM [Names Table]');

Like I said, while this isn’t the most desirable setup in the world, it will do. Big ups to Hostway for their help in configuring the server; they provided everything we needed.

To learn more about the ODBC functions, visit PHP.net

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: PHP, Microsoft SQL Server (MSSQL), and IIS: Connect and Query with ODBC

IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”

David Walsh — Fri, 04 Apr 2008 12:52:46 +0000

During the development of a recent website, I fitted the site with some awesome MooTools effects. Per usual, I would check each page with Firefox and once the page looked good, I’d switch over to Internet Explorer to make sure the site looked the same. That’s where the problem began.

Periodically, I would get a JavaScript-like alert box that said “Internet Explorer cannot open the Internet Site ________. Operation Aborted,” as show below:

After doing some research, I found a post by MooTools dev Aaron Newton that explained why the problem was occuring:

IE does this when you attempt to modify a DOM element before it is closed. This means that if you try and append a child element to another and that other element (like the document.body) is still loading, you’ll get this error. This will occur if you use .appendChild (which in Mootools includes .adopt, .injectInside, .injectBefore, etc.) or if you use Element.innerHTML = “” (or in Mootools, the .setHTML method).

The fix is quite simple: don’t do any processing until the DOM is ready.

window.addEvent('domready', function(){
  //do stuff
});

Click here to read Aaron’s full post. The moral of the story is not to modify elements that haven’t fully loaded!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”

Override Vista and XP’s Themed Buttons and Scrollbars Using a META Tag

David Walsh — Wed, 26 Dec 2007 13:59:21 +0000

The first thing I do to any fresh Windows XP or Vista install is change the theme to old-school “Windows Classic” theme. Square gray boxes, in my opinion, are much better than the awful “rounded”, colored bars. The XP and Vista theme settings also bleed into Internet Explorer, shaping and color buttons in ways I don’t want.

Luckily, using an HTML META tag, I can tell the browser to ignore the theme’s settings and show the standard, gray button.

I’m not advocating this, simply showing how it can be done.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Override Vista and XP’s Themed Buttons and Scrollbars Using a META Tag

The First Year of IE7 — Still Hated

David Walsh — Fri, 07 Dec 2007 04:38:15 +0000

The IEBlog posted The First Year of IE7 today and lets just say that the comments are anything but positive. Check out the scathing comments: http://blogs.msdn.com/ie/archive/2007/11/30/the-first-year-of-ie7.aspxFollow Me! Twitter | Facebook | LinkedIn | MooTools Forge. Full David Walsh Blog Post: The First Year of IE7 — Still Hated Related posts:Checking For Leap Year Using PHP Dear Developers, [...]

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: The First Year of IE7 — Still Hated

Prevent Double Margin & Padding In IE6 When Using CSS Float

David Walsh — Wed, 28 Nov 2007 14:16:46 +0000

My thoughts on Internet Explorer have been well documented; for those that don’t already know, I think IE hinders the internet’s progress and represents another embarrassment for Microsoft. That said, a majority of users still browse with Internet Explorer 6 so it’s important to make sure our customers’ websites look good in the browser.

One of IE6′s glaring mistakes is producing double padding and/or double margin when using the respective property on two floating DIVs that fall next to each other. Since I build websites using all DIVs, I run into this problem with every framework I create.

The Problem

The above title is misleading, as my code isn’t the problem — IE6 is. That said, the following code alone isn’t good enough:

#global-column-1			{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; }
#global-column-2			{ margin:0 0 30px 30px; width:250px; float:left; }

The above code will result in double padding in IE6.

The Solution

Use IE6-only CSS code to fix the problem in that browser.

#global-column-1			{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline; }
#global-column-2			{ margin:0 0 30px 30px; width:250px; float:left; }

The “* html #global-column-1″ declaration is only viewed by IE6. The”display:inline;” code actually corrects the double spacing.

Shouldn’t developers and the browser creators be working together? Apparently not, as Microsoft never fixed this issue.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Prevent Double Margin & Padding In IE6 When Using CSS Float

Microsoft’s Internet Atrocities

David Walsh — Mon, 24 Sep 2007 13:09:00 +0000

For ~~better or~~ worse, Microsoft has been a huge player in the way the internet has evolved. You would expect that considering Microsoft has had a virtual lock on the PC OS market as well as an overwhelming percentage of the browser market share. Unfortunately, however, Microsoft has lived up to its name as a poor-quality company when you consider their internet contributions. I consider Microsoft’s internet-related products as absolute atrocities that may have set us back more than they’ve pushed us forward.

Internet Explorer x.x

In this age, a browser installed on an operating system should be standard. That doesn’t mean the browser should be low quality, though. Internet Explorer’s entrance into the browser market was initially great because you could escape from AOL’s grasps, up until Microsoft decided that following standards wasn’t important, especially when you could implement your own.

Internet Explorer 5 and 5.5 contained numerous CSS inconsistencies, most notably with floating. Internet Explorer 6 was an improvement but Internet Explorer’s problems continued:

Numerous, CSS issues
Lack of CSS functionality
Insufficient security features
Inconsistent or missing standards implementation

Microsoft renewed its commitment to Internet Explorer in late 2005 after five years of being stagnant. Internet Explorer 7 implements many improvements but problems still exist and Microsoft has a long way to go to prove it’s serious about creating a good browsing product. Unfortunately, novice and beginner internet users will probably continue to use Internet Explorer for years to come.

FrontPage

Microsoft FrontPage debuted in 1997 and made every person with a computer think that they could make a website. Good? Hardly! Many of my customers exude an attitude of “why do I pay you that much if I could just do it myself using FrontPage?” People generally don’t understand the time, effort, and skill that go into creating a solid website and

Beyond how it affects me, FrontPage generates some pretty horrible code. There’s nothing like a good chunk of: FrontPage also generates browser-specific code (guess which browser), but of course the FrontPage “web developer”. And lets not forget that you need a server that allows FrontPage extensions.

IIS Server

IIS itself isn’t the worst of the evils. Is does provide great support for ASP and .NET technologies but installing PHP on an IIS server and then getting it to work is a nightmare (yes, I understand that IIS wasn’t meant for PHP). I mention that because I believe PHP installation with others servers is pretty fluid. IIS has also had more security issues than Apache but that’s no surprise, right? IIS, to my knowledge, doesn’t allow for easy URL rewriting like Apache does.

ActiveX

Microsoft created ActiveX to allow for programmers to provide users functionality beyond the capabilities of the standard browser. That’s fine and well most of the time but when malware creators get ignorant internet users to download their ActiveX control a world of hurt can ensue for the user. Unfortunately Microsoft left IE untouched for years so no provisions were created to try to prevent the problem. I’m on the internet more than the average user and I don’t visit any sites that require ActiveX functionality (I use Firefox, but never seem to encounter an ActiveX site). ActiveX is clearly not a needed technology.

Microsoft has been a huge letdown, creating subpar technologies that stifle web developers.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Microsoft’s Internet Atrocities