Alternating column colors with jQuery

By Tim Priebe on January 4, 2010 at 7:04 pm in css,Design,html,Technical

jquery-tablesWe recently had one of our designers create a table design for a client with alternating column colors. Instead of laughing at her and not coding it, we instead decided to use a little jQuery goodness to get it taken care of.

We included the following code in our document’s head, using the Google jQuery implementation:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
$("table tr td:nth-child(even)").addClass("even-column");
$("table tr th:nth-child(even)").addClass("even-column");
});
</script>

So that’s the code that gives every other table cell, including header cells, the class of even-column. Now we can style those cells however we’d like.

In our case, a little CSS transformed the table pictured below on the left into the table on the right.

screen-shot-2010-01-04-at-64457-pm screen-shot-2010-01-04-at-64510-pm

Of course, putting the following in our google.setOnLoadCallback function will do something similar for rows.

$("table tr:nth-child(even) td").addClass("even-column");

This would result in the following:

screen-shot-2010-01-04-at-64554-pm

While this could have been solved by actually hard-coding the table’s cells with the even-column class, we are using WordPress on this site. This means the client could add their own table on down the line, having no idea what a class is, much less to add a specific one to every other cell in every row of the table. Plus, that would be a lot of work.

Tip for IE6 fixes in Dreamweaver

By Tim Priebe on November 27, 2009 at 5:03 pm in css,How-To,Technical

Dreamweaver and conditional IE6 CSSIf you’re a Dreamweaver user and you try to make sure your sites work in Internet Explorer 6, this tip is for you.

When using Dreamweaver templates, one of the things that Dreamweaver does well is automatically correct paths for you. This is extremely helpful, because you don’t have to worry about what directory you’re in when linking to files.

So you might link to a style sheet in your template Templates/main.dwt like this:

<link href="../_css/reset.css" rel="stylesheet" type="text/css" />

Then, when you look at a file index.php one directory up, it looks like this:

<link href="_css/reset.css" rel="stylesheet" type="text/css" />

Or, in a file /misc/news/index.php, it looks like this:

<link href="../../_css/reset.css" rel="stylesheet" type="text/css" />

Internet Explorer 6 often requires several CSS fixes to get your website to look like it does in other browsers. The method I personally prefer (and that we use at T&S) is a separate CSS file for IE6 that’s applied only when IE6 is used.

Here’s what that looks like:

<!--[if lte IE 6]>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

The only problem when using this technique in Dreamweaver-based sites is that Dreamweaver sees the entire thing as an HTML comment, and therefore does not update the CSS file’s path when it’s in a different folder. So it might work in some files, and not in others.

If your files are PHP files, there’s a workaround. You can use the following code:

<?php echo "<!--[if lte IE 6]>\n"; ?>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<?php echo "<![endif]-->\n"; ?>

And there you go. Now Dreamweaver will skip over the PHP code, and will assume that the IE6 stylesheet is just a normally linked stylesheet. Your browser will interpret the code correctly, but Dreamweaver will still update the path for you.

Firebug in IE

By Sean Sanders on October 20, 2009 at 6:50 am in css,Development,html,Technical

firebug-logoI’m Sean Sanders, one of the relatively new programmers here at T&S. Our former programmer Nick Little blogged previously about tools to help with web development, and one of those tools I find incredibly useful is the Firebug plugin for Firefox. There are some situations when having the ability to look at the CSS in other browsers the way you can in Firefox is helpful.  This is especially true with IE. Because of the way IE chooses to (not) display CSS rules, we often have to create style sheets just for IE to make it display our sites properly. A few days ago I found myself in a situation where I was trying to debug a site in IE7 and wanted to figure out exactly which rules were being applied. I looked into seeing if there was a way to use Firebug in IE.

What I found was a short bit of Javascript the people behind Firebug had written to be able use some of Firebug’s functionality in other browsers. They call it Firebug Lite.  This isn’t the full addon for Firefox, so you can’t change CSS on the fly the way you can in Firefox, but it’s still useful for being able to see how the rules you’ve created are getting applied. The following is the script for adding it to your website:

<script type=”text/javascript”
src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js”></script>

Also, for ease of use I wrote a bit of PHP to quickly turn the Firebug Lite script on and off.

<? if ($_GET['firebug']=="1") { ?>
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<? } ?>

Now all you have to do is view the webpage normally when you don’t want to see the Firebug information, and add the parameter ?firebug=1 to the end of the url if you want to turn on Firebug. (Or, if there are already URL parameters, &firebug=1) I mentioned IE earlier, but if you are having trouble with your website in other browsers, such as Safari or Opera, it works equally well.

Align Shadows on Repeating Backgrounds

By Nick Little on December 16, 2008 at 6:30 am in css

One thing web designers do a lot is add fancy shadows and rounded corners to content boxes. This would all be great, except for the fact that they like to use repeating backgrounds as well. As a web programmer, one might end up trying to write HTML and CSS code for a design that looks very similar to the image on the right. You may ask, “How is the image used for the background of the footer going to be aligned properly with the background used for the content section?” Here is a nifty javascript routine that can be used in this situation:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);

This routine will adjust the height of an element (In the example above, ‘divPreFooter’) so that a different element (‘divWrapper’) will have a height that is a multiple of a number (divisibleBy). This will align the repeating background on the content section with the background image behind the footer. The corresponding HTML and some sample inline CSS that work with the above routine is listed below.

<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <!-- Footer Content goes here -->
</div>

It works not only with shadows on repeating backgrounds, but also rounded corners or any type of alpha transparency on repeating backgrounds. It is much easier than trying to use images with alpha transparency in IE6, and it doesn’t use very many DIVs. This has been tested in the following browsers:

  • IE6
  • IE7
  • Firefox
  • Opera
  • Safari

EDIT (12/22/2008): I have added a complete example that is listed below. I have also tweaked some of the above code, so that it matches the specific example below.

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);</script>
</head>
<body>
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <p style="color: #FFF; padding-left: 50px;">Here is the content.</p>
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <p style="color: #FFF; padding: 30px 50px 0px;">Here is the footer.</p>
  <!-- Footer Content goes here -->
</div>
</body>
</html>

A zip file of the above sample code with the background images can be downloaded here.

CSS Reset

By Nick Little on November 25, 2008 at 6:30 am in css

A good CSS reset is a must-have in terms of website design. A CSS reset file sets basic styles so that they will be consistant amongst all the major browsers. For example, most browsers display headings (h1, h2, h3…) at slightly different sizes. A reset file can make them the same size across major browsers, using h3 { font-size: 150%; } or h3 { font-size: 20px; } or something similar.

Using a reset helps a lot with consistent display. Since all the styles have been reset, there are fewer browser inconsistencies that can plague websites. I have found this to be especially true when dealing with headings, lists, and tables. These seem to be the most inconsistent amongst browsers.

Here are several good websites that offer good resets. They offer everything from just the basic resets that cover all major browsers to a complete reset that removes almost every style from almost every browser one can think of.

Easy Guide To CSS Drop Down Menus

By Nick Little on November 4, 2008 at 2:31 pm in css,html

Drop down menus are one of the most useful tools in a website. They can make a big site very easy to navigate through. However, for the web developer they can seem like such a daunting task. This short tutorial can help anyone get started with a simple drop down. The drop down will work in all current browsers (Opera, Safari, Firefox, Chrome, and Internet Explorer 6+) if done correctly. IE will need a little bit of help using javascript.

The first thing to do when creating a CSS drop down is to write the corresponding HTML or XHTML. I have seen many people use DIV tags to code drop down menus. However, I would argue that the best menu, including drop down menus, is always a list. Here is how we should start our list:

<ul id="mainmenu">
  <li><a href="#">First Link</a></li>
  <li><a href="#">Second Link</a>
    <ul>
      <li><a href="#">Drop Down One</a>
      <li><a href="#">Drop Down Two</a>
    </ul></li>
  <li><a href="#">Third Link</a></li>
</ul>

Next, we need to add a little bit of javascript to the head tag to make sure that IE7 and below will work correctly. Note that since we are adding javascript for the drop down and the CSS for the drop down may not work in all older browsers, it is highly recommended that you still include all the subitem links on the item page. (ie. Include links to “Drop Down One” and “Drop Down Two” on the “Second Link” page.) The javascript tells IE and below to add “hover” to class attribute when mouse hovers over a list item, since it doesn’t support the :hover modifier for list items inherently.

<!--[if lte IE 7]>
<script language="javascript" type="text/javascript">
function makeDropDownMenu(ul) {
  var lis = ul.getElementsByTagName('li');

  for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onmouseover = function() { this.className += ' hover'; };
    lis[i].onmouseout = function() { this.className = this.className.replace(new RegExp('\\bhover\\b'), ''); };
  }
}

function loadIEHover() { makeDropDownMenu(document.getElementById('mainmenu')); }
window.attachEvent("onload", loadIEHover);
</script>
<![endif]-->

And now for the fun part! Styling the drop down with CSS can be a tricky process at first. Here are a few basic suggestions for troubleshooting your CSS if it does not work:

  • Know the cascading rules for cascading style sheets and make sure that one of your previous rules for the drop down is not overriding the rule that is not working.
  • Make sure that everything is positioned absolutely and that overflow is set to visible.
  • Make sure that you have overridden any default browser styles and/or styles used by the rest of the site (especially margin and padding).

If your drop down is not working the way you think then one of the above suggestions will probably be the answer. At least those were the issues that I regularly ran into the first few times I designed drop down menus. Below is some sample CSS that can at least help get you started. Note that many times IE6 and sometimes IE7 will need different styles than more standards compliant browsers.

<style type="text/css">
body { background: #A9DEEF; }
#mainmenu { margin: 0px; padding: 0px; overflow: visible; position: relative; }
#mainmenu li { background-image: none; display: inline-block; min-height: 15px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; }
#mainmenu li a { color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainmenu li a:hover { color: #000; }

#mainmenu ul { background: #000; left: -9999px; margin: 0px 0px 0px -63px; opacity: 0.8; padding: 0px; position: absolute; top: 15px; width: 127px; z-index: 1; }
#mainmenu ul li { border-top: 1px solid #FFF; display: block; margin: 0px; padding: 0px; }
#mainmenu ul li.First, #mainmenu ul li:first-child { border-top: none; }
#mainmenu ul li a { color: #CCC; display: block; font-size: 10px; font-weight: normal; padding: 5px 15px; text-decoration: none; text-transform: none; }
#mainmenu ul li a:hover { color: #FFF; text-decoration: underline; }
#mainmenu li:hover ul, #mainmenu li.hover ul { left: 50%; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
#mainmenu li { display: inline; }
#mainmenu ul { filter: alpha(opacity=80); }
#mainmenu ul li a { display: block; }
</style>
<![endif]-->

Putting it all together, we have:

<html>
<head>
<title>Drop Downs are Awesome!</title>
<style type="text/css">
body { background: #A9DEEF; }
#mainmenu { margin: 0px; padding: 0px; overflow: visible; position: relative; }
#mainmenu li { background-image: none; display: inline-block; min-height: 15px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; }
#mainmenu li a { color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainmenu li a:hover { color: #000; }

#mainmenu ul { background: #000; left: -9999px; margin: 0px 0px 0px -63px; opacity: 0.8; padding: 0px; position: absolute; top: 15px; width: 127px; z-index: 1; }
#mainmenu ul li { border-top: 1px solid #FFF; display: block; margin: 0px; padding: 0px; }
#mainmenu ul li.First, #mainmenu ul li:first-child { border-top: none; }
#mainmenu ul li a { color: #CCC; display: block; font-size: 10px; font-weight: normal; padding: 5px 15px; text-decoration: none; text-transform: none; }
#mainmenu ul li a:hover { color: #FFF; text-decoration: underline; }
#mainmenu li:hover ul, #mainmenu li.hover ul { left: 50%; }
</style>
<!--[if lte IE 7]>
<script language="javascript" type="text/javascript">
function makeDropDownMenu(ul) {
  var lis = ul.getElementsByTagName('li');

  for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onmouseover = function() { this.className += ' hover'; };
    lis[i].onmouseout = function() { this.className = this.className.replace(new RegExp('\\bhover\\b'), ''); };
  }
}

function loadIEHover() { makeDropDownMenu(document.getElementById('mainmenu')); }
window.attachEvent("onload", loadIEHover);
</script>
<style type="text/css">
#mainmenu li { display: inline; }
#mainmenu ul { filter: alpha(opacity=80); }
#mainmenu ul li a { display: block; }
</style>
<![endif]-->
</head>
<body>
<ul id="mainmenu">
  <li><a href="#">First Link</a></li>
  <li><a href="#">Second Link</a>
    <ul>
      <li><a href="#">Drop Down One</a>
      <li><a href="#">Drop Down Two</a>
    </ul></li>
  <li><a href="#">Third Link</a></li>
</ul>
<p>This is a test paragraph below the menu.</p>
<p> </p>
</body>
</html>

Each drop down is different, but the underlying principles and most of the base code is the same. As you deesign more and more drop downs you will come across more and more oddities in browsers that do not work the way you think. Thankfully, with more experience also comes the ability to troubleshoot the problems a lot quicker.

Min-height, Min-width, & IE6

By Nick Little on September 17, 2008 at 6:30 am in css,General,Technical

There is a way to get elements in IE6 to have a min-height and a min-width. However, both require hacks that isolate IE6 from other browsers. We’ll start with the easy one.

Min-height can be achieved in IE6 by using a conditional HTML comment and the height CSS property. It turns out that Microsoft decided that the height CSS property in IE6 and below should actually be the minimum height. We can put this inside a style tag in the HTML comment after the initial CSS. This way all other browsers will not see the CSS.

<style type="text/css">
  .minheightclass { min-height: 100px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minheightclass { height: 100px; }
</style>
<![endif]-->

Make sure that the element with the min-height does not have overflow: auto. It will not work in that case. You will need to override the overflow in the IE6 conditional comment in order for it to work.

Min-width in IE6 is a little bit trickier and it requires javascript to be enabled. We will still use the conditional HTML comment, but we will have to add a Microsoft proprietary CSS expression. A CSS expression allows some javascript code to dynamically determine the value of a CSS property. We will apply the expression to the width property.

<style type="text/css">
  .minwidthclass { min-width: 350px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minwidthclass { width: expression(this.clientWidth > 350 ? "100%" : "350px"); }
</style>
<![endif]-->

Be careful when using this hack as it can cause the browser to lock up if you get the values wrong.

Rounded Corners with Alpha Transparency, Dynamic Height, & Dynamic Width

By Nick Little on August 15, 2008 at 6:30 am in css,General,html

Have you ever wanted to create rounded corners with alpha transparency, but didn’t think you could get it to work in IE6? Believe it or not, it can be done. It requires quite a bit of HTML, but this is a sacrifice that must be made in order for the alpha transparency to work.

First, we must separate the box into three sections: top, middle, and bottom. The top and bottom must be separate from the middle if you plan on having a full background behind all the content in the box. This way the transparency on the corners will not show the background from the middle section. I divided this into three separate DIVs:

<div class="ContentTop"></div>
<div class="ContentMiddle"></div>
<div class="ContentBottom"></div>

Next, we need to add several DIVs inside the top and bottom sections that will act as the corners and center section(s). (We may need more than one center section if there is a repeating background with a shadow as shown in the image on the right.) We also need to apply styles to these corners and sections. For starters, we know that the left and right corners must be the same size as the background images, since this is the only way to get IE6 to properly display alpha transparency. We will use absolutely positioned DIVs to achieve this. Listed below is the code for all browsers except IE6. The code for IE6 will be shown last. However, we still need to consider the shortcomings of IE6 when designing the rounded corners.

<div class="ContentTop"><div class="ContentTopLeft"></div><div class="ContentTopRight"></div><div class="ContentTopCenter"></div></div>
<div class="ContentMiddle"></div>
<div class="ContentBottom"><div class="ContentBottomLeft"></div><div class="ContentBottomRight"></div><div class="ContentBottomCenter1"></div><div class="ContentBottomCenter2"></div></div>

<style>
  .ContentTop, .ContentTopLeft, .ContentTopRight, .ContentTopCenter { height: 47px; }
  .ContentTop { position: relative; padding: 0px 42px 0px 38px; }
  .ContentTopLeft { background: url(images/contenttopleft.png) bottom left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentTopRight { background: url(images/contenttopright.png) bottom right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentTopCenter { background: url(images/contenttop.png) bottom left repeat-x; }
  .ContentBottom, .ContentBottomLeft, .ContentBottomRight, { height: 52px; }
  .ContentBottom { position: relative; padding: 0px 42px 0px 38px; }
  .ContentBottomLeft { background: url(images/contentbottomleft.png) top left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentBottomRight { background: url(images/contentbottomright.png) top right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentBottomCenter1 { background: url(images/contentbottom.png) top left repeat-x; height: 47px; }
  .ContentBottomCenter2 { background: url(images/contentshadow.png) top left repeat-x; height: 5px; }
</style>

Optionally, there may be a shadow on the right or left of the content. This can be pretty tricky, especially when trying to get it to work in IE6. In fact, it won’t work completely in IE6 when javascript is disabled. I used a shadow on the right. Here is the code:

<div class="ContentMiddle">
  <div class="Content"><!-- Content Goes Here --></div>
  <div class="ContentRight"></div>
</div>

<style>
  .ContentMiddle { height: 1%; overflow: auto; position: relative; padding-right: 5px; }
  .Content { background: url(images/contentbg.jpg) top center no-repeat; padding: 30px; }
  .ContentRight { background: url(images/contentright.png) top right repeat-y; height: 100%; position: absolute; right: 0px; top: 0px; width: 6px; }
</style>

Now, to add in all the IE6 code. We basically replace all the transparent background images with the filter property. We also add in some javascript code to make the right shadow the full height of its container.

<!--[if lt IE 7]>
<style>
  .ContentTopLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopleft.png', sizingMethod='scale'); }
  .ContentTopRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopright.png', sizingMethod='scale'); }
  .ContentRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentright.png', sizingMethod='scale'); height: expression(this.parentNode.clientHeight + 'px'); }
  .ContentBottomLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomleft.png', sizingMethod='scale'); }
  .ContentBottomRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomright.png', sizingMethod='scale'); }
  .ContentBottomCenter2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentshadow.png', sizingMethod='scale'); overflow: hidden; }
</style>
<![endif]-->

Finally, putting it all together we have:

<div class="ContentTop"><div class="ContentTopLeft"></div><div class="ContentTopRight"></div><div class="ContentTopCenter"></div></div>
<div class="ContentMiddle">
  <div class="Content"><!-- Content Goes Here --></div>
  <div class="ContentRight"></div>
</div>
<div class="ContentBottom"><div class="ContentBottomLeft"></div><div class="ContentBottomRight"></div><div class="ContentBottomCenter1"></div><div class="ContentBottomCenter2"></div></div>

<style>
  .ContentTop, .ContentTopLeft, .ContentTopRight, .ContentTopCenter { height: 47px; }
  .ContentTop { position: relative; padding: 0px 42px 0px 38px; }
  .ContentTopLeft { background: url(images/contenttopleft.png) bottom left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentTopRight { background: url(images/contenttopright.png) bottom right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentTopCenter { background: url(images/contenttop.png) bottom left repeat-x; }
  .ContentMiddle { height: 1%; overflow: auto; position: relative; padding-right: 4px; }
  .Content { background: url(images/contentbg.jpg) top center no-repeat; padding: 30px; }
  .ContentRight { background: url(images/contentright.png) top right repeat-y; height: 100%; position: absolute; right: 0px; top: 0px; width: 4px; }
  .ContentBottom, .ContentBottomLeft, .ContentBottomRight, { height: 52px; }
  .ContentBottom { position: relative; padding: 0px 42px 0px 38px; }
  .ContentBottomLeft { background: url(images/contentbottomleft.png) top left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentBottomRight { background: url(images/contentbottomright.png) top right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentBottomCenter1 { background: url(images/contentbottom.png) top left repeat-x; height: 47px; }
  .ContentBottomCenter2 { background: url(images/contentshadow.png) top left repeat-x; height: 5px; }
</style>

<!--[if lt IE 7]>
<style>
  .ContentTopLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopleft.png', sizingMethod='scale'); }
  .ContentTopRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopright.png', sizingMethod='scale'); }
  .ContentRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentright.png', sizingMethod='scale'); height: expression(this.parentNode.clientHeight + 'px'); }
  .ContentBottomLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomleft.png', sizingMethod='scale'); }
  .ContentBottomRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomright.png', sizingMethod='scale'); }
  .ContentBottomCenter2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentshadow.png', sizingMethod='scale'); overflow: hidden; }
</style>
<![endif]-->

Happy Coding!