web design – Belafonte Code

Controlling Safari & Chrome’s Resizable Textarea with Simple CSS

.abelafonte — Tue, 29 Dec 2009 04:25:25 +0000

This article shows you how to get a “handle” on Webkit’s resizable textarea by managing its resize area without disabling the feature, as some have proposed.

By now, most web surfers are aware that as of Safari 3, the Webkit engine (which also powers Google Chrome) introduced a new feature: the user-resizable textarea. This feature was very welcome to those who are familiar with accessibility and web usability. Allowing a user to resize the textarea instead of simply relying on the scrollbars is just all-around good UI design.

However, it presents a new layout problem that we’ve never really had to deal with before. Since the user can resize the text box, they could end up seeing a broken version of your original form. While this doesn’t hurt anything at all, since the user is the one who initiates the resizing (and not some CSS or Javascript), their experience isn’t harmed.

But, like most designers, I’m sure you’d like to maintain some level of control over the page layout. So we’ll use some very simple CSS to control its behavior.

Let’s Do This

We’ll start by designing the layout of our form.

    
        
            Name
            
        
            Email
            
        
            Question or Comment

Then we’ll add the CSS. We won’t get into specifics about the design. We can simply use these pre-defined styles.

#form {
	margin: 0;
	padding: 0;
}
#form label {
	padding: 3px 10px 0 0;
	margin: 0 0 3px 0;
	display: block;
}
#form li {
	margin: 0 0 5px 0;
	padding: 0;
	list-style: none;
}
#form input {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
}
#form textarea {
	border: 1px solid #737272;
	background: #EEE;
}

The above code leaves us with a set of form fields that looks roughly like this. You’ll notice that in Safari or Chrome, there is a gripper handle on the bottom right corner.

This resize handle allows the user to make the box taller or wider if they feel they need just a little more room to continue typing…even if it means disregarding the boundaries of our beautiful layout!

The Fix

Since we want the textarea to match the width of the other input values, we’ll add a width. This also keeps the textarea from being resized to a width that is smaller than that which is defined for our layout.

#form textarea {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
}

Our biggest concern is if the user makes the textarea too big, though. So we’ll add a max-width property.

#form textarea {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
	max-width: 175px; /* RESTRICT SAFARI RESIZE */
}

Now, our textarea is only resizable vertically. This is nearly complete for our example, but we don’t want the user to be able to resize infinitely. It’s fun to play around with, but it looks pretty silly. To stop that from happening, we define a max-height that we think will give our users the flexibility that they’ll need if they want more space to type in.

#form textarea {
	border: 1px solid #737272;
	background: #EEE;
	width: 175px;
	max-width: 175px; /* RESTRICT SAFARI RESIZE */
	max-height: 250px; /* RESTRICT SAFARI RESIZE */
}

Now, with all of the proper CSS in place, we avoid disabling features that users may find helpful, while maintaining the layout that we intended when designing the site.

Note: Defining rows and columns in your textarea attributes also specifies a minimum width and height for the element. While necessary for maximum accessibility, these attributes alone do not allow you to control the display as precisely as CSS does.

Note: If you design allows room for it, you can also define a max-width that is larger than your textarea‘s standard width to allow flexibility in horizontal sizing.

3 Ways to Get Rid of Spaces in List Item Navigation in IE6

.abelafonte — Fri, 18 Jan 2008 03:41:45 +0000

If you’ve ever tried to create an all-css navigation for your website, then you’ve seen it: dreaded spaces when viewed in Internet Explorer 6 on Windows. This article will outline 3 different ways that you can get rid of these spaces in vertical list item navigation. And in the usual Belafonte style, these solutions are hack-free. (Who❤you?!)

Let’s start with a test navigation. We’ll jump right to the part where we’ve completed the navigation’s XHTML and CSS. Copy the following code into your own document if you want to follow along.

CSS

body {
	font: normal .9em Helvetica, Verdana, Arial, sans-serif;
	background: #FFF;
	color: #FFF;
}
#sideNav {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
	border: solid 1px #000;
}
#sideNav li {
	margin: 0;
	margin-bottom: 1px;
	background: #CCC;
}
#sideNav li a {
	text-decoration: none;
	color: #FFF;
	padding: 5px 3px;
	background: #000;
	display: block;
}

HTML


	Home
	About
	Portfolio
	Contact

This code is designed in the way that most nav lists would look. Also, most designers would want their links to change on rollover. Since IE6 does not recognize :hover pseudo classes when applied to any element that’s not the a tag, we have cannot simply apply the hover to the li tag. Therefore, in order to achieve the rollover, we went ahead and applied display:block to the link so that the rollover color will fill the entire button area.

This is where the problem comes in. If we apply a background color (yellow) to the li element, we can see that the gap that appears below the link element has something to do with either the outside of the a or the inside of the li.

Above: Test menu in IE6 after display:block applied to links. Notice the yellow from list items area showing between block-level links.

Space Removal Method 1: Define Border-Bottom

I came up with this solution a few years back and found this to be the simplest fix for the problem: add a border to the bottom of the li element. If your navigation has divisions between the links, then this is a perfect fit. You see how we have a margin-bottom:1px; applied to the list item? We can simply write in border-bottom:solid 1px #FFF; and eliminate the margin-bottom property. So, we still get the one-pixel white separation, and our gaps disappear in IE6. Success!

Space Removal Method 2: Define Link Width

One of my theories about where the gap comes from is that I imagined there to be an unseen hard return at the end of the link. In my vision, this hard return gets dropped down below the link when display block pushes the link all the way edge to edge. With that in mind, I decided to see what would happen if I reduced the width by one pixel or even made it match the width of the containing element.

So, I added width: 200px; to the a to exactly match the width we defined for our nav as a whole. (You could also use width: 100%; but sometimes that doesn’t work.) If my theory of why this happens is close, then this would keep the line return from dropping down below the link. BAM! It worked! The caveat here is that if you have any left/right padding applied to the link element, compliant browsers will add that to the total width. So, if you go with this method, you’ll have to adjust for that accordingly. (My preferred method is to send different widths to each browser using conditional comments for IE.)

Notice how, since we have 3 pixels of padding applied to both sides, defining the links’ width as ‘200px’ results in a 206-pixel width in compliant browsers.

Space Removal Method 3: IE Whitespace Fix Using Floats

After a long time of using the methods described above, I came across some prett useful information: this phenomenon has a name. It has been dubbed the “IE Whitespace Bug”. If I had known that, I could have just looked it up online and moved along. (It’s OK. I ain’t mad.) Anyway, when I did a search for solutions on this bug, I found tons of hacky “solutions”. Some involved commenting out the space after the li, others had a couple of Tantek-styled backslashes. {shudders}

I found this one at Jon Hicks‘ website, which involves floating and clearing the list item surrounding the link. In an IE6-specific conditional stylesheet, I make sure to include the following in my rule for the navigation li:

#sideNav li {
	float: left; 	/* IE WHTESPACE BUG */
	clear: left;	/* IE WHTESPACE BUG */
	width: 200px; 	/* IE WHTESPACE BUG */
}

Note: it’s always good practice to add notes to remind you why you added something. This way, if you choose to go a different route to solve this bug, you know which declarations to remove.

A few things to understand about this method: The width must be defined on the list item once it’s floated. If it’s not, it will collapse down onto the text that it contains. Also, the containing element must be floated as well, since only floated elements can wrap to contain other floated items. Since this is probably a sidebar navigation, it will likely be floated already, so this shouldn’t be a problem.

I know that there are lots of solutions presented to fix gaps in IE6. These are the ones that I choose since they don’t require much to remember and don’t use hacks.

You Snooze, You Lose – Reasons & Ways to Avoid Design Apathy

.abelafonte — Wed, 12 Dec 2007 05:32:35 +0000

This is my reasoning on why procrastinating on idea development is bad, and my take on how to get motivated & avoid design apathy.

As a designer, I know what it’s like to have an awesome design hit me at 2:00 a.m. and think "I’ll do that in the morning", only to have it disappear in the land between sleep and awake. I also know what it’s like to have an amazing idea that you plan to "get around to later", only to see it show up on television, or in someone else’s portfolio. C’mon, You know you thought of it long before that guy! But, really, who’s gonna believe you?

What happens a lot of times also, is that you may not necessarily be the first to do something, but at the time when you thought to do it there were only a few examples of that technique. Sadly, when you finally get around to it, the style, technique or typeface that you wanted to experiment with has become a huge trend online and most likely lost its appeal. By that point, you simply write it off and move on to something else.

The problem with ideas—especially the good ones—is that they’re like treasure during the Gold Rush. If you know there’s gold to be found in the hills and you don’t go out and get it, then someone else is sure to find it. And once one person finds that gold, everyone else heads that direction and stays there until there’s nothing else of value. Unique ideas are no different. Your idea could be the beginning of a point of change in design.

Not that it was going to be revolutionary or anything, but my latest experience with orphaned ideas is the concept of using watercolor as a primary element in the design of this site. A while back, in an effort to go offline for inspiration in online design, I trotted on down to the nearest Hobby Lobby and grabbed two tubes of watercolor paints in two different shades of blue. Unfortunately, I sat on this one for a very long time and that idea that I neglected for so long was implemented by others who put turned it into something real once they decided it was something they wanted to do. Examples are Antonio Orozco’s new site, launched at the beginning of 2007, Happy Cog and Web Designer Wall, all of whom use watercolors as design elements. Needless to say, I had to take my design in a different direction. But, one thing I had to realize was that missing the boat on this one was all my fault. Foiled, yet again!

So, the question arises: How does a designer avoid being only a back-room innovator… an idea alienator… a teacher-but-not-doer… all bark and no bite? Here are a few pointers that I think might help.

Solidify Your Initial Thoughts

If you don’t have a sketchbook, then you’ll probably want to get one. It’s always good to convert abstract concepts into something more tangible. Jot down a brief, written explanation of what you’re thinking or try to rough it out. Even if your idea or the execution of it isn’t exactly clear in your head, scribble down what you have. It might be a bit cloudy, but a very rough sketch is better than a half-memory.
Discuss Your Idea With Like-Minded People

Don’t be afraid to start talking about your new idea. Once you start telling people about what you’re brainstorming, all sorts of good things can happen.

If you’re one who’s afraid someone will take your new idea and use it, talk about it anyway. The fear of having it swiped from you could be the kick in the butt that you need to get moving! (Although, I would hope that your design peers are cooler than that.)

Another good thing that could come out of peer discussion is that you get feedback on your concept. This feedback, along with peer suggestions can help you refine your idea and avert certain tough situations down the road.

A conversation like this also gives you the opportunity to hear yourself talk about it. This has a subconscious impact. It makes a concept feel more real, thus making you more likely to follow through.
Discuss Your Idea with Non-Designers

This could be synonymous with “people who applaud you no matter what”. Take Mom, for instance. I don’t recall ever telling my Mom about something I plan to do, only to have her respond with: “Well, how will that approach impact the overall usability?” And, while siblings are usually not afraid to say things like: “Aaron, that’s the dumbest thing I’ve ever heard…” the chances of getting negative feedback from them and other non-designers are slim.

They’re not going to be critiquing the concept; they’re just hearing you out. And what they say usually serves as the positive feedback that you need in order to get over any inhibitions that you may have. Call it moral support.
Google It

It’s always good to jump online and see what’s going on around you when you’re about to do something new. If you’re inventing something that has yet to be used, you want to make sure it truly is a unique idea before touting it as such.

Also, you can get an awful lot of design inspiration from other designers’ work. Even when you’re striving to be unique in some aspect of design, there is nothing wrong with allowing another designer or artist’s work influence you.

In my opinion, we are all influenced by each other’s work in some way or another. Sometimes these influences are subconscious, other times intentional. But either way, it’s usually constructive and rarely detrimental.
Get Started

You can’t finish something that you never start. If you do everything previously mentioned a million times over, but never do anything about it, you run the risk of becoming a serial planner whose ideas motivate others, but has no work to show for himself. While you may not realize it, your peer conversations have a sort of symbiotic effect: you benefit and so do your peers.

So, chances are, that as a result of what they know you’re working on, they’ve gone home and started working on ideas that started churning in their heads during the brainstorming session. While it’s awesome that you were able to motive other people, you don’t want to be the only one who’s consistently trying to “get around to” creating your truly original idea.

The point of all this is: when you have a great idea, don’t sit on it. It does you no good to have the creative juices flowing if you don’t create anything that serves as a representation of that creativity. So, whatever you do, stay motivated, stay fresh and keep producing.

web design – Belafonte Code

Controlling Safari & Chrome’s Resizable Textarea with Simple CSS

Let’s Do This

The Fix

3 Ways to Get Rid of Spaces in List Item Navigation in IE6

CSS

HTML

Space Removal Method 1: Define Border-Bottom

Space Removal Method 2: Define Link Width

Space Removal Method 3: IE Whitespace Fix Using Floats

You Snooze, You Lose – Reasons & Ways to Avoid Design Apathy

Solidify Your Initial Thoughts

Discuss Your Idea With Like-Minded People

Discuss Your Idea with Non-Designers

Google It

Get Started