set rsCSS = db1.execute("select * from tblCSSClasses")

That line alone should gives a great peek into how that application handles Cascading Style Sheets in such a disastrous manner.

Overflowing Style Sheets - Worse Than Failure

Well, this is one of the worst disasters I’ve seen in a long, long time.

technorati tags:wtf, css

I dug up this blog post while trying to tweak Aptana’s performance on my (old) laptop. Check out the first comment to the post; following those recommendations really sped up and improved Aptana’s performance. Definitely worth trying, especially if you’ve got an older machine.

technorati tags:aptana, eclipse

A pretty comprehensive list of CSS Selectors and Pseudo Selectors and browser support

technorati tags:css, browsersupport, selector

As a Aptana fan, it’s time to tout one of its features. (Prerequisite: download the app. It’s a really good IDE that becomes a must-have app if you’re doing anything with RIA or Rails, as they’ve merged RadRails into their larger project.)

In the Aptana perspective of the IDE, click the little yellow triangle with an exclamation point in it, right under the top menu bar on your screen. See a bunch of little yellow triangle icons and bars appear around the document you’re working on? Those are warnings; they show you things your should fix to improve your code and knock out minor bugs (missing semicolons in your JavaScript, missing alt attributes on your images, etc.). Improve your code! Click the yellow triangle!

Why can’t I ever remember this?

filter:alpha(opacity=[0..100]);

technorati tags:ie, css, opacity

Creating a multi-column layout in a JSP using JSTL can be a difficult concept to master. Over at my day job, we’ll see this concept occasionally. We’ll have a block of data that we’d like to present in a series of columns, with a maximum number of items in each column. Here is a quick tutorial to outline a solution to this pattern. We’ll be using Sun’s Core JSTL tag library, to do the heavy lifting, along with CSS and HTML.

The Setup
Let’s assume we’ll have at most 30 items in our set, and we’ll want a maximum of 10 items in each column, giving us a three-column layout. For this example, we’ll also put our items in an ordered list so that we can see what item number we’re working with. Let’s set that up in code.

1. CSS — You’ll need a simple column layout that accounts for the fact that you may have any number of columns, depending on how much data you’ll be working with. I’ll use floats to make it simple, and I’ll add a border to each successive column for a little visual flair. My CSS would look like this:

           div.leftCol{
             float:left;
             width:200px;
           }
   
           div.middleCol, div.rightCol{
             border-left:1px solid #CCC;
             float:left;
             padding-left:20px;
             width:200px;
           }
         

2. HTML — This one is up in the air. You may have three divs, you may have one. But, they’ll all look something like this:

   <div class="leftCol">[[10 items]]</div>

We know what we’ll be working with, but we’ll need some creative use of JSTL to actually get these elements to fall into place and enforce our maximum values per column rule.

The JSTL
We’ll be making use of two JSTL Core constructs: the <c:if> tag and the <c:forEach> loop.

• <c:if> works like any standard if test. We’ll use it to test column data boundaries.
• <c:forEach> gives us a hook called "varStatus" that lets us peek into the status of the iteration. We’ll be looking specifically at the index property of that varStatus object.

Writing the Code
Let’s start with a skeleton JSTL loop, so that we have a little scaffold to build on.

    <c:forEach items="${someItems}" var="item" varStatus="loop">

      <li>${item}</li>

    </c:forEach>
  

That’s a start. We still have to figure out where to place our starting and closing div tags and our starting and closing ol tags, which is the problem concept behind this pattern. Luckily, there’s a clever way of solving this problem.

Assume that we know that there will be at least one item to work with. (If there’s a chance for zero, use a <c:choose&gt block to react appropriately, dealing with the zero condition separately, and using this method as-is.) With at least one item, we’ll always need a left column and a start <ol> tag, no matter what. We’ll always need closing tags for our left column div and an ol, too. Knowing that these are always required, we’ll move them outside the loop, so that they’re always displayed.

    <div class="leftCol">
      <ol>
        <c:forEach items="${someItems}" var="item" varStatus="loop">

          <li>${item}</li>

        </c:forEach>
      </ol>
    </div>
  

We now have at least one column and list. We can use simple if tests to figure out when to close that first column and list and begin a second. In pseudocode, if we are at our maximum number of items, print a
close ol tag, print a close div tag, print a new open div tag with appropriate class, and print a new open ol tag. So, if we’re at a maximum number of items (in our case, 10 and 20), we’ll close that column and start a new one. Let’s add that concept to our block of code, and finish this pattern. (Remember that loop.index gives us a count of which item we’re on.)

     <div class="leftCol">
       <ol>
         <c:forEach items="${someItems}" var="item" varStatus="loop">

           <li>${item}</li>

           &;lt;c:if test="${loop.index == 10}">


           &;lt;c:if>

           &;lt;c:if test="${loop.index == 20}">


           &;lt;c:if>           

         </c:forEach>
       </ol>
     </div>
  

That above code may take a few seconds to sink in. The trick is that the </ol> and </div> tags after the loop will close any <ol> and <div> tags that are open at that point. It could be the left column that those tags close, or the middle column, or the right column. Let’s think about that for a second.

• If there are 4 items in the list, we print the opening tags, enter the loop, print 4 items, exit the loop, print the close tags.
• If there are 17 items in the list, we print the opening tags, enter the loop, print 10 items, print the close tags for the left column, print the opening tags for the middle column, print 7 items, exit the loop, print the close tags.
• If there are 24 items in the list, we print the opening tags, enter the loop, print 10 items, print the close tags for the left column, print the opening tags for the middle column, print 10 items, print the close tags for the middle column, print the opening tags for the right column, print 4 items, exit the loop, print the close tags.

As you can see, we’re using the nature of HTML (a closing tag closes the nearest opening tag, regardless of any attributes that opening tag may have) to simplify our work and save many lines of JSTL. In the meantime, we have a simple pattern that will allow us to create as many columns as we want (simply create a generic CSS column class) with as many items in each as we want (simply change the boundary values in the JSTL). The key to the puzzle: keeping code we know we’ll always need outside of the loop so that it will always be printed and taking advantage of the nature of HTML.

technorati tags:css, jsp, jstl, howto, layouts

This is, without a doubt, the strangest IE 6 bug that I’ve ever encountered (and, I’ve encountered just about every one). Here’s the gist of it: when a list item (<li>) in an ordered list (<ol>) has layout, it can’t keep track of it’s correct number any more. That’s right: every item in an ordered list will be item 1. Insane.

How do you get this crazy behavior? Do things like give an <li> width or height. Due to IE’6 wonky list rendering in general, it will also probably no longer display the number indicator entirely, but this can be fixed by using list-style-position:inside or giving the <ol> in question some margin-left. Once that number displays, if it wasn’t already, it will be "1." Over and over and over again.

How can you combat this bug? Well, you can give width to the parent <ol> and use padding to acheive the width you’d like. (Also, you’ll probably need to give the parent <ol> some negative left margin to combat the crazy margin you’ll need to use to get the list item numbers to display in the first place).

Confusing? Yes. Just remember: width and height on <li> tags can lead to strange behavior in IE6.

technorati tags:ie6, browserbugs, cross-browser

In some cases, a design calls for a column with a background color blending into a gradient (or blending into gradient fading into white for a little "fade out" effect). That’s not terribly difficult to do when you’ve got a column with a fixed height: just cut a one-pixel-wide background image and use background-repeat:repeat-x in your CSS. That will create the effect you’re looking for: a full column width and column height gradient. But, what if you’re trying a background gradient in a column with a liquid height?

Here’s an example of what we’re trying to do, with CSS and HTML created by yours truly at the day job. Check out the left column. Essentially, we’re using the two-column layout described here and we’d like one of our liquid height columns to have a background gradient (or, in TheLadders example, a solid background color moving into background gradient fading out to solid white). It’s easy to do in four lines of CSS. This is the basic premise:

1. The Setup: From your design, slice your gradient at the point where the solid background color ends and the gradient shift begins. Leave a pixel or two for a buffer. This will allow us to use CSS to specify the background color, and our gradient image to live as our gradient.
2. The CSS: The CSS isn’t very complicated at all. You’ll just be letting background-repeat do its thing, and prevent your background gradient image from tiling. In our case, we’ll need to specifiy background-color, background-image, background-position, and finally background-repeat for the effect. By using these properties, we’ll ensure that we have a solid color and a non-tiled background sitting right at the bottom of our column, no matter how tall it gets.

What does all that code look like? Something like this:

div#leftColumn{
    background-color:#333;
    background-image:url(images/gradient.gif);
    background-position:bottom;
    background-repeat:no-repeat;
}

Pretty simple, eh? background-position ensures our gradient sits at the bottom of our column no matter how tall it is, while background-repeat ensures we only see it once. You’d like a top-down gradient? Use background-position top. As the example shows, we get a pretty little visual from some pretty short code.

Roger Johansson presents tyling form controls with CSS, revisited. It’s a look at just what CSS can do when used on nearly every single element you’d stock in your forms, and is good for a view if you plan on attempting to add style to your forms any time soon.

technorati tags:css, forms

If you, like me, are using conditional comments to apply CSS "fixes" to Internet Explorer here’s the one you’ll need to detect IE 7:

<!--[if IE 7]>

<![endif]-->

technorati tags:ie7, css, web development, conditional comment