Matt Heerema

Interesting Web Citings for March 26th

Sites and articles that I found very interesting today…

CSS Sprites: Useful Technique, or Potential Nuisance? – Smashing Magazine
This article explores whether the use of CSS sprites for images on your site is actually beneficial.

Interesting Web Citings for March 24th

Sites and articles that I found very interesting today…

HTML5 & CSS3 Checklist
Handy little compatibility chart.

iPad User Experience Guidelines | UX Magazine
My favorite: "Rethink Your Lists" – Consider a more real-world vision of your application. For example, on iPhone, Contacts is a streamlined list, but on iPad, Contacts is an address book with a beautifully tangible look and feel.

Use a Tablet to Create Stunning Comic Book Fan Art Illustrations | Psdtuts+
Why I give up ever trying to illustrate :) This is a sample tutorial?? This would be my magnum opus…

Snake Oil? The scientific evidence for health supplements | Information Is Beautiful
Well visualized data is special. This one is particularly interesting

Take Up and E-Read
Neat discussion on physical books vs. ebooks, especially with regard to sacred text, like The Bible

Photoshop Content-Aware Fill Sneak Peek
o.O … watch this.

Meet The HTC Evo, The World’s First 4G Android Smartphone
I smell an iPhone killer. Unless Apple (and ATT) step up their game, this is going to pose a threat. 4G wireless, plus the ability to use it as a MiFi wireless hotspot. Lots of speed and storage… beauteous.

Brain Crack – ZeFrank
(Careful, F-bombs abound, but it's worth a watch.) “Each day I live in mortal fear that I’ve used up the last idea that will ever come to me.”

Drop shadow with CSS for all web browsers
A tidy collection of all the proprietary box-shadow methods for all modern browsers (AND IE 5.5+). Nice post.

Interesting Web Citings for March 10th

Sites and articles that I found very interesting today…

MailStyle: A HTML Email Plugin for Ruby on Rails
Takes a properly written HTML email and puts styles inline and ensures images are absolute paths in order to ensure maximum email client compatibility.

Getting Started With Web Design

A few people have asked me recently where to start with learning Web design, or re-learning standards based Web design. I figure this is a question I’ll have to answer on several occasions, so I thought I’d create a post about it. There are whole sites out there dedicated to Web design, but the purpose of this post is to point the direction to the starting line. So, here we go.

update 8.31.2007: I’m bringing this article up to date with my current set up and a few other links. Read the rest of this entry »

Getting Fieldset Backgrounds and Legends to Behave in IE

I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking for. Jeff Croft has a close answer, but he is trying to solve a different problem. I built off of his exploration for this solution.

The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color like so:

HTML

<

fieldset>

<input ... />
<input ... />

CSS

fieldset{
background: #ccc;
}

Proper rendering (in every browser but IE is close to this: (this specific screenshot is from Firefox)

IE does something a little different: it causes the background color to be applied to the legend as well, mysteriously causing the background color to “spill” out of the fieldset.

The solution is to dissociate the legend tag from the normal flow of the document. That is, absolutely position it. Here’s how: (Since IE is the only browser that needs help with this, we are going to use the Holly Hack, so it only applies to IE)

1. Give the fieldset a position: relative; to make sure we are positioning the legend tag relative to the fieldset.

    * html fieldset{
    position: relative;
    }

1. Give the legend a position: absolute; to break it out of the normal flow of the fieldset. This will position the top left corner of the legend with the top left corner of the fieldset, so we need to bump it up half a character and to the right half a character. Like so:

    * html legend{
    position:absolute;
    top: -.5em;
    left: .5em;
    }

1. Now we’re almost there. By way of a little cleanup, we are going to apply some top padding to the fieldset and a top margin to the fieldset in order to make space for the label tag which is just floating on top of everything.

    * html fieldset{
    position: relative;
    margin-top:1em;
    padding-top:.75em;
    }

1. Voila! You have a form with a fieldset and a legend that looks nearly identical in all browsers.

See an example here.