Semantics in forms are one of the things that needs to be talked about, in my opinion, since they are one of the most important parts of a web site. You create/edit user accounts, create/edit blog posts, submit a comment, gather information from your audience, and lots more through them. However, apart from fieldset, we don’t really have a semantic way of marking up a pair of form elements.

There are different ways in marking up one’s form: div, p, ul or ol and dl. Because using dl, or definition list, to mark up a form is still unusual even though it’s not exactly a new idea, I will be talking and boring you, unfortunate people, about it here.

Understanding the dl element

dl is one of the most overlooked element in HTML since, I assume, people mostly associate it with just definition lists, aka glossary. But it can be much, much more as was shown by Mike Robinson in his article about the dl element in HTML5 Doctor. The HTML5 draft describes definition list as:

The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements).

HTML5 Working Draft: The dl element

The key to why dl is the mark up that makes most sense (at least to me) is the name-value groups phrase. Form elements are all about pairing as you have the label which is the name and the corresponding value which is the input or textarea or select.

Using dl, your code is going to look something like this:

<form action="">
  <dl>
    <dt><label for="input-value">Label Name</label></dt>
    <dd><input type="text" name="input-value" id="input-value" size="32" /></dd>
  </dl>
</form>

Pros

Aside from your code being semantic, using definition lists for forms will enable you to have a correctly styled form element by default since both dt (definition term aka term) and dd (definition aka value) are block elements. dl also lets you mark checkboxes up with more sense like so:

<dt>Select one or more option:</dt>
<dd>
  <label>
    <input type="checkbox" name="value-1" id="value-1" />
  </label>
</dd>
<dd>
  <label>
    <input type="checkbox" name="value-2" id="value-2" />
  </label>
</dd>
<dd>
  <label>
    <input type="checkbox" name="value-3" id="value-3" />
  </label>
</dd>

I have to admit that I’m stumped checkboxes and radio boxes. There are times when it makes sense to put the option heading in a legend, but you can’t always put them in a separate fieldset! Using a heading element makes even less sense. Most of the time, I just use label even though it’s not really linked to anything. Well, p works, too.

Cons

Like everything else, using dl isn’t really foolproof:

• dt and dd are separate elements which makes it harder for you to clear them in case you’ve decided to float them and have multiple values. This scenario is easier for div, li and p because they act as a wrapper to the label-input pair. You can fix this by clearing your dt.
• You’ll encounter a version of the above mentioned problem when you have an empty value in a pair. You can either put a space (&nbsp ;) or min-height. I’m thinking that min-height is the better solution between the two, though.
• An IE 6 problem: when you add a block element within dl and its child elements, IE6 escapes the definition list so that the block element is outside it. There’s still a workaround like, instead of p, you can use span instead, which sort of defeats the purpose of what we’re trying to do. Ken, a co-worker of mine assured me that that problem doesn’t exist in IE 7, which is a sigh of relief.

Personally, I think the pros outweighs the various CSS issues you might encounter in the process. Nothing makes you feel better than being able to solve a CSS problem, which is probably why I miss IE 6 sometimes (isn’t that sad?). :(

How do you mark up your form? Do you think you’ll try and switch to dl one of these days?

One time, while working on our internal project, I thought I’d try a little -webkit-transition-duration because I wanted the color of the links to gradually change to something else on hover. But when I hovered on our main navigation that was using a sprite image, the background scrolled from one background position to the next every time we hover on it because of the delay! It was really amusing.

CSS3 Carousel

I experimented a little bit with transition and descendant selectors, but apparently, p ~ p doesn’t work with :hover or :active or :focus very well (browser notes below) and came up with this CSS3 carousel experiment.

To do this, you should have the following markup:

<div class="carousel">
  <a href="#" class="first-image">1</a>
  <a href="#" class="second-image">2</a>
  <a href="#" class="third-image">3</a>
  <a href="#" class="fourth-image">4</a>
  <img src="main-background.jpg" alt="" />
</div>

It’s really rather plain, it’s because we’ll be choosing the image using CSS’ child selectors to move the image and it won’t work if we enclose the links in a div or list.

And this CSS:

  img { -webkit-transition: all 5s; -o-transition: all 5s; }
  .carousel { width: 500px; height: 372px; overflow: hidden; }
  a.first-image:hover ~ img { margin-left: 0; }
  a.second-image:hover ~ img { margin-left: -500px; }
  a.third-image:hover ~ img { margin-left: -1000px; }
  a.fourth-image:hover + img { margin-left: -1500px; }

New child selectors: the ~ symbol is used to select all fellow child elements, in this case, an image. If you add another image, it will be selected by this, too. The + sign on the other hand is to select a descendant that directly follows it. It’s really exciting, go nuts! ¹

Browser (in)compatibilities:

• For some reason, webkit-based browsers doesn’t interpret this very well, the second and third link can’t be triggered unless you hover on the fourth link first.
• Firefox interprets the child selectors perfectly but not transition because it will only be implemented in Firefox 4.
• The experiment works perfectly in Opera 10.6 and it gives me a warm fuzzy feeling inside. :D

When I first looked at the code within Volusion’s LiveEditor, I thought “Well this is going to be simple and easy.” But I was so, so, so wrong. It was a nightmare so hard, I’m not used to making the design work for the CMS — I’m used to bending it with my jedi mind tricks (or well, try).

Volusion only has one theme for everything. Ever since I started learning more and more about Drupal, I’ve started to appreciate this one-theme-for-all-page strategy where you update all of the options in the admin panel instead of in the theme itself. It wasn’t easy at first because I was used to how WordPress works but I realized that this way is actually more flexible (and dare I say user-friendly for the clients once they’re used to it), so that’s not really what I dislike dislike about Volusion.

It’s that there really is that one HTML file, and your CSS. With Volusion, you can show the contents of the site by adding <div id="content_area"></div> within your theme, the Volusion script adds the code and content within that div. And boy, do they add codes (read: table, b, font!)! Unfortunately for you, the designer/front-end developer, you can’t edit the codes that’s within it. This means no conditional tags for your menu or sub menu, no includes, nothing. Just your HTML and CSS. :(

The code they add within #content_area doesn’t have a lot of classes or IDs either, having them would have made my life easier because I can select them through CSS. But no, they’re using tables within tables within tables within tabl— well, you get the drift. So in the end, don’t be surprised if your CSS will look something like this:

 table[cellspacing="2"] table table table font { styles }
  table[cellpadding="8"] table table td .classname table { styles }

You can customize how it looks per category but whenever you have to adjust something, let’s say, change a URL in one of the sections or add a new section, it means that you have to edit it in all of the category pages. It’s like editing static HTML files all over again. This makes me sad because I feel that Volusion was left by its CMS counterpart and got stuck in the 90s. What. Is. Up?

Since you can’t edit what goes on in your #content_area div, it also means that if you want a bigger product image, you’ll have to, you guessed it, update all of the product images so it will match the new design’s specified image proportion. When the client said she wanted a bigger image, I initially thought that I’d just select a bigger version of the product image either in the option or code unfortunately though, there’s no option for it. There is an article in their support section on how to change your product thumbnails.

The submit buttons are all in images, too. Call me rigid in my ways or just plain lazy, but I’d like to have the option of just creating one background image to apply on all text-based buttons. And if I ever decide that images make a better experience for the users then I’d like to have that option, too.

I wonder what’s going on with them, with the advent of hosted ecommerce solutions like shopify and bigcartel, just to name a few, you’d think they’d do everything they can to make theming and updating the sites easier and more flexible for their clients. I do know that you have to make your app backwards compatible for all of those who can’t be bothered to update their design since whenever; but isn’t it also the service provider’s responsibility to make sure that what they have is at par with what’s out there? I’m really curious with what’s cooking in the Volusion HQ, will they be updating their backend’s design (that doesn’t work that well with webkit-based browsers), etc?

I’ve recently overhauled Last Leaf and turned it into a lifestream. I have stopped blogging there since the start of the year and have always thought of turning it into just that but I haven’t because creating themes for another CMS seemed intimidating.

At first, I thought of writing my own lifestream, it should have been my way of learning more about RoR but until now, all I have in my folder is the basic install (which I have forgotten how I was able to produce) so I turned to the next best thing: Sweetcron. It’s been months since I have looked at Sweetcron, I remember that I found it so unfriendly to customize to one’s needs before. Turns out, all I really needed was to read a good documentation, a lot of focus and plenty of time to test things out. It’s a pleasant exercise, and it’s something I know I’ll do again.

And so, with the intro done and over with, I suggest that you try and do something you haven’t tried before once in a while, if you’re not yet ready to commit full-time to something really big (RoR for me) then do some little things (like theme customizations, I think I want to try Drupal next) and so, here are the notes I made myself remember while writing Last Leaf’s theme:

• Base your first theme on one of the default ones

  Most of the time, you already have almost everything you need in the default theme, the developers won’t include that otherwise, I think. Trying to edit the defaults also make the learning curve more enjoyable because you know you won’t just break something because it acts as your guide in the process.

  My first WordPress theme was something based on WordPress Classic, I have little to no knowledge in CSS that time and that’s the best thing I could come up with. It helped me get familiar with the CMS’ templating system (man, I sound so pretentious) as well as taught me what this CSS shenanigan is. With Sweetcron, I used the Boxy Theme. As soon as you were able to stop the nauseous feeling whenever you see a PHP snippet, you’d realize that it’s pretty straightforward.

  I had a great time styling the individual boxes, it got a little confusing after a while though, what with all those accounts, so I made a separate file for each one of them like what you can see on the image, it made _activity_feeds.php less cluttered and made isolating the problem easier.

• Experiment

  I wanted to get just the image within the post because I’m not planning on directing people into the single page of every items and all I really want to show sometimes are the interior decors I love. At first I used this: <?php echo $item->item_data[$item->get_feed_class()]['image']['m']?> which is something you need to call the images you uploaded in Flickr but won’t work anywhere else. Thankfully, somewhere in the _activity_feeds.php file is <?php echo $item->get_image()?> and that’s what I used for my Tumblr and Google Reader posts.

  However, I don’t post images there all the time so I need a way to retrieve the text if the image doesn’t exist and so, there goes the only thing I’m good at, if-else statement:

  <?php if ($item->get_image() == ''):?>
       <?php //display your text here ?>
  <?php else: ?>
       <?php //and this is for your photo ?>
  <?php endif; ?>
  

• Search and then ask

  I would’ve probably given up on Sweetcron the second time have I not found that Nettuts tutorial, all you really need to do is keep your cool if you can’t find a solution to your problem. And if you can’t find the solution through searching, go to the usergroup/website of the CMS.

Sweetcron is still new and AFAIK, there’s only one developer so it’s understandable if there’s no documentation on the site like: is there a way to retrieve the tags I added in my starred items in Google Reader? How do I truncate the title? (<?php echo word_limiter($item->get_title(), 20) ?> doesn’t work :() Is it possible that I could host the images in my own server instead of relying on other sites? However, the community behind it is very, very friendly and you’re sure to find answers you’re looking for there, unless you’re too shy to ask for it. :P

• There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it).

  Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

  And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

• There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

  All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

• List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:

  { overflow:hidden; list-item-position:inside; }

  The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

• Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

  Here’s what I usually do:

  HTML

  <div class="parent_element">
    <div class="autocomplete">
      <ul>
        <li>Value here</li>
      </ul>
    </div>
  </div>

  CSS

  .parent_element { position:relative; z-index:99; overflow:visible; }

  What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.

One update later and I’m testing the thing locally (yay!) and so far, I say that I like it.

Documentation

I think they’re planning to integrate the codex to a WP install, am I right? Either that or they’re too lazy to type in the correct link, I’d like to believe that it’s the former just because that would be nice. That way I don’t have to keep on trying to remember the URI of WordPress codex, so lame, believe me, I know. And don’t forget a search box!

Help integrated in a WP Install?

Now it’s cute and all but I see a potential problem to it and that is — tons of files to download/upload. It seems that the 5 minute install is no longer true, it will if you don’t include the time you need to download then upload the entire thing (I’m not a big fantastico fan, sorry). But then again, maybe they are going to create a way to connect the install to the codex database? Or whatever is more appropriate name for it.

Dashboard

Dashboard

The new dashboard layout sure is clean but somehow, I kinda miss the “blogs who linked here” and “recent comments” panels. Sure, they’re filled with splogs and comments dating 2 months back but I kinda like it that way. Or maybe not.

Content

Media Library

I love that you don’t have to go to the Write Post page just to upload a photo, ’cause you know, sometimes you just want to upload a photo because you’re too lazy to open your FTP program. I really like the new media library (which was, no offense, kinda worthless before).

Media Library Panel

I wonder if an upload video feature is so far-fetched. Or is it even unthinkable because the file size is so huge and why would you want to host your own videos anyway when there’s youtube, revver, vimeo and likes now?

I thought of creating this post when I was on my way home from the recently concluded WordCamp Philippines. There was a woman who was in Karla Redor‘s talk who asked on how she can host the video in her own blog and use WordPress to file it for her. She can use a plugin that will let her upload the videos in her blog or do it the “harder” way. Something that I’m very fond of doing.

Seriously, I’m the type of person who would only resort to using plugins if:

1. I’m lazy at the time to think of another way without using a plugin
2. My head is aching and I’m getting frustrated because it just won’t follow what I’m telling it.

The reason is because I am not a developer and it’s really hard to be dependent on a plugin specially if that plugin is what’s keeping your blog alive. Also, if the developer of the plugin suddenly stops supporting the plugin and no one else is willing to take it up from there. What’s worse is if it’s not compatible with the newer version of WordPress. Then I will be lost.

So anyway, on to the “how”.

1. Convert you video to a .swf file, you can use Hey!Watch, it has a fee though but considering how it will make your life easier, I think it’s worth it. Besides it will convert a video for $0.10 so I don’t think that’s too much.
2. Next in your code (you’d want to add this in your single.php page), call for the video custom field (which you’ll be adding later on). Note that this should be within the loop. Also, note that the snippet is taken from a WordPress support forum and changed to suit the topic.

   <?php $video = get_post_meta($post->ID, 'video', true); ?>
   <?php if (!empty($video)) {;?>
   <object type="application/x-shockwave-flash" data="<?php echo $video; ?>" width="400" height="300">
   <param name="movie" value="<?php echo $video; ?>" />
   </object>
   <?php }; ?>

   What does this mean? The first line sets the $video variable to the value of the video key (of the custom field). Next it checks if the video has a value attached to it (in that particular post). If it does, it inserts the value in the data and value properties of object and param. If the video doesn’t have any values then it won’t display anything.

   This way, it saves you the time to copy and paste the entire code for the video. Now if you want the lazier way, you will have to adhere to some restrictions. For example, you can set the value of data and value to:

   <?php bloginfo('url') ?>/videos/<?php echo $video; ?>

   This means that you will only be able to upload videos within the videos folder within your root. That way, you’ll only put the filename of the video in the custom field value.

3. Once you’ve uploaded your video to your server (within the specified folder of course), go to the admin panel of your blog and then create a post (or a page) in your custom fields area, do what’s illustrated in the image below:

   

   As you can see, I decided that I want to have another folder within my videos folder. My videos will be categorized according to shows, so the value of my video key is unang_hirit/episode_100.swf. Once published, the post’s HTML will appear like this:

   <object type="application/x-shockwave-flash" data="http://domain.com/videos/unang_hirit/episode_100.swf" width="400" height="300">
     <param name="movie" value="http://domain.com/videos/unang_hirit/episode_100.swf" />
   </object>

Featured Video

If for some reason, you want to create a section that is called the “Featured Video” section on your sidebar, you can call it by using the following lines of code:

<?php query_posts('category_name=Featured Videos&showposts=1'); ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php $video = get_post_meta($post->ID, 'video', true); ?>
    <?php if (!empty($video)) {;?>
    <object type="application/x-shockwave-flash" data="<?php echo $video; ?>" width="400" height="300">
    <param name="movie" value="<?php echo $video; ?>" />
    </object>
    <?php }; ?>
  <?php endwhile(); ?>

If you’d notice, we recycled the code from above. The only difference is the query_posts tag before the loop. What the query_posts tag does is that it takes a single, recently added post (showposts=1) from a category called “Featured Videos”. And it’s the same business as what was discussed above.

Further reading:

• WordPress Codex: Using Custom Fields
• A List Apart: Embedding Flash While Supporting Standards
• WordPress Codex: Template Tags: query_posts

We all know that the min-height property doesn’t work in IE 6. Instead, the height property acts as both the element’s height and min-height. Its role will ultimately rely on the value of your overflow property.

If the overflow property is set to hidden then the height of the element is its max-height. If set on visible, however, then it will be its min-height.

Overflow: Visible

The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for overflow-y (vertically) or overflow-x (horizontally) (your CSS document won’t validate for CSS 2.1 though, but it’s valid once tested against CSS 3).

So your CSS (for IE 6) will look something like this:

div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }

The Complexities that hasLayout Brings

There are some instances when you have to define the height and overflow properties of an element (usually applicable to lists) to meet the demands of the hasLayout curse in IE. In these instances, you will have to add a bogus height and overflow:hidden thinking that it will not bring harm to your design.

That is until you wanted to add a min-height to the parent div.

If your bogus height is set to 1%, you element will collapse. Setting the height to auto will render your layout worse than before because that means that your element “will not have a layout” (ie, your hasLayout is nonexistent in IE).

Setting the height to 100%, however, will then expand your element to the height of its parent div (or element).

You can solve this dilemma by changing your overflow value from hidden to visible and setting the height of your element (usually, list items) to 1% just to retain the bogus height.

There is no such thing as one tweak fix all

If there’s such a thing, the guy (or girl) who was able to find that tweak would’ve been a bajillionaire by now. That or he/she’s, unfortunately probably a Microsoft employee by now.

Patience is a virtue (and a very important skill)

There was a time before when I was able to “fix” a specific IE bug in one of my dreams. I can’t remember what that bug was though, but I’m sure that happened, because that also happened when I was trying to play with WordPress before.

Anyway, I think IE is a great therapy for people who need to manage their angers. I used to be very explosive when I’m angry or when I can’t find a solution to a problematic rendering error. Sure, you can say that I matured a little but I think that if IE’s following my every whim all the time, then I don’t think I would be used to seeing any design screwed up in the blasted beloved browser.

If it fixed your problem…

Chances are that it opened a LOT of seemingly unrelated problems waiting to be discovered. I fixed a height problem and the next thing I know, the other elements (who are important at that!) are not showing up anymore. So be wary, be very, very wary about that hacks and fixes.

With IE, anything is possible

I honestly have a feeling that the Murphy’s Law was created with IE in mind, no kidding! If you think that there’s no way that any element will collapse specially if you already specified its width and height, then expect IE to crush that belief of yours.

If you’re dealing with IE, it’s OK to be paranoid

And check, and check, and check. There was a time when an office mate and I was checking the same site in IE, just different machines and it’s rendering differently. Seriously.

If your element collapsed in IE, chances are that it doesn’t have a haslayout

And that usually means you need to add a height and width to your element and if that still did not work, add an overflow:hidden. Sometimes that still won’t work so you have to add a display:block. That usually does the trick. If you don’t want to add a specific height however, you can add 1% or 100% as its value, anything as long as it’s not auto or a pixel or em. Be careful though, if you add a height to its parent div, it’ll take the height of its parent.

I could never stress this enough — haslayout is everything in IE

If your element is inline, then it’s fine, but if it’s a block-level element we’re talking about, grab the IE dev toolbar and hunt for that ever-elusive haslayout property.

Sidenote: Want to run 2 IE in the same machine? Download IE 6 and then download a copy of IE 7 standalone, yes, it’s necessary that it’s in that order and not the other way around because last time I had IE 7 as my default browser and got the IE 6 standalone, IE dev toolbar no longer worked which is one of the things that enabled me to keep my sanity back then.

Before using an IE hack, check out if you can solve the problem without it.

Yes, even if it drives you insane. It’s daunting, it’s scary, but it’s to be done. I hate to look at an IE6 specific stylesheet that contains more or less 100 lines of code. If it’s a problem with margins, try to see if the changes you need to do will make such a big impact to the other browsers, if it’s hardly noticeable then apply the fix in your main stylesheet. Now if we’re talking about 20-25 pixels (or more) difference then by all means, do it in a separate stylesheet.

IE6 doesn’t want <tr> to have borders

It’s annoying when I realized that. I thought the problem was that the table doesn’t have haslayout (how can a table not have a haslayout when it’s a block-level element by default, yes?!) that’s why the borders won’t show up. Turns out that IE doesn’t render a border when it’s in the <tr> tag, you have to add the border in the <td> tag and don’t forget to add border-collapse:collapse for your table so that the border will look continuous.

Test again and again and again

I told this to you before, remember? You can never be too sure with IE so you must be paranoid. You must be an OC and you must never forget to expect the worst case scenarios.

So there! What IE taught me so far, anyone else want to throw in some ideas too?

One unrelated musing, do you know that I just finally realized that this sign < stands for less than and > stands for greater than. It’s stupid, I know but it’s true! And guess what finally taught me this very “complicated” mathematical symbol.

On a similar note, accessibility advocates encourages people to use unique name for every link that we use on a page (kinda like what I was saying before only have a different reason), meaning countless “Read more of this entry” is not really the best practice because you’re using the same text over and over and these texts are leading the user to different pages.

I was looking for a way to add that in <?php the_content(); ?> tag in wordpress before but I couldn’t do it. What I did then was append the the_title(); within the_content(); so it looked like this –

<?php the_content('Read more of ' . the_title() . ' & raquo;' ?>

The problem though is that it does echo the “Read more of” but the title is no where in sight! I was so ready to find a way to make it show by hacking away through function.php, thankfully I remembered to check the_content page in the codex first.

What I should’ve done in the first place is to add parameters to the the_title() tag so it will show like this –

<?php the_content('Read more of ' . the_title('', '', false)) ?>

This follows the same parameter as the the_title(); template tag.

Parameters

before
(string) Text to place before the title. Defaults to ”.

after
(string) Text to place after the title. Defaults to ”.

display
(Boolean) Display the title (TRUE) or return it for use in PHP (FALSE). Defaults to TRUE.

So you may use it like this:

<?php the_content('Read more of ' . the_title('&ldquo ;', '&rdquo ; &raquo ;', false)) ?>

So it will echo as Read more of “Title of the Post” ».