Team Ravenglass

Every once in a blue moon you stumble into some legacy code that uses framesets -with each frame in the set having its own IE specific hacks to make IE think that the frame's contents need to be rendered as IE 6, 7, or 8.

So what's the big deal? Certainly the fine folks at Microsoft would expect this! These rare situations worked fine in IE 9, and as such it should work in 10!

But lo-and-behold, it doesn't! In IE 10, you see a frame that renders as a blank white page, and when you resize the window it's content appears.

In IE 10, all pages rendered as part of a frameset need to be rendered in the same document mode (Either 10, 9, 8, 7 or quirks) -- This means you cannot have one page of the frameset with a X-UA-COMPATIBLE http header set to something other than what the other pages are rendered as.

If one frame is rendered in compatibility mode, all the others must be as well.

The good news is it is a simple fix -- either remove the need for the special document mode, or set the entire frameset to render in the special document mode.

This entry was posted on May 17, 2013 at 12:47 PM and has received 221 views. There are currently 0 comments. Print this entry.

As you might know, adding padding to any element with CSS increases the width of the element. So if you add 10px padding to a 100px div, it actually becomes 120px wide (10px are added to each size). If you really only wanted a 100px div, you need to make the div 80px and add padding of 10px. This addition of padding even applies when you set a width of 100% to an element - it actually becomes 100% plus your padding on each side!

Intuitive, right? Yeah - not so much.

I think most of us, when adding padding to a div, mean that the width should be the width and the padding should be inside of that - not on the outside.

Enter box-sizing:border-box.

This will change your life.

Here is a recommendation for your CSS going forward that I found on a GREAT article on this subject : * { Box-sizing: Border-box } FTW by Paul Irish.

This gives you the box model you want. Applies it to all elements. Turns out many browsers already use border-box for a lot of form elements (which is why inputs and textareas look diff at width:100%; - Click here for a great article on form styling) But applying this to all elements is safe and wise.

Check this article out for a great write-up on the subject and happy coding!

http://paulirish.com/2012/box-sizing-border-box-ftw/

This entry was posted on May 17, 2013 at 11:17 AM and has received 153 views. There are currently 0 comments. Print this entry.

At Ravenglass, communications aren't just part of our business, they dominate our business. Whether it's understanding customer requirements, building effective solutions, or explaining systems and processes to new team members, communications are the key to agile, consultative application development.

Seth Godin's recent "Miscommunication" blog advocates for something that we strive to do every day at Ravenglass: When in doubt, ask.

This entry was posted on May 10, 2013 at 3:59 PM and has received 356 views. There are currently 0 comments. Print this entry.

In Internet Explorer you cannot put a hyperlink around a table; like this <a href=""><table><tr><td>...</td></tr></table></a> and expect the whole table to be clickable. This method works fine in other browsers such as FireFox, Safari, and Chrome.

Here is a simple work around: <table class="tableLink" onclick="window.location='/';"><tr><td>...</td></tr></table>

Doing this makes the whole area clickable, but none of your regular hyperlink attributes are there like the underline, the blue text, and the cursor changing. If you would like to mimic a hyperlink use the following styles.

tableLink{
  cursor:pointer;
  color:blue;
  border-color:blue;
  text-decoration:underline;
}

Here is a example that represent the initial problem and the work around. If you play it in Internet Explorer you will notice the problem.

This entry was posted on May 10, 2013 at 12:05 PM and has received 220 views. There are currently 0 comments. Print this entry.

The purpose is this entry is to give a basic introduction to using the SQL Server Integration Services (SSIS) Send Mail Task and detail a couple of quirks that I've run across.

To send email via an SSIS package, first you need to drag the "Send Mail Task" into your control flow. Then, it is as simple as setting up your SMTP Connection and configuring the To, From, Subject and Message fields.

The task editor dialog gives three pages where you can configure these options, General, Mail and Expressions. You can get to the task editor by double clicking on the task, or right clicking and choosing "edit". These pages are described below:

[More]

This entry was posted on May 8, 2013 at 12:10 PM and has received 274 views. There are currently 0 comments. Print this entry.

External dependencies are, in fact, external. As such, they are calculated risks with tradeoffs. CDNs are great, but for those minutes or hours that they go down a year, they can be very annoying.

How can we as application developers fallback gracefully when an external dependency like a CDN goes down?

With JavaScript we can detect when our CDN-hosted JavaScript resources like jQuery or jQuery UI aren't loaded successfully and try again to load them from local locations.

One way to create a CDN fallback is to check for a type or variable that should be present after a script load. If that variable is not there, try getting that script locally.

Note the important escape characters within the document.write. Here's a jQuery example:

Or you can do something like this:

You can also use RequireJS, which has a great shorthand for fallback URLs:

As always, plan for the worst and hope for the best!

This entry was posted on May 3, 2013 at 1:35 PM and has received 367 views. There are currently 0 comments. Print this entry.

This is a great resource for checking compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Bookmark it!

http://caniuse.com/

This entry was posted on April 30, 2013 at 11:32 AM and has received 555 views. There are currently 1 comments. Print this entry.

The latest jQuery has been released, version 2.0.

This new version sounds exciting, with its smaller size and increased speed/performance, due to dropping support for IE 6, 7 and 8. A note to developers who need to accommodate older browsers: there is no need to worry, the jQuery team says that they will continue to support the 1.x branch.

Remember to test thoroughly before upgrading to the latest version of jQuery!

You can read more about this release on the official jQuery 2.0 blog entry.

This entry was posted on April 19, 2013 at 1:24 PM and has received 414 views. There are currently 0 comments. Print this entry.

I recently discovered that all versions of Internet Explorer below IE9 do not support displaying JPEG/GIF image files saved using the CMYK spectrum. All that shows up in their place is a broken image logo with a small red X. Here is a nice article on the differences between the two color spectrums RGB versus CMYK. The basic rule of thumb is that for anything viewed online it should be saved using the RGB spectrum, if you're printing it, then CMYK is the way to go. I had found this blog post explaining which browsers JPEG/GIF images saved using the CMYK spectrum display in Image not showing in IE8 due to CMYK encoding

In my research their were many sites about converting RGB to CMYK, but it seems that most people do not want to go the other way. No matter what, when you convert to a different spectrum the colors of the images are going to be distorted. At first I used a website that was supposed to take an image saved in the CMYK spectrum and upload it, the site then converts it to RGB, when I did this the colors were extremely washed out. In the long run I wound up using GIMP to convert the image to RGB and uploading it to the site, while the colors still changed it wasn't nearly as drastic as the website's version.

This entry was posted on April 17, 2013 at 3:06 PM and has received 311 views. There are currently 0 comments. Print this entry.

This is more of a research blog entry. Everyone has their preferences of which browser they use and why. I personally use Firefox at work and Chrome at home and have a strong dislike for IE (mainly because I am a programmer). The reason I use FF at work is because I like the debugging tools it has to offer.

I wondered if others shared my strong dislike for IE so I did a little research and this is what I came up with. Globally Chrome is the most widely used web browser. According to the Browser Statistics page on the w3schools website 50 percent of users use Chrome, then Firefox, IE, Safari, and Opera in that order. In this list of 2013 Top Ten Internet Browser Comparisons Opera beats out Safari in the ratings, but the rest of the positions are the same.

Chrome first made it's debut in September 2008 and stole the number one spot in March of 2012. The rating on the Top Ten Website is 9.85/10. The below chart indicates the same and was published in May of 2012. (Source: Mashable)

FireFox peaked in July of 2009 with 47.9% of users. This was just before Chrome really took off running. The rating on the Top Ten Website is 9.33/10.

The w3Schools statistics also show that in 2002 Internet Explorer was used by 85.8 percent of users, but this was because there was nothing better. The rating on the Top Ten Website is 9.08/10.

Safari had it's highest percentage of users in April of 2012 with 4.5%. My personal opinion is that Safari is only in the running because Apple used to force it on their users without an option. The rating on the Top Ten Website is 8.70/10.

Opera has been around since March of 2003 and at it's highest only had 2.6% of users. The rating on the Top Ten Website is 9.03/10.

What browser do you use and why?

This entry was posted on April 2, 2013 at 3:18 PM and has received 422 views. There are currently 3 comments. Print this entry.