Use a YouTube video thumbnail image in your HTML

Today I was working on a project where I wanted to create links to about 20 different YouTube videos. I wanted to use thumbnails images for each video and didn’t really want to create those images myself … because I’m lazy.

I figured YouTube has already created all those thumbnail images for me so why should I create them again? There must be a way to just grab them from YouTube right? Well there is and it’s super easy.

Adding the following URL into your img tag will display the default thumbnail image for the video:

http://img.youtube.com/vi/Video_ID/default.jpg

Just replace “Video_ID” with the actual id of your video and you are all set. You have some flexibility with which thumbnail you display as well.

Here are some examples using Trale Lewous’ Butterfingers Commercial:

http://img.youtube.com/vi/Zp-PX13ZlX8/default.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/1.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/2.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/3.jpg

http://img.youtube.com/vi/Zp-PX13ZlX8/0.jpg

If you are using jQuery there is also a super simple way to pull these in on the jQuery HowTo Blog.

Double Rainbow Sherbet Cone

I made a spoof of the double rainbows video last night. Check it out:

OPPM Website Redesign

oppm

Web Address: www.oppmi.com

Company: OPPM International

Summary: Clark Campbell’s series, The One-Page Project Manager is a best selling set of books that details how to manage and report on projects of any size using a single spreadsheet. His method is used by large companies and education institutions worldwide. Clark decided it was time to take his concept online and hired myself and my brother, Davey Harding to redesign his existing site and also create a web app that had all the functionality needed to manage the OPPM process in a simple “wizard” format.

I used Adobe Photoshop to design the new layout and a combination of ColdFusion, Flash video, jQuery and HTML/CSS for the code side. The e-commerce piece was handled by Davey (built on AuthorizeNet) as was the web app portion of the site which will be launching later this summer.

EVO Conference Signage

evo

Web Address:www.evoconference.com

Companies: Today’s Mama and Mom It Forward

Summary: Evo is a new conference created by the founders of Today’s Mama and Mom It Forward. It’s a social media conference geared towards women and focusing specifically on bloggers and mompreneurs.  I got to design the bulk of their event signage including agendas, directional signs, sponsor banners, etc. This was an extremely fun project to work on because other than Ignite Salt Lake I haven’t had a chance to work on event signage since my Legato/EMC days.

It was awesome working with the Evo ladies and they pulled off a great conference with an incredible selection of speakers and session topics. My favorite was the ultra design geek-chic branding discussion by Debbie Millman. She dissected the concept of branding and tied our innate need to “make and mark” to the social media phenomenon of today.  Being one of about 15 or so men at a conference geared towards women was quite the experience as well! I highly recommend attending Evo next year if you are in the social media sphere or wanting to learn more about it.

A Startup’s Guide to Branding - Video and Slides

Big thanks to Clark over at Mustache Power for shooting video of the LaunchUp 7 talks and getting me the file of my presentation. I synced it up with my slides using Zentation which has a pretty slick interface for side-by-side video and Powerpoint. Enjoy:


Using a graphics tablet in Photoshop

jesse1Tonight I will be presenting at the Salt Lake City Adobe User Group on using a graphics tablet to create illustrations and paintings in Photoshop.  This is something I’ve just started to experiment with but I’m having a lot of fun with it and will be sharing some of the tips I’ve picked up.

There are a few files I have available for download that go along with my presentation:

Photoshop Brush Set (35MB) - This is a combination of the BittBox High-Res Watercolor Brush set and some modifications/additions I made.

Shortcuts for Photoshop Illustration - This is a PDF file with some of the keyboard shortcuts that I have found useful while using a graphics tablet.

Also - I’ll be mentioning these two About.com links on graphics tablets:

Before You Buy a Graphics Tablet

Top 10 Pressure-Sensitive Graphics Tablets

Chuck Keeler will also be presenting on using Photoshop and a graphics tablet to paint Google Sketchup models.

If you are interested in attending, there are details here:
http://groups.adobe.com/index.cfm?event=post.display&postid=25978

Making Your Company Memorable: A Startup’s Guide to Branding

launchupLast night I spoke about branding at LaunchUp #7. Jeremy Hanks and crew put on an awesome event as always. The three companies that spoke, FanFare, Bazari, and Inzolo, were very cool. I particularly loved the talk given by Brian Henderson of FanFare. I’m an avid music and live music fan and FanFare, which is basically taking a Groupon approach to concert promotion, sounded like a game changer. If they can pull off their concept I think they are poised to take an untapped market by storm. Dave Brascom of SEO.com also gave an interesting talk about how his successful search engine optimization company got started and the effect that purchasing the domain name “seo.com” had on their success.

I’m hoping to be able to post the video recording of my talk soon but for now you can download the slides here:

Making Your Company Memorable: A Startup’s Guide to Branding

Antivirus XP 2010 or How to battle the worst malware ever!

This is a little off-topic from my normal posts but since it basically ruined what was supposed to be a Saturday of freelance work I thought I’d share.

I never get fooled online. EVER. Whether it’s a Facebook scam, Instant Messaging virus or those phony popup virus threats, I’ve always prided myself in being smart enough to see through the lies… until today.

My son had been online checking out some awesome lego sites. Later, I sat down at the computer planning to do a few hours of freelance work. There were a bunch of Windows Antivirus messages on the screen saying a threat had been detected and did I want to remove it. Now I did hesitate for a moment and wonder if they were legit. But let me tell you, these alerts were well done. They even had the Microsoft privacy message at the bottom of one of the screens, AND used the Microsoft shield as their icon in the tray and on their screens.

Here’s an example of what one of the screens looks like:

avpro2010

For one reason or another, my guard was down and I clicked to remove the supposed virus. It was all over - that tiny bit of interaction was all the program needed to install and start causing havoc. Within a few minutes my computer was seemingly completely infected with over 20 viruses and was also getting attacked every couple of minutes by “hackers”.

The solution? Buy the full version of “Antivirus XP 2010″ of course (yes they even use “XP” in the name!).

At this point I knew something was up (duh) and after seeing that the program wasn’t in my Program Files directory or in my list of programs in the Control Panel, I started searching for ways to get rid of it. I hate doing this because you never know if the person writing the solution is trying to help you or exploit the situation you are in and do even more harmful things to your computer. I get especially nervous when they ask you to start making registry edits which many of the solutions online did.

The following is what worked for me. It might work for you too:

1- Download Malwarebytes
http://download.cnet.com/Malwarebytes-Anti-Malware/3000-8022_4-10804572.html
Since I found a cnet download link I figured it was a legit piece of software. Some people in the forums said Antivirus XP was preventing them from downloading Malwarebytes. If this is the case you may have to download it to another computer and throw it on a USB drive so you can get it on your infected computer. Personally, I was able to download it fine using Firefox.

2- Install Malwarebytes
This is where it got tricky for me. I double clicked to install and nothing happened. Tried again — nothing. You guessed it, that sneaky Antivirus XP 2010 was actually BLOCKING my install. There were lots of theories online about whether it was blocking all exe installs or just Malwarebytes. Changing the file name didn’t work for me but changing the file name AND changing the file extension from exe to bat worked and I was able to install the program.

3- Run the program in Quick Scan mode.
When I first installed Malwarebytes I assumed I’d need to run a full scan of all my drives. 2 hours later the scan finished and nothing had been found. I was pretty frustrated. Some more Googling and I found one site where the guy specifically mentioned running the Quick Scan rather than Full Scan mode. I did that and sure enough, it found all the bad files and I was able to remove them.

After a required reboot, my system is up and running and I haven’t seen any sign of the bastard piece of software.

So there you have it, over four hours and a ruined Saturday later, I’m ready to start on my freelance work. Goody.

Lugano Restaurant - Website Redesign

Lugano Restaurant

Web Address: www.LuganoRestaurant.com

Company: Lugano Restaurant

Summary: Lugano is a nationally-acclaimed Italian restaurant in Salt Lake City that wins award after award for their awesome food and cool atmosphere. Their website needed an updated look and feel to better match the restaurant.

I used Adobe Photoshop to create the new layout. Lugano wanted to incorporate some amazing tile that they have in their kitchen into the design, so I pulled that into the background of the secondary pages. The site was built on the Drupal CMS framework so most of my HTML/CSS work was spent building a custom Drupal template. I also used the SlideShowPro Flash plugin to create a rotating photo spot for the home page.

North Face, 1967 - Website Design

North Face, 1967

Web Address: www.NorthFace1967.com

Company: We Aspired Productions

Summary: North Face, 1967 is an amazing documentary in post-production about what has been called “the impossible rescue” which took place on the north face of the Grand Teton. You can read more about this amazing story here and here. The production team needed a simple site that captured the gritty feeling of the film, told the story and allowed them to gather funding donations via PayPal.

I used Adobe Photoshop and old photos of the rescuers and the Grand itself to create a design as chilling as the story itself. The site was coded in web standards HTML using CSS for layout. I also used the SlideShowPro Flash plugin to create a photo gallery of pictures past and present.

Don’t forget to check out the movie trailer!

Hello 2010

Last year, rather than make a bunch of specific resolutions that  I wasn’t going to keep I decided to make one larger global resolution that would affect lots of different aspects of my life. My resolution was simple:

Try new things

I had a great year full of lots of new things. Some of those included:

  • Lots of new food I may normally shy away from including chicken hearts, venison tenderloin and clams
  • Running my first marathon
  • Growing a full beard
  • Speaking at HOW Conference
  • Biking to work every day for a full 5 day week
  • Playing my first RPG
  • Going to a Jane Austen era ball (in costume)
  • And lots and lots of other amazing things!

I kept track of each new thing I did in my favorite cloud note keeper Evernote, which made it easy to update from wherever I happened to be at the moment of the new experience.

This year I plan to keep that same goal of trying new things and keeping track of them. I’ve also got another goal:

Create (for free)

All of my design clients just got excited. Sorry - I’m not talking about doing your work for free ;-) I’m talking about art, video, animation, music, etc. I’ve got tons of creative projects in my head that I have never started on because there is no income potential. My goal this year is to forget about the money and just create. It should be an interesting experiment and I’m excited to see how it goes.

I will of course be posting any creative endeavors I complete here for you, my undying fans.

As a concluding and somewhat related note, I’m also participating in Project 52 which is a cool challenge created by Anton Peck, based on creating fresh web content on your blog/site weekly. Thus you should see a lot more of my musings here. If you’ve got a blog, or have always wanted to start one, sign up!

Update - 3/3/2010: In case you didn’t notice, my aspirations of a blog post a week didn’t quite happen. LOL. It’s been a busy couple months. Project 52 is an awesome group though with lots of cool bloggers and awesome content. Maybe next year I’ll be one of them…

Cheers and happy new year!

Best Music of 2009

For the past 6 or 7 years I’ve been burning a CD with some of my favorite artists/songs that came out that year. Rather than shoot for a certain number, my rule is that all the songs must fit on a single CD. Now that CDs are pretty much obsolete, that rule is a little silly, but I still like the challenge it poses, so I’ve stuck with it.

An interesting side note here - After completing my list I noticed that 10 of the 21 songs were the 2nd song on their respective albums. I don’t know what to make of that but it’s interesting none-the-less.

So… here are the songs on my “Best of 2009″ CD. They are listed in the same order as on the CD which is more of a mix-tape style and not necessarily “best to worst”.

Also - check out my 2008 and 2007 lists.

Name Artist
How Your Heart is Wired Bell X1
Quiet Little Voices We Were Promised Jetpacks
Osaka Loop Line Discovery
Coast of Carolina Telekenisis!
My Lover The Sounds
Moth’s Wings Passion Pit
Shake Shake Shake White Denim
Daylight Matt & Kim
D.I.A.L.O. John Vanderslice
I Say Fever Ramona Falls
Geraldine Glasvegas
Early in the Morning Heartless Bastards
Eye on the Prize Eulogies
Won’t Want For Love The Decemberists
Always Like This Bombay Bicycle Club
Huff & Puff Dat Politics
Golden Sand Republic Tigers
Don’t Haunt This Place The Rural Alberta Advantage
1901 Phoenix
Two Weeks Grizzly Bear
Walking On a Dream Empire of the Sun

Christmas Video from the Harding Family

Here’s our Christmas video for this year. Have a great holiday!

Merry Christmas 2009 from jdawg on Vimeo.

In case you want to see some of the older videos: 2008, 2004 (an all time fav)

The Logo Design That Wasn’t

northface_logo-1aBeing a designer takes thick skin. You can’t grow so close to your work that you get offended or upset when a design or idea is turned down. I’ve had numerous experiences throughout my career where I thought I had come up with the perfect design, only to be told by the client that for one reason or another the design needed to be changed. I usually find that what I come up with in the end, once I really understand what the client is looking for, is much better than my initial concept.

I’m currently working on some branding and web design for a docmentary about an amazing rescue that took place on the north face of the Grand Teton. The film is titled “North Face 1967″, and I am so excited to be a part of the project.

When we initially started talking about the logo, the client mentioned a concept that I really liked. She thought it would be interesting to see if we could incorporate the mountain peak itself and the path taken by the rescuers, into the logo design. I immediately started sketching up ideas and a day or two later, I had the concept flushed out.  Everyone (including me) loved the design.

However, as the client started thinking about the tone of the film it was decided that something more simple would fit better. I had to agree. While I love the original logo I came up with, it looks more like a clothing brand or ski shop logo, and doesn’t really fit with a documentary film. Instead, we’re going to go with a simple typeface logo and let the pictures and trailer tell the story. I back that decision up 100% and am glad we made it. Even though I like the original logo I did, the client knows the story she is trying to tell and the logo needs to embody that.

Since this logo will never see the light of day, I thought I’d post it here as a reminder that situations like these can teach us to be better designers. Sometimes it’s frustrating to have to start over, but if we internalize everything that we learn, we’ll end up better than when we started and more prepared for the next adventure.

I’m excited to see what we come up with for the logo and website design and I’ll of course be posting that here as soon as it’s online

Online Code File Comparison with Google Documents

Recently I needed to compare two very large code files (1200+ lines) in order to make a few small revisions. At work we use the Tortoise SVN Subversion app for revision control and it makes side-by-side file comparison very easy. However, since I was at home, I had to find another way to do it. I Googled “File Comparison” and got a huge list of different free and non-free apps that I could try. I hate downloading unknown apps especially when I won’t be using them much, because they often come with spy-ware and other garbage. I ended up trying something different and it worked pretty well.

I did my file comparison using Google Docs. I was happy to find another cool way to use Google Docs. Plus this keeps it in the cloud in case I needed to access the file from somewhere else. You can do a simple file comparison using the Revision History tool. Here’s how:

1. Create a new document and paste your old code into it. Save your document:
step1

2. Now delete all the code and paste your new code into the same doc. Save your document again.

3. Go to File >> See Revision History

step2

4. Select the current and the previous versions and click the “Compare Checked” button.

step3

5. Where ever changes have been made, the code from your old file will show up as crossed through and the code from your new file will show up as highlighted.

step4

Now the obvious advantage you have in a real file comparison program like Tortoise is that you can make the changes right in the actual code file. With Google I had to find the changes I was looking for, copy the old content and paste it into the file in the correct place.  Not the most efficient, but it got the job done quickly and kept me from having to download who knows how many free programs to find one that worked right.

The Scariest Pumpkin Of All!

I decided at the last minute to enter Veer’s “Carved” pumpkin carving contest. They were giving extra points for using a typeface so I figured I’d use the font that haunts designers in their nightmares: Comic Sans.

This was my first attempt at typography in pumpkin carving and I’ve got to say, it is a lot harder than it looks. It came out pretty sloppy looking, but hey, it’s Comic Sans. Sloppy is what we’re going for right?

I’ll be speaking at the SLC Adobe User Group next week on Photoshop Wizardry

wizI’ll be speaking at the Salt Lake City Adobe User Group on Wednesday, September 16th. The meeting starts at 6:30 pm. Here is a map to the location.

My presentation is titled Photoshop Wizardry: Tips & tricks for efficient photo editing. I’ll be going over:

  • masks
  • batch editing
  • auto-blend
  • and some other cool Photoshop tricks

This is the same presentation I gave at Photocamp UT earlier this year. Hope to see you there!

Photoshop Tutorial - Change a daytime photo into a nighttime photo

Photoshop Tutorial - Change a daytime photo to a nighttime photo

I created this quick tutorial that shows you how to use Photoshop to change a daytime photo into a nighttime photo.

View the tutorial

Russo’s on the Bay - Website Redesign

Russo's on the Bay

Web Address: www.RussosontheBay.com

Company: Russo’s on the Bay

Summary: It was time for Russo’s to update their wedding reception/event center website and they wanted something that better captured the look and ambiance of their location. Telestory Pictures was contracted by Russo’s on the Bay to develop and build their website and media materials. TeleStory Pictures hired me as a freelance web designer for the project.

Using Adobe Photoshop I combined elements from interior photos taken of their building to create the design. The home page was created in Flash and it changes from a day photo to a nighttime photo if you visit in in the evening. The site is programmed in ColdFusion using an open source CMS (Content Management System) called Mura. This gives the Russo’s access to edit all of their content (no HTML required) and add new content as necessary. Telestory Pictures also created some awesome videos and virtual tours that you can see in the media section of the site.

Thar be Clay!

My kids got some of that old modeling clay they used to have in art class. I made a skull and then got carried away. Here is the finished product with some Photoshop lovin’ for extra spookiness.

skeleton

Madsen Cycles

Madsen Cycles Cargo Bikes
I first heard about Madsen Cycles through Facebook. Someone suggested I follow them and when I saw they were a local Utah company I decided I would check them out.

Next a popular design blog that I read called Swiss Miss wrote of her love for the Madsen bike. The fact that Swiss Miss wrote about them totally impressed me because she is the be all end all when it comes to cool design. Many of my cool product design tweets come from stuff I read on her blog.

Next I was at the Spudman Triathlon in Burley Idaho and saw a guy, who I think was Jared Madsen riding his kids around in a Madsen along the route and cheering people on. I was again impressed. First he somehow got that large bike from Salt Lake to Burley. Second of all it was cool to see him there supporting the athletes.

Sooooooooo, Madsen is currently holding a contest where to enter you need to post a link on your site or tweet about their bicycles. I figured I’d right a little review on them rather than just post a link because I really do think they are quite cool. Check them out! And while you’re at it, why not enter the contest as well.

www.madsencycles.com

The Fellowship is Born

For months now I’ve been hard at work on an illustrated version of The Lord of the Rings. It’s put my pen and ink skills to the test and has proven very challenging. The watercolor work alone has taken hours upon hours.  I’m also doing audio-book style voice overs for the narration.  Here is a sneak peak at one of the finished scenes.

The Fellowship is Born from jdawg on Vimeo.

Crestview Elementary PTA Website

Crestview Elementary PTA

Web Address: www.crestviewpta.com

Company: Crestview Elementary PTA

Summary: The Crestview Elementary PTA needed a website where parents could come to find out about upcoming events, volunteer opportunities and also register for classes offered by the PTA. I used Adobe Photoshop to design the site. The site is programmed in ColdFusion using an open source CMS (Content Management System) called Mura. This gives the PTA access to edit all of their content (no HTML required) and add new content as necessary. It also handles user registration so that the information on the site can be password protected.

The PTA was very pleased at how the site turned out and how easy both the front end and back end are to use.

“Ere His Floods of Anger Flow” Book Cover

ere I recently designed my first ever fiction book cover. It’s for a religious apocalyptic fictional thriller called “Ere His Floods of Anger Flow”. I didn’t realize there was such a big market for religious fictions but apparently it’s a very popular category of books. Here is an excerpt from the book’s sumary:

Without warning and with no time left to prepare, the world experienced the floods of anger of a God and Father who had been as tolerant and long-suffering as divine mercy would allow. Now divine justice was to exact its toll. The technological advances that the world had extolled as making “the good life” a reality suddenly collapsed. Mankind’s feeble creations were no match for the powers of an offended heaven, and the new millennium’s promised great leap forward collapsed in ruin.

I haven’t read it yet but it sounds pretty epic. The scene depicted on the cover has to do with a military helicopter rescuing some people during a torrential storm. I had a great time creating the cover image and am excited to see it in print.

Discovery Expeditions & Adventures Branding and Web Design

Discovery Expeditions & Adventures

Web Address: www.DiscoveryXA.com

Company: Discovery Expeditions & Adventures

Summary: Discovery Expeditions & Adventures is a travel company that specializes in adventure trips to Israel, Petra, Africa and Peru. They also do custom tours to just about anywhere you want to go. They needed a logo and web design that matched the adventurous feeling of their trips.

The client had scanned an old ink drawing of a camel that he wanted to incorporate into the logo. I used Adobe Illustrator to create an old-style travel sticker for the logo. I then used Adobe Photoshop to design the site. The site is programmed in ColdFusion using standards based html and css. I used Adobe Flash and SlideShowPro to create the photo gallery on the home page and the jQuery Lightbox plugin to create the individual photo galleries on each trip’s page.

I also started a social media campaign for the client including a tumblr blog and Twitter and Facebook accounts. I carried that brand across to these sites as well and gave the client a tutorial on how to best use them to increase business.

It was a very fun project to work on and I am very pleased with how it turned out.

Long Island Bride and Groom Redesign

Long Island Bride and Groom

Web Address: www.LongIslandBrideandGroom.com

Company: Long Island Bride and Groom

Summary: Telestory Pictures was contracted by Long Island Bride and Groom to develop and build their website and media materials. TeleStory Pictures hired me as a freelance web designer for the project.

This was a very challenging project that involved redesigning an existing wedding website with hundreds of pages, multiple admin portals and account pages and tons of content. The site was built in ASP and the content pulls from a SQL database. Our job was to take the existing code infrastructure and give it a new look and feel. This not only included the basic site template, but also coming up with more efficient/usable ways to display the content including text, videos, and client images.

The old site design (especially the home page) suffered from content overload and was very busy. One of our goals was to clean up and simplify the design without losing any of the crucial elements. What made this tricky was that we needed to design a site that looked new but operated on the existing backend admin tool and code that the client uses. The before and after picture above is an example of how we accomplished this.

HOW Conference Presentation Slides

wwicI’ve (finally) uploaded the PPT deck (in pps format) from my HOW Conference session on “Working with Indecisive Clients”. The slides are pretty simple without much text. I apologize that there aren’t supporting notes for the actual presentation. It was largely improvised based on mental notes from each slide.

These slides use the Powerpoint Push transition as mentioned in my previous blog post. Since each slide is a jpg the pps file size is rather large (~17MB).

Download the PPS file

Enjoy!

Working with Indecisive Clients

austintexasI’m currently in Austin, Texas at the HOW Design Conference. It’s been a great time so far and I’m totally looking forward to some more inspirational presentations tomorrow.

I presented on “Working with Indecisive Clients” today and passed out this handout/paper toy. The F’N Lemon thing has to do with a story I told about a friend trying to cut a lemon with the blunt end of a knife.

I got some good comments on my Powerpoint layout/flow. A lot of people wanted to know how I did it, so I thought I’d document it here. I used a PPT technique that I first saw in the book slide:ology called the Push Transition. You can download an example here. By overlapping design elements between the jpgs for your slides, and hooking them together with Push transitions you can create the illusion of a single larger image that is being pushed around on the screen.

I got the idea to do a whole presentation this way from the online presentation app called Prezi. Unfortunately Prezi is an online-only app with no offline mode. Until that changes, the Push transition will have to do for conference talks.

A word of warning; doing a whole presentation (70+ slides) using Push is very time-intensive and also limits your ability to switch slide order at the last minute (which I usually do a lot of). I probably ended up spending over 12 hours gathering artwork and creating the slides (not including writing the presentation itself). Since it’s HOW Conference, which I have wanted to speak at for years, I figured it was time well spent.

If you were at HOW and caught my presentation, I hope you enjoyed it. If you had any further questions, feel free to drop me a line on twitter.

New Song - Imagine an intense robot chase scene

So a few weeks ago our buddy Jason was in town. This meant it was time to get the old “band” together and jam on some tunes. I use the term band lightly… and jam… and tunes I guess too. Oh and also song. We have fun on instruments. That’s about right.

Luckily Luke Stoddard rocks on the guitar and is talented enough to pull everything together, produce it and make it sound good.

When we jam, we play a song for 10 minutes or so, record a rough version of it, stamp a name on it and call it gold. The name we gave this song was “Gettin’ It On”, but I like to picture some super special effects movie scene where the hero is being chased by evil robots on a cool future version of a bullet bike. Or something like that. I mean it’s not like I listen to it over and over imagining the movie scene in my head or something… seriously.

Check out the song featuring me on keyboards:

You need Flash to listen to this

Empty Div Tags Taking Up Space in Internet Explorer

Recently I ran into a pretty frustrating IE7 bug that had to do with empty div tags. In the web app that I am working on there is some content that is hidden when the module loads, and then is displayed on a button click. An empty div where the content will be displayed is in the code even when the content is hidden … something like this:

<div id=”theHiddenStuff”></div>

In Firefox the empty div does not take up any space in the layout. However, in Internet Explorer the empty div was actually taking up space and throwing the design off. I played a little with the css to try to see what was going on. The obvious answer would have been that the div style had a height set in the css. I got in to remove the height and was disappointed to find that there was no height set on that div id.

Next I did what any professional css designer would do and pulled up Google. I found a lot of people with the same problem, but none of the solutions listed worked for me. There seemed to be everything from padding, to margin to spaces inside the empty div that were causing this in IE. Finally after a little more testing I found the solution.

My solution:
In my situation the problem ended up being that the div id had a width set in the styles. I wasn’t aware that setting a width had an inherent height that came along with it, but that looks to be the case in Internet Explorer 7. Pretty strange if you ask me, but removing the width fixed my issues. After a little more styling to accommodate for the missing width style, everything looked perfect in IE and FF.

If you try this with no success, try removing some other styles from your empty div or check out some of these other solutions.