I spoke to you back in January about Lijit. Remember I showed you that Lijit allows you to easily create your own search engine. One that searches your blog, bookmarks, photos, blogroll, and more.

I really liked Lijit then but I was disappointed that I couldn’t integrate the Lijit search functionality into WordPress. That is let Lijit take over my search box that was already there and is ALREADY there in just about every other blog too. Instead you had to put a widget on your page. I felt like this was such a mistake I actually went to visit Lijit in Boulder and told them so. Well I’m happy to say that they have listened and now allow you to let their search take over your search box. Here’s what they say:

Lijit’s integration with WordPress.org just keeps getting better! Now you can either install the Lijit Search widget OR have Lijit power your existing WordPress search box. As if that weren’t exciting enough, our Lijit stats will automatically display within your WordPress dashboard for one-stop stats viewing too.

Go ahead and have a look, try the search located in the top left corner….

If you like it you can find the Lijit WordPress plugin here.

Each sheet is done by a respected professional in that discipline — Jon Skeet, author of C# in Depth did the C# sheet and Molly Holzschlag, author of The Zen of CSS Design did the CSS sheet. Of course these sheets aren’t intended to teach you, but simply there to aid you in those things that you usually end up looking up.

So far I have downloaded the C#, ASP.NET and jQuery sheets. They’re handy and they’re free, what else do you need to know than that. Enjoy.

After seven years of being a software developer I have finally done it - I’ve joined a web agency! On November 3rd I will be joining Malenke | Barnhart here in Denver. I’m pretty excited about it. It looks like a real fun place to work, Xbox 360 on down time, dress however you want and drink beer on Fridays. All while producing incredible top quality work. Here is some of their work:

• Denver.org
• Ford
• Denver Zoo
• Quiznos
• Girl Scouts

So for those of you that have worked for an agency before, do you have any advice for me?

The above photo is my stack of geek books from last Christmas. Yes, I love books — I love the way they smell, thumbing through the pages and oh yes, the wisdom they bestow. I admit, often times I don’t make it through the entire book. Sometimes just a handful of chapters. But every now and then you come across some great books that are gems. So I thought I would share a few of my favorite books from this year.

Head First C#

Each morning before work I stop and enjoy a latte or cappuccino. This is my book of choice to read while sipping down my caffeine kick-start. That’s because it’s not like your typical code book which can be pretty dry. This book is very visual, full of pictures and diagrams that help to illustrate and drive home key points. Often times it finishes the chapter with a crossword puzzle helping you to retain the points of the chapter. In fact those crossword puzzles inspired this post. It’s a great read for beginners and advanced users alike.

Object-Oriented ActionScript 3.0

If you are just starting to learn Flash or Flex or ActionScript then this is the book for you. Actually, even if you are a seasoned pro this is still the book for you. Why? Because it teaches you the correct way to do things. It teaches you true object oriented programming in ActionScript. With topics like: Encapsulation, Classes, Inheritance, Polymorphism, Interfaces, and Design Patterns you will not only learn ActionScript, but also principles of OOP. If you wish to learn proper Flash/Flex development then this book is for you.

The ASP.NET Anthology

This book takes a problem solving approach to a handful of common everyday ASP.NET developer needs. Things like: form validation, membership and access control, working with email, rendering binary content, Ajax, handling errors and more. Sitepoint says this about the book, which I agree with: “Solve specific ASP.NET problems fast — without wading through mountains of reference material — and rest assured your code follows current best practices. For the serious ASP.NET coder, this book is a must-have.”

The Ultimate CSS Reference

Perhaps the last CSS book you’ll ever need. Written by our very own Paul O’Brien whom regulars to Search-This will know does an amazing job making sense of often tricky, finicky or strange CSS behaviors. Almost every web site created today is built using CSS, which is why a thorough knowledge of this technology is mandatory for every web designer. There are plenty of good resources to help you learn the basics, but if you’re ready to truly master the intricacies of CSS, this is the book you need.

ASP.NET 3.5 Unleashed

Make no mistake about it, this is a reference book at almost 2,000 pages. But it may be the best ASP.NET reference book on the market. It covers everything: LINQ to SQL, ASP.NET AJAX, ListView and DataPager data access controls and all the rest. What’s especially nice is that you can tell the author, Stephen Walther, has spent time in the trenches. He knows best practices, like using CSS for all his layout work and having well-formed cross-browser friendly code all the while teaching you ASP.NET 3.5. This is a must-have book for all ASP.NET developers.

Well there you have it, five of my favorite geek books of 2008. Do you have a book that you read this year that you thought was a gem?

Are we moving ever closer to that promised paperless utopia?

Smashing Magazine Jobs
This site has a small selection of web design/development jobs. Most are looking for front-end work like: XHTML, CSS, JavaScript, Flash and ActionScript. You can sort by fulltime or freelance positions. Most of the listings are from the companies and not recruiters.

Authentic Jobs
Authentic Jobs is another site that features a short selection (maybe 100 listings is all) of web jobs. Authentic Jobs is a targeted destination for standards-aware designers and developers and the companies seeking to hire them.

Krop
A pretty good selection of design and tech jobs, but the Ajax enabled search on this site really isn’t working for me.

Dice
Dice is a huge collection of tech jobs. It’s certainly a place to use when looking for a job. Do note that most of the jobs are posted by recruiters though.

Craigslist
I think Craigslist is actually one of the best places to look for jobs. It has a good selection and most of the post are from the IT directors and not technical recruiters.

Good luck and happy job hunting.

One of the values for the display property is inline-block and although it has been around for quite a while now browsers have been slow on the uptake which is a shame because it's just the sort of thing that can be very useful. In this article we will investigate ways to implement display:inline-block in a number of browsers.

If you are unfamiliar with inline-block then its use is defined as follows: "an inline-block makes the element generate a block box that’s laid out as if it were an inline box".

What this means is that a "block level box" can retain most of its block level capabilities but in an inline environment. This would allow you to align a number of boxes on the same line all with their own width and height much in the same way as floating the elements but having the benefit of allowing inline rules to be applied to them unlike floats.

For example, three or four inline-block elements could be aligned horizontally and centered by using the text-align:center property on the parent. This would automatically center the elements within the available width. We could also apply the vertical-align:property to align their top or bottom edges with each other.

Perhaps it's best to start with the finished example so you can see what we are talking about. The result is also shown in the screenshot below.

Figure 1

As you can see in the above we have achieved three (apparently) block elements all aligned nicely in the same row. The elements are perfectly centred and they all have their bottom borders aligned with each other. Imagine trying to do this with floats.

The truth is you could not do this automatically with floats at all as you could never align the bottom borders unless you were using fixed heights and then could calculate the margins for each. It is also very difficult to center floats also. With very little code we have achieved this effect so now we will get down to specific details.

How's This Done

For Firefox 3, Opera and Safari we simply use the display:inline-block property value and that's all there is to it. The vertical-alignment is taken care of by using the vertical-align property which applies to inline elements only which includes inline-block elements (not forgetting table cells of course).

The centering is handled in the same way that we would center text with text-align:center.

Using the above properties our basic code to center and align three elements is as follows.
CSS

HTML

Browser Support

At present the support for inline-block has just been added to Firefox 3 while Opera and Safari already support it.

So far so good but what about IE and Firefox2 I hear you shout!

For Firefox 2 (and earlier) we can use a Vendor Specific Extension and use the proprietary display:-moz-inline-box; (not -moz-inline-block as you may have expected although that property does exist).

-moz-inline-box will allow Firefox 2 (and some older versions) to have a similar functionality as if they were using display:inline-block. Although I often tell you to avoid proprietary code there are times when nothing else will do but it's a risk you take and a choice you must make for yourself. Remember that proprietary extensions don't follow the standard exactly and may differ to the real CSS property and of course they won't validate.

So, armed with our new code let's add it to our existing CSS and see what happens.

If you test the result in Firefox 2 you will get a display as shown in Figure 2 below.

Figure 2

Unfortunately although the red blocks are aligned as expected the text inside is flowing out of the containers. It seems that this extension has a few bugs so we will need to add an extra wrapper around our blocks and apply another width to hold everything in place.

The rules are changed from targeting the p element and applied to a surrounding div instead which allows us to set a width on the p element to contain the text within the block. In most cases you would have a wrapper like this anyway so it's no real problem.

The change in code is as follows:
CSS:

HTML:

With the changes in place our layout now clicks back into position and looks exactly as Figure 1 with all blocks aligned as expected.

Now with Firefox 2 looking pretty good we turn our attention to our favorite browser: Internet Explorer.

IE has partial support for inline-block but only supports it on elements that are naturally inline by default. What a waste as it's usually block elements you want to change!

It is actually the case that inline elements just need "haslayout" and they will automatically behave as inline-block elements. They don't in fact need display:inline-block at all and applying the proprietary zoom:1.0 will have the same effect as specifying inline-block. The "haslayout" trigger must be one that applies to inline elements as width and height won't do as they are only "haslayout" triggers for block elements.

Therefore to make an anchor display as inline-block you only need to specify this.

Or

So we have established that we can make inline elements obey inline-block rules but what do we do for block level elements?

It turns out that you can also make block level elements behave as if they are inline-block elements by setting the element first to display:inline and then apply "haslayout" to that element. The "haslayout" trigger has to be one of the properties that cause "haslayout" to be true on inline elements. We can't use the block level triggers because the element is now inline which is why height and width will not be "haslayout" triggers for our new inline element as mentioned above.

So what properties apply to inline elements that will trigger "haslayout"?

The MSDN site has a list of available properties and we will need to choose from this list.

We could use display:inline-block because that is a "haslayout" trigger for inline elements but if we apply it in the same rule then that will over-rule our previous display:inline setting and all we get is an element with "haslayout" but not inline block. We could use zoom:1.0 in the same rule and that would create an inline-block element.

e.g.

However as zoom is proprietary (non-valid) IE only code we can use another method which utilizes display:inline-block. The only caveat is that as mentioned before we must specify it in a separate rule so we don't cancel out the display:inline effect.

I should re-iterate that all we are doing here is creating an inline element and the setting "haslayout" to be true. The display:inline-block is only incidental in that it is applying "haslayout" and as shown above the zoom property could be used to similar effect.

Whew - did you get all that?

Armed with the knowledge above we can re-vamp our code to cater for IE7 and under. IE8 supports display:inline-block properly (as far as I can tell) so we will use conditional comments to pass the values to only IE7 and under.

The revised code is as follows.
CSS

IE Html:

Main Html:

That just about wraps it up and we now have blocks aligned in most browsers. Please refer to the full demo for the complete code as the CSS is all in the head (just view source).

I hope you've enjoyed this little foray into the wonderful world of IE and now you can all get back inline.

For example, let's say you have a div with an id of "contentTop" like below:

Because you have made the control a server-side control by adding the runat="server" attribute it will now be rendered with a different ID when it hits the browser (view the source code and you will see). It will get rendered as something like this:

This is because ASP.NET generates its own IDs to ensure that every element on the page has a unique ID. Developers that work with JavaScript and CSS will immediately see the problem. This causes difficulty when using JavaScript and CSS which rely on those IDs to reference elements, as they can't easily predict what the generated ID will be. When it comes to CSS specificity the ID selector is extremely useful. In addition, anyone that uses JavaScript knows that getElementById (or one of the JavaScript library ways) is the most popular way to target an element. So why the hell does ASP.NET do this to us? Honestly, I can't really tell why, other than the fact that they must not trust us enough to be able to uniquely ID our elements ourselves.

But I don't want to just complain here, I would like to provide some solutions too.

Solution

The solution will be found in the ClientID property of the server-side control. The ClientID property represents the ID that ASP.NET will use for the element on the client.

Using the ScriptManager we place the ClientID in a hidden form field. This can all be done in the code-behind file by using the following code:

Be sure to have included the ScriptManager to your page, like so:

Now we can use JavaScript to retrieve the value from our hidden form fields.

That's it, if you know of another way, please let us know.
Happy coding.

If you're like me you've been staying up way too late the last week watching the Olympics. Specifically Michael Phelps, or Aquaman as I like to call him, break just about every swimming record known to man. Phelps has so far acquired seven eight gold medals, that ties surpasses Mark Spitz who won seven gold medals in 1972.

It's very rare that you get the opportunity to watch the best person in the world do their craft and so I am in awe of him. So in Phelp's honor goes this post and I have included for your listening pleasure the Marvin Gaye version of The Star Spangled Banner. You likely have heard it recently in the Nike Basketball commercial.

I am going to start by showing the finished product as this will help you visualize what we are going to achieve along the way. Figure 1 below shows a smaller version of the task ahead.

Figure 1

We are going to make a similar display but without using tables as in my view the information presented is not tabular and does not have a logical correspondence between rows and columns. Even if you do present a good case of why this should be in a table, please don't comment on this as we are interested in the layout techniques rather than perfect semantics (for this example). The techniques presented here can be used in other layouts that are certainly not tabular and will prove useful in many situations.

Define Your Content

The first thing we need to do is decide what elements we are going to use to style this category list. That's your first clue - we should already be thinking about using a list to do this. However, I feel that information like this is more suited to a definition list (DL) as the product name is the data term (DT) and the description underneath is the data definition (DD). (Feel free to disagree but whatever method you choose the techniques used to construct our layout will likely be the same.)

I'm using a Definition List which will allow us to semantically describe the heading and the associated text that describes the heading.

Although definitions have default styling applied, such as margins, we can simply get rid of that using one of the many reset techniques available. I am using a global reset for purposes of the demo but I suggest you look into more thorough methods.

Lets' start by thinking about what we want to achieve.

The image needs to be at the left of the layout and the text needs to be lined up nicely alongside the image but we don't want the image to wrap underneath the image as that looks a little messy in a list like this.
e.g. Not like this:
Figure 2

As you can see the last line of text wraps under the image rather spoiling the effect so we will look at how to overcome this problem without complicating the issue too much.

The image can be floated to the left and we can apply a right margin to push the text away at the side. So for a start we will do just that and see what our display looks like.

HTML

CSS:

If you run the above small code sample you will see a display almost exactly as that shown in Figure 2 above. The image is floated nicely to the left and the text wraps to the right side of the image except that the last line wraps under the image.

We will address that issue in a moment but it's important to mention at this stage that floats are removed from the flow and if you want them to stay inside your container you must use some sort of clearing mechanism. Otherwise the float will float out of the container and poke into the container below should content be less than the height of the image.

In our example I have added overflow:hidden to the dl container which will ensure that all floats are contained within. Overflow other than visible will cause elements to contain their floated children in most modern browsers. IE6 needs "haslayout" to be true and then it will auto clear floats also. This can be achieved by setting a dimension which we already have in place so no extra hacks are required. Overflow isn't always the most suitable clearing mechanism to use but in simple layouts it works well but you should investigate other clearing techniques also.

Additionally, note that I have placed the image inside the dt element because the product image and it's title are really the same thing.

Stopping The Text From Wrapping

Usually authors would apply a left margin to the text content to make it steer clear of the image but this is not the best solution for three main reasons:

1) Firstly your images may be supplied dynamically and be of varying widths and therefore your left margin approach would fail unless you set a width wider than all the images.

2) The second problem would be that IE6 has a "3px jog" on static content next to a float and would make the display look slightly odd. Sometimes this is barely noticeable but it can still be annoying.

3) Lastly and more importantly, if you have floated content mixed in your content description section and you try to clear them you will end up clearing all floats and the whole description drops below the float. Figure 3 shows an example of this.

Figure 3

(Example shows what happens when a float (the red box) is cleared)

Luckily there is a simple method we can turn to that cures all these problems quite easily. (As an aside this method was also exploited earlier in one of John's Articles.) If we once again use overflow other than visible on this content we can make it form a rectangular box to the side of the image and also honoring the image's margins. It's almost as if we have floated another block to the side except that we haven't.

The overflow:auto (or overflow:hidden) causes the element to form a rectangular block that will not only stay at the side of the floated image but will also contain any floated children. As another bonus It will also contain the effect of any clearing of floats in that section. Float clearing from within that overflow:auto container will be restricted to that container only and not just clear all floats above in the HTML as per usual.

The overflow method doesn't work in IE6 but fortunately forcing "haslayout" on the element concerned has exactly the same effects and with an added bonus of partially curing the "3px jog" mentioned earlier. As we don't want a dimension in this container we can use the height:1% hack supplied via the star selector hack to target IE6 and under only.

Therefore all we need to add to the CSS already shown is this:

If you run that code you will get a display similar to Figure 1 above.

The only extra element in Figure 1 is that I have placed some text to the right of the product title. I did this by placing the text in a strong element and floated it to the right. However as floats need to be in front of the content that they will wrap (except for inline content on the same first line as the float but few browsers obey this anyway so its not worth arguing about) I have moved the strong element in front of the product description as follows.

There you have it. With relatively little code we have avoided a number of bugs and behaviors and produces a nice looking layout. I mentioned earlier that our fix only partially cured the 3px jog and the eagle eyed among you will note that although there is no jog on the content it does happen to be 3px further away than other browsers. If this is an issue for you then you can always offset this with a hack that applies 3px less right margin on the image. However I don't think many people will notice so I am not bothering to apply another hack.

The finished layout can be found here and I suggest that you copy the code from