Haunted, Inc. - Now on DVD!

Posted on Friday, September 02nd (173 days ago)

Friends of ours, Emerald Productions just released their South Jersey-based film, Haunted, Inc. on DVD. This is a great opportunity to see the film they’ve only shown once.

See places (and faces) you’ll recognize as a South Jersey local and support some very talented filmmakers who are local as well.

Only $15.00 which includes shipping and handling! Buy it here!

Ocean View Realty website launched

Posted on Thursday, September 01st (174 days ago)

We’re pleased to announce that today the Ocean View Realty website went live. 

We worked closely with Ocean View Realty (even though we were 5 states away the entire time!) to make the visual design just the way they wanted. We also built them a sweet Real Estate content management system that lets them manage sale listings and also integrates our own MLS searching as well as giving them control over all of their pages.

View the live website at http://oceanviewrealty.us

Styling fieldsets and legends with CSS

Posted on Thursday, July 21st (216 days ago)

Back in 2002 I first learned about <fieldset> and <legend> tags while first discovering web standards and how to employ them. During the last 10 years while using the <legend> tag I’ve tried many different ways of using it while still keeping the <form> from being ugly.

Today I have a new trick that will give you further control over the <legend> tag.

Here’s a demo of the <legend> - before and after with styling. View Demo

Some people would just swap out the <legend>tag and instead use a heading tag, like an good old <h3>. Not me. I want the legend tag in there as it serves an important role - explaining what the deal with the fields in the <fieldset> are all about.

We should all be aware of the reasons <legend> elements turn out ugly. Explaining the issues isn’t within the scope of this post.

Let’s examine this simple form setup:

<form>
  <fieldset>
    <legend><span>Fill in the field</span></legend>
    <div>
      <label>The field</label>
      <input type="text">
    </div>
  </fieldset>
</form>

See how I added the <span> around the text in the <legend> tag? That’s the key to being able to manipulate the legend text better.

First thing you do is give your fieldset some CSS:

fieldset {
  position: relative;
  }

By making the position of our <fieldset> relative, we can safely position other elements inside the <fieldset> with absolute values. In this case we’re gonna position the span inside the legend element.

Could we just position the <legend>? No. Try it and see how differently each browser mangles your positioning. Why is this element so wacky? I don’t know. It was that very attempt that lead me to use the <span> element in the first place.

At any rate, once the fieldset CSS is in place it’s time to position the <span>:

legend span {
  position: absolute;
  top: 0;
  left: 0;
  }

A remaining issue is the legend itself, which will still interrupt the border of the <fieldset> element. So we need to get it out of the way.

legend {
  float: left;
  }

A quick float property gets the <legend> off the border. A simple way to take over the infamous <legend> element and force it to do your bidding. My example  places it inside the fieldset. You could just as easily place it outside the fieldset, to the left of the fieldset - anything you want!

Firefox users may have noticed that what we’re doing here looks like crap if you’re following along. That’s because Firefox has a legend positioning “bug” that requires a little CSS hack to get it in line with the others.

@-moz-document url-prefix() { 
  .a legend span {
    top: -30px !important;
    left: 0 !important;
    }
  }

Have fun making your own legends…

New Phone and Contact Info

Posted on Wednesday, January 26th (392 days ago)

We’ve made some contact changes here at Sites by Joe:

1. Phone Numbers. I had both NJ and MA numbers which I’ve now condensed into just a Toll Free number for the studio: (855) WEB-DESN (855-932-3376)

Yeah, it’s a pretty cool number. Try saying out out loud with a little jingly ring to it.

2. Live Chat. We’ll try to be available whenever possible for live chat during business hours. The chat box is right on our contact page.  Edit: No chat box - that was a waste of time and I was never monitoring it.

The point of all of this is that my cell phone was ringing off the hook and I was spending too much time handling long, drawn-out conversations rather than building sites so we had to address the communications realm to make things more efficient for us.

I admit, we won’t always be answering the phone - especially if I’m designing or coding but if you leave a message we’ll get back to you promptly.