CSS – 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.

Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks

.abelafonte — Thu, 01 Nov 2007 04:16:09 +0000

As promised, this article describes how to use transparent PNGs in your CSS design in a very clean way. This method simply uses the default cascade and inheritance instead of the CSS hack for transparency described in my previous article on the subject.

As in our previous example of old-school CSS for transparency, we start with our basic background image that includes alpha transparency.

#truck {
	width: 470px;
	height: 294px;
	background: url(images/mater.png) no-repeat left top;

}

And, as expected, it shows up with a crummy blue haze in IE 6. (Which we won’t show here…)

Last time, we isolated which version we wanted to deliver to Internet Explorer by using the parent > child selectors of CSS and a hack that only IE would recognize.

The Clean Solution
This go-round, we will take it up a notch. Start by defining an IE-only stylesheet. Personally, I always have one of these (and another for IE7) at the start of a project. It’s good practice because there will always be little hiccups in IE that you can address easily by serving it a separate CSS file.

So, create a CSS document called stylesIE6.css or something to that effect.

Now, let’s link to that stylesheet using IE’s conditional comments. So, in the head of your document AFTER your existing stylesheet, enter

*Please note: WordPress is adding a space before the exclamation point and ‘endif’. There should be no space there in your code.

This code reads: ‘If less than or equal to IE6, then use this stylesheet’. Remember, that all previously defined styles our primary stylesheet will apply to our document. (You can view all of the possible conditional statements at MSDN). In this stylesheet, we simply want to define the things that we want to change. My IE stylesheets usually contain only a few lines of code.

Next, in your stylesIE6.css stylesheet add the transparent graphic on our #truck element using Microsoft’s AlphaImageLoader filter that we used before.

#truck {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

At this point, there are two things that you should notice:
One – We did not have to specify our width and height in the IE-only stylesheet because the #truck element will inherit those settings from the main style sheet.
Two – The #truck element will also inherit the original PNG graphic from our original style sheet. Now, we see two trucks, one of which we don’t want.

Solve this by adding the background property to your IE stylesheet to override the display of the original graphic. Our IE stylesheet wins in specificity because we placed it BELOW our original stylesheet in the source code.

#truck {
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

Now, we should have the same transparent png graphic in IE as we do in all other browsers without relying on hacks. Using this method to isolate browser-specific CSS gives you the most control and keeps you from having to make changes in the future if a browser update renders your hack useless.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN
Find out more about IE Conditional Comments at MSDN

Transparent PNG in IE6 with CSS Hacks and AlphaImageLoader

.abelafonte — Sun, 16 Sep 2007 21:17:11 +0000

This entry describes a method for displaying a transparent PNG in IE6 using a technique that I actually don’t use anymore. I just wanted you all to be aware of your options when it comes to getting the desired results. You can find the preferred, hack-free method here.

This is an example of isolating browsers using hacks, or exploiting the deficiencies in some browsers. Understand that browser targeting is not limited to transparent PNG and can be used for anything that you want to do only in certain browsers.

We start by defining the code for our awesome transparent graphic. Nothing special here… business as usual. If you view this in IE6, it will have a translucent blue box around the image in all the transparent areas.

#logo {
	background: url(images/logo.png) no-repeat left top;
}

Then we would add the parent-child selector.
In this example, the immediate parent element to the ‘logo’ is the ‘header’ element. So, we use the ‘greater than’ symbol separated by spaces to say: for element ‘logo’ that is a direct child to ‘header’, do this. IE6 and below don’t understand parent-child selectors, and skip right over them. So, we have effectively hidden this entire CSS rule from those browsers.

#header > #logo { /* FOR ALL BUT IE */
	background: url(images/logo.png) no-repeat left top;
}

Next, we would follow that with an IE-specific hack.
As it turns out, IE5.5 and IE6 think that it’s possible have an element above the HTML element. Fortunately, all other browsers on the planet know better, so they skip the next rule because it says: For all elements (*) with this selector path starting above the HTML element, do this.

And this is where we’d add our IE-specific alpha transparency filter.

* HTML #logo {/* PNG Alpha IE Win ONLY */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='scale');
}

What we’ve done here is display a transparent PNG natively in all browsers except for IE6, and displayed the same graphic via a proprietary alpha filter only in IE6.

For most of you who have been doing CSS for a while, this is nothing new. I’m only doing this as a precursor to the cleaner way that I want to introduce you to shortly. So, stay tuned.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN

Simulate Frames with Pure CSS

.abelafonte — Wed, 12 Sep 2007 21:29:14 +0000

Here’s a CSS tip that may be new to you, depending on your time in the game. Originally presented at Barcamp Dallas

We’ve all used frames at some point in our deep, dark web design pasts. Then, when we got hip to how crummy frames can be, we graduated to iframes. That’s when we really knew that we had beaten the system.

Then, we realized that even the classy iframe had its flaws.

So, here is a standards-compliant CSS solution for that situation that you would normally solve with frames, minus the extra SEO-stifling orphaned pages.

Grab the HTML and CSS blocks below and paste them into an HTML file. These will be the basis of our demonstration.

HTML



Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.
Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.
Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.
Duissi. Lorperat. Ut loreet euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.
Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.
Duissi. Lorperat. Ut loreet lobore euis ex eugait ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.

CSS


#frame {
	background: #69C;
	border: solid 1px silver;
	width: 300px;
	padding: 5px;
}

When you preview your page after adding those code blocks, you will notice that we a box with long content inside of it. Now, let’s just assume that we want this content to fit in a space with a height of 250px. Add the following to your “#frame” CSS rule.

That rule should now look like this:

#frame {
	background: #69C;
	border: solid 1px silver;
	width: 300px;
	padding: 5px;
	height: 250px;
}

So now, we notice that our box is the proper height, but the content is spilling out of it. To fix this, we add overflow:auto; to our rule. So it now looks like this.

#frame {
	background: #69C;
	border: solid 1px silver;
	width: 300px;
	padding: 5px;
	height: 250px;
	overflow: auto;
}

Here is the finished example

Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.

Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.

Duissi. Lorperat. Ut loreet euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.

Duissi. Lorperat. Ut loreet lobore euis ex eugait ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.

So the next time you have a tight space that you want to fit long content into, you don’t have to resort to frames.