Brian Webster - Blog

Floyd asked me to post an example showing some formatting on a <div> element. I built a test web page using the code from “Which to Use - div or span?” and some text borrowed from a recent ISU Extension News Release. Without any formatting, the page looked like this.

By adding a couple of styles, it was easily changed this to look like this.

Remember that the <div> element had an id=”message” and the <span> tag had class=”date”. These hooks are used by the styles.

#message {
width:185px;
float:right;
border:solid black 2px;
margin-left:10px;
padding: 0px 10px;
background:red;
}

#message .date {
font-weight:bold;
color:blue;
}

This is just a very simple example that touches on what can be done by styling <div> and <span> elements. I recently worked on a web site using this technique, but can’t show it here because the site is password protected.

Using styles with <div> tags is one of the major factors that allow us to layout pages without the use of <table> tags. It takes a more <div> tags and styles than I wanted to show in this post, but can be fairly easy to accomplish. Let me know if you want to see more about how we do tableless layouts.

BTW - I’m a firm believer that <table> tags should only be used for tabular data, not for laying out web pages.

Today I read an article titled “Primary & Secondary Actions in Web Forms“. They tested 6 forms where they changed the location and/or appearance of the primary and secondary action buttons, ie “submit” and “cancel”.

It surprised me that the users finished the form quickest when the two buttons had the same appearance. I would have thought that by having the submit button stand out more, it would have been faster because it would pull the user to the correct button. However, when tracking the eye movement, users had more fixations when the buttons had different appearances.

Although it was slightly slower, users said they appreciated the visual effect of having the submit button stand out more than the cancel button. It made them more confident that they were clicking on the right button.

The article also made the point that many forms do not need secondary actions. Don’t include them unless they serve a real purpose.

This article is an interesting read, and will be a part of a book by Luke Wroblewski titled “Web Form Design Best Practices“. After reading this article, I am looking forward to reading the book once it come out in early 2008.

When I’m writing code for web pages, I normally have to stop to think when to use a <div> tag, and when to use a <span> tag. The big difference is that <div> is a block-level element while <span> is an inline element.

Block-level elements usually contain other elements, including text, inline elements, and other block-level elements. You can think of them as boxes. They are normally displayed with space before and after this box, unless you modify this behavior with CSS.

Inline elements usually contain text or other inline elements, and are displayed where they occur. They are usually used to give your document more semantic meaning.

Here is a simple example:

<div id="message">
  <p>The current date is <span class="date">August 28, 2007</span>.
  Labor Day is just around the corner.</p>
</div>

Notice how the <div> tag surrounds a chunk of content that contains a <p> tag, which is another block-level element. The <span> tag simply surrounds text within the content.

With these tags in place, we have plenty of hooks for CSS to use to format this content. By having the date in the <span> tag, we can do special formatting on the date if we choose.

Last week, I was talking with Lynette about a problem she was having with a web page. During the conversation, she said she usually uses Firefox, however there are a few pages in which she needs to use IE. I told her about a Firefox Add-on I use called “IE View Lite“.

When you have IE View Lite installed, it adds an option in the right-click menu for “View This Page in IE”. This makes it very easy to switch to IE when you run across a page that doesn’t work in Firefox. Simply right click on the page, and select this new option in the dropdown menu. If this is a page you need to use a lot, you can configure IE View Lite to always use IE  for that page.

While useful for normal users of the web, I consider this tool a must have for web developers/designers. It allows you to use Firefox for your development, then easily switch to IE to find out what IE breaks.

My parents live on a farm in Northeast Iowa. Because of where they live, their choices for Internet service providers is very limited. They use a dial up service provider.

I’ve been to their place the last three weekends. When accessing the Internet, I they connect at a whopping 26.4 kbs. Boy, was that slow.

This got me thinking of something I used to say a few years ago, and I think it’s as relevant today as it was then, although I’ve changed the wording a little.

“Web designers, developers, and content providers should always test their work using a dialup connection.”

It’s not possible to provide all content at a reasonable speed over dialup, and that’s OK. However, I’ve seen many cases where the download time could be approved simply by resizing a photo. Testing over a dialup connection would help solve this issue.

I’ve looked for, but haven’t yet found an Add-on that would cause Firefox (or IE) behave like they are on dialup connections. Any suggestions of how to do this?

In yesterday’s post, “asp:label or asp:literal” I encouraged the use of <asp:literal> instead of <asp:label> because it outputs cleaner HTML. So when is it appropriate to use <asp:Label>?

When you use the “AssociatedControlID” attribute in <asp:Label>, it will output a <label> tag in HTML, rather than the <span> tag it normally outputs. This is useful when you are associating text to an input field of a form as shown in “Forms with CSS (1 of 3) - HTML Markup“. Consider the following two pieces of ASP.NET code:

<asp:Label AssociatedControlID="txtTest" runat="server">Test:</asp:Label>
<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>

and

<label for="<%= txtTest.ClientID %>">Test:</label>
<asp:TextBox ID="txtTest" runat="server"></asp:TextBox>

Both output the exact same HTML code as shown here:

<label for="ctl00_MainContent_txtTest">Test:</label>
<input name="ctl00$MainContent$txtTest" type="text" id="ctl00_MainContent_txtTest" />

While both pieces of sample code above output the same HTML, I haven’t decided which way I prefer. I’m thinking the one using the <asp:Label> tag might have more semantic meaning, which should make it easier to maintain in the long run.

One of the issues I hear raised with ASP.NET is that it doesn’t produce valid XHTML code. In some cases, it is true that it’s hard, if not impossible, to do so. In other cases, there are simple things we can do that greatly improve the quality of HTML code from our applications. One of the easiest things is to follow the advice of Phil Haack in “ASP.NET Tip - Use the Label Control Correctly” when he says “Never use the ASP.NET label control when a Literal would do.“

Consider the following lines of ASP.NET Code:

<p><asp:Label ID="lblTest" runat="server">This is a label</asp:Label></p>
<p><asp:Literal ID="litTest" runat="server">This is a literal</asp:Literal></p>

This produces the HTML code:

<p><span id="ctl00_ContentPlaceHolder1_lblTest">This is a label</span></p>
<p>This is a literal</p>

The <asp:Label> tag produced an extra <span> tag while the <asp:Literal> tag did not. This is the only real difference when the tags are used in this way. You can easily interact with either of these tags in the code behind file to assign additional, or completely different, text to the tags, so in that respect, they are completely interchangeable.

Whenever I modify an existing page that uses <asp:Label> tags, I evaluate whether to change them to <asp:Literal>. In most cases, it only takes a few minutes to make this change. When doing new pages, I always use choose <asp:Literal> over <asp:Label> whenever it will work. In doing so, the application outputs cleaner HTML.

Recently, Anne Adrian wrote a blog entry “Importance and Influence of Conversations“. She writes about a dinner with Kevin Gamble, and others, where they talked about blogging. This conversation, either directly or indirectly, had an effect on starting or reviving at least six blogs, including this one.

We can add another blog to that list. Becky Nibe has started a blog at www.extension.iastate.edu/mt/bnibe in part due to conversations that she had with people at ACE/NETC. Categories in Becky’s blog include Blue Ribbon, Filemaker, Web Thoughts, and Potluck.

For the next two weeks, Becky will be at the Iowa State Fair. We may see very little activity from her during this time, or we may see a lot. Depends on how the fair goes this year, could be interesting

I think this blog is a good addition to blogs written by Extension staff!

Wednesday evening I attended the Iowa .NET Users Group meeting. During the announcements, David Body talked about a new user group for for Ruby and Rails.

The first meeting will be 6:00pm - 7:30pm, Thursday, September 20, 2007, at DMACC West, located at 5959 Grand Avenue in West Des Moines.

The topic for the first meeting will likely be getting started with Ruby, including where to download it and how to install. They will also talk about when to hold future meetings. They were hoping to continue with third Thursday of every month, however Des Moines has an agile programming group that meets then.

Although I have never used Ruby, I will probably attend this meeting. I’ve heard a lot about Ruby on Rails, so would like to learn more.

The web site for the Iowa Ruby Brigade is www.iowaruby.org.

The first two posts in this series showed a way to markup an HTML form, and apply styles to it. This works well for any field where the label comes before the field.

Typically for checkboxes, we put the checkbox field first, with the label after it. The HTML code is similar to the other form fields. The differences are that the <label> is now after the <input> tag, and we’ve wrapped this pair in a <div> section with a class attribute.

<div class="alignMe">
  <input id="employee" type="checkbox" name="employee" />
  <label for="employee">ISU Employee</label>
</div>

Now we add a couple styles that hook into this new class:

fieldset .alignMe {
display:block;
margin-left:6.9em;
}

fieldset .alignMe input {
width:20px;
}

With these added, we end up with a form that looks like:

The extra <div> tags and the corresponding styles allow you to shift the checkbox so it’s in line with the other form fields. You can use this technique on other form elements such as radio buttons as well.

Related Articles:
Forms with CSS (1 of 3) - HTML Markup
Forms with CSS (2 of 3) - Styles