I gave a presentation about Cascading Style Sheets and why they are important last night at the local Nebraska ColdFusion Users Group last night. Thanks to those who attended and brought questions.

For anyone interested, the presentation materials, including examples are available online at http://jake.cfwebtools.com/css_pres/css.zip.

As always, questions are welcome via my blog, via email or in person

One thing that I’ve learned a lot about in the last year and a half is CSS. Along with any other language, there is not one right way to do things in CSS. But, there’s usually one way that will make your life in the future much easier. The trick is finding it…

continue reading "CSS Rounded Corners"

I had to use a .png file with alpha transparency on a site which works fine in both IE7 and Firefox 2. However, IE6 does not like it at all. There is a fix out there called pngfix.js which works great if you have an img tag but this was a background image set in the CSS. Here’s what I did:

#wrap {
	margin:0px auto;
	background-image:url('/IMG/wrap_bg.png');
	background-repeat:repeat-y;
}
* html #wrap {
	background-image:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/IMG/wrap_bg.png', sizingMethod='scale');
}

This worked like a charm!

I’ve been developing using Farcry for nearly a year now and the dmCSS type has always puzzled me. I knew it had to be a way to have node-specific CSS but how do you use it? I finally took the time to learn how and here’s what I found.

continue reading "Farcry dmCSS How-To"

Honestly, I am blogging this to satisfy a coworker (Axel) who thought this was really cool.

You see this kind of thing all the time, a little X on a window that gets open that allows you to close it. Not the X close button on the title bar of the window but a little close link with an x. I’m a bit of a CSS geek so I made this in CSS. Here’s the code:

<a href="Javascript:window.close()" style="text-decoration:none;">close <span style="border:1px solid gray;width:15px;text-align:center;font-size:8pt;cursor:hand;">X</span></a>

Test It!

I searched for a long time on how to hack different browsers in CSS so I thought I’d post techniques for the 3 most popular browsers (IE6, IE7 & Firefox).

The Technique:

I strongly recommend writing CSS and testing it in Firefox. Get it to look right, then hack out IE6 & IE7. Nothing against any of the browsers but this has been the most effective technique for me. You will usually need to make several adjustments to widths and heights, padding and margints, etc in IE6 and IE7 should follow pretty much what Firefox does. There are a few exceptions like floating and positioning that I’ve found.

continue reading "CSS Browser Hacks"

Here’s a quick script that I use in a lot of header files to detect the user’s browser. else represents Firefox in most cases.

<cfif Trim(ListGetAt(CGI.HTTP_USER_AGENT, 2, ";")) EQ "MSIE 6.0">
        <link rel="stylesheet" type="text/css" href="css/main_IE6.css" media="screen" />
    <cfelseif Trim(ListGetAT(CGI.HTTP_USER_AGENT, 2, ";")) EQ "MSIE 7.0">
        <link rel="stylesheet" type="text/css" href="css/main_IE7.css" media="screen" />
    <cfelse>
        <link rel="stylesheet" type="text/css" href="css/main_FF.css" media="screen" />
    </cfif>

I truly thought this project would be the end of me. The project was to create a CSS menu that pops up instead of down. Simple enough. However, when the user clicked on a child item, that menu tree had to stay open. If you’re at all familiar with CSS menus you know that they basically revolve around an unordered list with several classes and they turn the display property in CSS on and off. Of course, this wouldn’t work because the use of :hover was out. So, here’s how I accomplished this (2 level menus only)…

1) Create a custom nav class based on the generic. mine neiNav.

2) Keep track of where you are in the navigation tree. In my case I was using 2 levels only. The first level was a child of Home and the 2nd level was a child of any particular item in the first level. Since the point is to keep the child menu open if the user selects something from it, we only need to keep track of the object ID in the 2nd level. I did this with the following:

<cfparam name="parentNavID" default="">
<cfif application.factory.otree.getparentID(request.navid).parentid NEQ application.navid.home>
	<cfset parentNavID = application.factory.oTree.getParentID(request.navid).parentId>
</cfif>

This way we know that if the parentNavID has a value, then the value it contains represents a level 1 menu item. Thus, the tree directly following this item needs to stay open

continue reading "A CSS Menu in Farcry That Stays Open???"