IE8 CSS Hack

So the quick hack I found last night does indeed work. Here is the breakdown of IE hacks:

div {
   color: black; /* works for all browsers */
   color: red\9; /* works for IE8 and below */
   *color: green; /* works for IE7 and below */
   _color: blue; /* works for IE6 and below */
}

Browser Review: Internet Explorer 8

Internet Explorer 8 has been out for a little while now, so I wanted to share some thoughts. Firefox is my main browser, so I haven't really played around with IE8's features, just used it for testing. Here are my observations so far:

They did a good job a fixing some display issues that were broken in IE6 and IE7. For the most part, I have been able to find myself not worrying about how things look in IE8. Unfortunately, there are a few quirks - things I've found that work fine in IE6/7, but not 8. I mean, what the heck? Why do they fix some things, then break others? It just adds to the endless frustration that is Internet Explorer.

For those differences I found in IE6/7 vs. FF, I was just able to use the star and underscore hacks. (properties like "*width: 500px" will only display for IE7 and below, while "_width: 500px" will display for IE6 and below). At this point, I have not yet found a simple hack that will work with IE8. (A quick web search just now proved otherwise, but I have not tested it yet. I will write a new post if it does work.)

One thing I have found helpful in IE8 is its "Compatibility Mode". It allows you to view a website as IE7 would see it. I have found it's not perfect - it does not always display things the same way standalone IE7 would, but it is much better than using MultipleIE (which is not perfect, either).

So overall, IE8 isn't bad, but I still look forward to the day we will no longer have to fix our code just so it will look all right in outdated and incompetent browsers.

Using Variables in jQuery

I occasionally use variables and for loops with jQuery in order to change certain items on a page. A good example of this would be my obfuscation script, modified to work for any number of obfuscated e-mails on a page.

jq(".replaceAt").replaceWith("@");

obfnum = jq(".obfuscate").length;

for(i = 0; i < obfnum; i++) {
jq(".obfuscate").eq(i).attr("href", "mailto:"+jq('.obfuscate').eq(i).text());
}

Notice the use of .eq(i). I have never had a problem with this, but the same method does not work if I were to do jq(".obfuscate:eq(i)"), which is quite necessary at times I want to change something inside of .obfuscate, and not .obfuscate itself. A quick Google search helped me find the solution:

jq(".obfuscate:eq("+i+")")

Fun Backgrounds

I have seen a few sites recently that use this nifty effect: movement of certain images when you resize your browser window. It's hard to explain, so here are some examples:

http://css-tricks.com/examples/StarryNight/
http://silverbackapp.com/
https://www.redbrickhealth.com/

Pretty spiffy and super easy. They use multiple background images with attachment: scroll and various position percentages. Can't wait to try it out on a site.

IE Image Scaling Quick Fix

I never knew this existed, but just came across this article.

To make Internet Explorer properly scale images, add this into your CSS:

img { -ms-interpolation-mode: bicubic; }

nice and easy :)

Firefox Extensions

There are a ton of Firefox Extensions available to help web developers do their job. Here are the ones I use:

Web Developer: I don't use this one very often, but it has a ton of useful options. I mostly use it to turn off Javascript and CSS, or to resize my browser to a certain width.

Firebug: It would be a bit harder for me to do my job without this extension. Firebug allows you to manipulate the code of a page and see the changes directly on your screen. None of these changes are saved anywhere , they will go away when you refresh the page. I like to use it for testing CSS code before writing it into my CSS file (saves time from writing, saving, uploading, refreshing and fixing). It is also a helpful tool for debugging Javascript or jQuery. One important thing to know about the HTML code it shows you: this is the generated code, which is different from the normal source code. So if you have some Javascript written to change an item on hover, you can see the changes that are made in the code as you hover on and off the element.

ColorZilla: A color picker for your browser. Very helpful when creating images that need to match the colors in your site.

MeasureIt: A tool for measuring width and/or height of areas on a website.

Pixel Perfect: Requires Firebug. Overlays an image (like a design comp) on top of your site so you can check how close you are to the design.

Simple Rounded Corners

CSS3 is still a ways out into the future. Sure, you can use some of its features, but if your sites need to be compatible for all modern browsers, you're stuck with CSS2 for the time being.

My most recent project uses a few rounded corners. Since I am using CSS2 and don't want any complicated code, I am using images for these curvy angles. If you read my previous post, you'll know that I'm trying to make my images as small in size as possible.

One solution is to use the sliding doors method. My problem with this is that in some cases, your one image is unnecessarily large, and in other cases, your image may not be large enough (you never know, especially if you work with dynamic content!)

My current project (immsersive-training.net) has boxes that fall into two categories: set height with unknown width, or set width with unknown height. For the boxes with set height, I made two images:

 

Obviously, the top and bottom of the box. For the middle of the box, I just used CSS. It has a set width and a border on the left and right. Pretty simple. My html code looks like this:

<div>
  <div class="header"></div>
  <div class="middle"></div>
  <div class="footer"></div>
</div>

The images are set as the background for the header and footer, and the CSS for the middle section is pretty simple:

.middle {
  border-right: 1px solid #999999;
  border-left: 1px solid #999999;
  width: 196px;
  padding: 8px 15px;
}

This also easily works for background colors other than white.

If your border is a little bit more complicated, then for the middle part I suggest using just a sliver image, and setting it to repeat-y.

Final Product:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.