Entries Tagged as 'CSS'

UI Tool: Rearranging Items in a List, jQuery-style!

CSS , Downloads , JavaScript , jQuery 3 Comments »

A few weeks ago, as part of an application prototype for a client, I used the fairly new jQuery UI library to create a UI tool where a user could rearrange a list of items by dragging and dropping them into different positions and then save those changes to the database.

I now have a public example posted and available for download--check it out using the link below:

List Sort Control (with jQuery)

It works in FireFox, IE, and Opera, and can be used in conjunction with any web application programming language.

When Experience Tells You It Can't Be True, It Probably Isn't

CSS , Web development No Comments »

Today I was trying to troubleshoot a design tool I created that worked perfectly in FireFox but not in Internet Explorer. There was an element on the page, a <div>, that IE would not apply the CSS style to if the style was applied based on the id attribute of the <div>. I could however apply styles to it if I added a class attribute to it and wrote the class in my CSS stylesheet.

It made no sense. I'd assigned styles based on the id attribute all the time, and had never seen this problem in any modern browser. What the heck was going on?

Finally I saw my mistake: I had left off the closing bracket of the <div> that was the parent of the <div> I was having trouble with. FireFox was "kind" (aka presumptive) enough to close that tag at runtime, and IE was not.

Had I trusted my experience a little quicker, I'd have looked at the HTML code for structural problems first before trying to figure out a way around the problem.

Using Conditional CSS Selectors

CSS 1 Comment »

The CSS I use in my applications is pretty straightforward. I stick with the basics, assigning styles based on element id, classes, and pseudo-classes.

When situations arise that require similar page elements to utilize differnet styles, I use ColdFusion or JavaScript code to evaluate the condition and assign the appropriate CSS class.

This article I found today is an excellent description about how to use CSS selectors to act only on page elements that meet a certain description--no JavaScript or server-side coding required:

Showing Hyperlink Cues with CSS

Since he makes a point of saying these selectors will work in IE 7, I can only assume that they won`t work (or at least not well) in IE 6, so you may not want to use these selectors unless you have a backup plan for mimicking the end-result using another method or you know your audience has upgraded to IE 7. Still, something worth knowing and a feature to look forward to as IE 6 rides off into the sunset.