buttons
Jun 02, 2009
Basic Resizeable Button
You know how it goes. The client wants a totally slick designer webpage, and as ever that comes with the obligatory microscopic font and graphical everything. Sadly such designs fly right in the face of Accessibility requirements, so how do you marry the two?
The basic answer to this is Resizeability. All browsers from the humble IE6 onwards allow the visitor to resize the font, and recent browsers also (attempt to) resize the graphics as well. IE7 is rubbish at this and Firefox 3 is totally superb, as per usual.
However, HTML has never really been very good at coordinating the positioning of resizeable text and (potentially) unresizeble graphics. One place that this crops up over and over again are form buttons. The design has rounded ends and a nice gradient from top to bottom, so how do you make this button resize itself to fit the text?
Answer: The following is a simple technique that works well. The trick is to avoid being overly specific about the height of the button, i.e. let the graphics fade away to transparency at the bottom, and align everything by their top edges. The above button gets cut into 3 pieces:
of which the middle bit will be a repeating background, thereby stretching to any length. Next the HTML:
<span class="roundblackleft" ></span><a class="roundblack" tal:attributes="href string:${here/portal_url}/get-to-know-us" >Get to know us</a><span class="roundblackright" ></span>
Here we have used two empty span elements to hold the left and right ends, and the middle element is just the anchor itself (note that this means that you cannot click on the very ends of the button, but hey).
Now finally the CSS:
a.roundblack,a.roundblack:link,
a.roundblack:visited {
background: 0 0 repeat-x url(roundblack-bg-10.png);
vertical-align: top;
color: white;
text-decoration: none;
}
a.roundblack:hover {
color: green;
}
.roundblackleft {
display: inline-block;
background: 0 0 no-repeat url(roundblack-left-10.png);
width: 10px;
height: 22px;
}
.roundblackright {
display: inline-block;
background: 0 0 no-repeat url(roundblack-right-10.png);
width: 10px;
height: 22px;
}
The important things to note here are:
- display: inline-block. This allows us to specify a width and height for the span tags, but ensures they still appear inline. Not all ancient browsers support inline-block, but IE6 does.
- vertical-align: top. This is the crucial directive which makes everything line up. Because the anchor is being displayed inline, its height is unpredictable and uncontrollable. Therefore we align it by the top edge, and allow it to become any height it likes.
- If you still have problems with vertical alignment, try applying line-height: normal to the anchor tag. A competing directive can be inherited from CSS elsewhere on the site (especially Plone sites).
This technique only works if the graphics don't have a defined bottom. If they do you can re-do everything aligning with the middle, but this only works with bigger buttons.
