August, 2008 Results

Links for the Weekend, 8-30-2008

Saturday, August 30th, 2008

Let’s All Get Inline (In a Block, In a Block)

Thursday, August 28th, 2008


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.


IDing the Problem of ASP.NET

Wednesday, August 20th, 2008

I love ASP.NET, but one thing I find extremely frustrating is dealing with the automatically generated ID properties that it places on page elements.

For example, let’s say you have a div with an id of “contentTop” like below:

  1. <div id="contentTop" runat="server" >...</div>

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:

  1. <div id="ctl00_contentTop" >...</div>

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.


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:

  1. ScriptManager.RegisterHiddenField(this, "contentTop", contentTop.ClientID);

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

  1. <asp:ScriptManager ID="ScriptManager1" runat="server">
  2.     </asp:ScriptManager>

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

  1. var id = form1.contentTop.value;
  2. var cTop = document.getElementById('id');

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

The Star Spangled Banner – Marvin Gaye

Saturday, August 16th, 2008

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.

My CSS is Cat -(Categories With CSS)

Wednesday, August 13th, 2008

This article details how to produce a product category list with associated images and text. This is the sort of thing you would see if you did a search on Amazon.

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.


Links for the Weekend, 8-9-2008

Saturday, August 9th, 2008

Thinking Outside The SEO Box

Wednesday, August 6th, 2008

I met with some people last month that run an e-commerce website. Their story is an all too familiar one. They’re not selling as much product as they had hoped to and want to see what can be done to change the situation.

In this article I’ll share with you what I shared with them. It may surprise you to hear some of my suggestions.

The beginning of our conversation was your typical SEO talk. It started with an explanation of how Google (and others) ranks web pages. The typical reader of this blog will be familiar with this, so I’ll skip it. But if you need a refresher, read the article Google’s PageRank Explained.

After explaining to them the significance of inbound links to their site it didn’t take long before they asked the question that always gets asked at this point, “How do we get people to link to our website?”

I deflated their spirits be telling them that it’s not easy. You see, e-commerce sites, like theirs, don’t typically attract people wanting to link to them. Nobody, naturally, wants to link to a website that sells jewelry or Hungarian food condiments and trying to get people to link to a site they don’t want to can be an Lose Weight Exercise in futility. I know, because I’ve done it many times.

But hope is not lost. There is a way…

The short answer is you have to give people a reason to want to link to you. But how does an e-commerce site do that?

That’s what we’ll look at in this article. No, it’s not your typical, “How to acquire links” article so read on.


mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Other Sites