I came across an interesting CSS problem with the visibility property today. It seems that when you set an element to visibility: hidden you run into a couple unpleasant bugs in Firefox.

1. Where is my cursor?

Let’s say we have an HTML form and we are going to open up a dialog <div> with JavaScript to display instructions to the user. This dialog has an ‘Ok’ button which, when clicked, will set the dialog <div> to have a visibility of hidden so that the user can return there attention to filling out the form.

The problem: This dialog <div> although hidden, is still in between the user and the form and as a result it is covering up the users cursor. The result is a form with input boxes that you click in but never know where you are typing because you cursor is mysteriously missing.

2. The Mac Power PC problem.

Our CMS was recently inflicted with this bug. In a way is shows its face in Firefox for any platform, but it is particularly detrimental to your site when the end-user is on a Power PC Mac (Mac built with an Intel chip does not have this same problem). Again, the scenario calls for some div on top of content that has had its visibility set to hidden.

The problem: As you scroll down the page the box tends to make the content stick for a second before righting itself. Although it may be annoying, this is not really a problem as you can see the outline of the hidden div for just an instant and then it is corrected. However, if you are browsing the web from a Power PC Mac (I am not sure why you would want to be, but, hypothetically, let’s say you are) then when scrolling the content sticks and it does NOT correct itself. The result it this large patched of frozen content from higher up on the page covering the content that you should be looking at.

The solution is simple. DO NOT USE VISIBILITY: HIDDEN TO REMOVE YOUR DIV. If you read up on your CSS you learn that that setting an element’s visibility to hidden leaves that element right where it is but makes it invisible. The important fact is that the element has not moved, it is still on top of the content you want seen. There should be no problem here at all, if it is completely invisible then who cares if it still there? Well such is a bug, should not cause problems, yet it does.

Instead, use the CSS display property. To hide the element set display to none. This will actually remove the element from your document and not display it at all. For more information on the display property, click here: http://www.w3.org/TR/CSS21/visuren.html#display-prop.

Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

A web/graphic designer on the Dynamit team will:

• Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
• Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
• Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
• Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
• Have a Strong Portfolio: We’d like to see much more web work than print.
• Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

Benefits Include

• Competitive salary (compensation will be based on skills and experience)
• Fully paid medical/dental insurance for employees
• Paid parking
• Unlimited vacation time (within reason)
• Office bar + climbing wall — not recommended together

Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

About Dynamit
Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.