Webmonkey is Back.

Webmonkey is back. And it's in wiki-form. Webmonkey was the gold standard site for web site makers back in the late 90s and early 00s. A few years laster, Webmonkey was bought, and as the bubble burst, it's content became dusty and decrepit. It had a short rebirth, then died again. But now Wired's got Webmonkey back, and there seems to be a great commitment keep it new, and try to bring it back as a forerunner of web tech news and how-tos. I'm very exited. Welcome back, my old friend.

0 comment(s).

Permalink

Fancy HRs with CSS.

Lest you think that this blog is only about regular human activities, I present you with a CSS method for using graphics as your hr. My apologies to the regular humans.

Suppose you've got a lovely little graphic that you'd like to use for an HR in place of the boring old default straight line in most browsers. How do you implement your new graphic in a consistent and semantic method?

It's relatively simple to style a fancy HR in most browsers, including IE7:

<style type="text/css"> hr.fancy { background: url(images/hr.gif) center center no-repeat; height: 20px; border: none; margin: 2em 7em; } </style>

Here are the results:

---

Let us also speak of the 800 pound gorilla in the room. Internet Explorer 6, and presumably lower versions, will not display this correctly without assistance. You will need to add the following dandy patch by Borgar.

<!--[if lte IE 6]> hr.fancy { display: list-item; list-style: url(images/hr.gif) inside; filter: alpha(opacity=0); width: 0; } </style> <![endif]-->

0 comment(s).

Permalink

Clearfix (with an IE7 solution).

If you begin working with CSS for your web page layouts instead of tables (and you really should), you will encounter problems with floated elements. The most mind blowing issue is when you have an element floated to the left or right, but that floating element escapes OUT of the element that contains it. This behavior is, in fact correct, since a floated element is removed from the normal flow of the document, and hence, any elements containing it. However it really can play hell with your web pages - so here's my preferred solution.

This paragraph, with a white border contains a very tall image that is floated to the right of the paragraph, while text flows around on the left side. However, you can see here that the image very rudely busts out of the paragraph element.

There are a variety of ways to correct this, but the most robust method I've found is using Clearfix by PositionIsEverything. First, add a clearfix class to your main stylesheet with the following style declarations.

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

Then assign the clearfix class to each element from which floated items are escaping. Here's the code for the corrected paragraph:

<p class="clearfix">

This is the same image and paragraph as above, except that I've added the clearfix class to the paragraph. Now, the paragraph expands to contain any floated elements.

I find the clearfix class to be a very elegant solution. It fixes the element with the issue (not neighboring elements), and it's very robust and reuseable. All you need to do is add a clearfix class to each element that needs to expand to contain a floated element.

There's just two teensy little problems with the solution thus far - Internet Explorer 6 and Internet Explorer 7. They don't support the :after selector, so a bit more code, inside conditional comments, is required.

<!--[if lte IE 6]> <style type="text/css"> .clearfix { height: 1%; } <![endif]--> <!--[if IE 7]> <style type="text/css"> .clearfix { display:inline-block; } <![endif]-->

That is how to corral escaping floated elements using clearfix, including an IE7 solution.

Photograph originally from APOD.

0 comment(s).

Permalink

A CSS Styled Form.

Why can't clients just tell me when they go live?!? Are the fifty billion little bullet points that ask them to do so not enough? Gah! Idiots.

Now that I've got that out of my system, I feel it's time I shared some more code with you. I present, the CSS-styled form!

First Name:
Family or Last Name:
Famous for: What is your claim to fame?

This example is taken from Web Design in a Nutshell, 3rd Edition.

Here's the CSS that gets it done.

<style type="text/css"> body { font-family: Arial, Verdana, Helvetica, sans-serif; } form { border: solid #FFFFFF 1px; width: 28em; margin: 5px; padding: 5px; } label { width: 6em; float: left; text-align: right; margin: .5em 1em; clear: both; } input, textarea { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: small; margin: .5em 0; width: 17em; } input[type="submit"] { float: none; clear: both; width: auto; margin-bottom: 1em; margin-left: 8em; } br { clear: both; } </style>

Notes:

• The user-interactive fields (input and textarea) do not inherit font properties from the body. This is why I've all the font specifications in the input & textarea section of the style-sheet.
• The magic here is that while the label elements are floated left and have their width fixed at 6em; the text inside them is aligned right. This keeps all the text lined up on the right side. The input and textbox elements are then pushed away from the
• That fancy stuff on the selector for the submit button is the attribute selector. It selects any input elements with an attribute of type set to submit. It's very handy for separating the buttons from checkboxes and radio buttons.
• At one time I desired a method to override the Google Toolbar's auto-fill occaisonal highlighting of form fields. Something along the lines of Disabling IE's Image Resizing would be lovely. However Chris Heilmann made the excellent point that your user chose to see the yellow highlighting by installing the Google Toolbar. But part of accessible and flexible design is allowing a user to interact with your site on their terms.

0 comment(s).

Permalink

Equal Height Columns.

Back in the old days of web design, when a properly wrangled table was all the rage, it was easy to create multiple columns of the same height. Doing so with CSS has proven tricky - mostly due to the auto-expanding boxes. Many of the existing solutions to this problem use JavaScript or extra divs and background images, or don't even work in IE6. I find those to be rigid and sub optimal solutions.

I propose a new solution to the problem of creating columns of equal height in CSS. This solution is simple, JavaScript free, degradable and highly flexible. Messers Goomba and Starman will demonstrate:

Both of those boxes are a simpler variation of the fixed width Goomba box, and they have two background images to create a fancy-schmancy box. The key to the equal height columns is this line of CSS:

.box { min-height: 12em; }

which is applied to the .box that contains both the Goomba and Starman Quotes. I've specified a minimum height for both boxes, no matter how large their content is. Furthermore, I've done it using ems as the units - ems are a unit of size relative to the text size that's being displayed. So, as the text size of the browser increases, the height of both boxes also increases. For your boxes, just select a number of ems that's slightly taller than your tallest box.

There are a few oddities to this solution, but for the projects I've developed they've not been noticeable.

• IE6 doesn't support min-height; instead the min-height value is treated as plain height. So you'll need to use conditional comments to specify the height as some other reasonable value. (I've used 15ems in this example.)
• As the text size increases or lots of content is added to a box, the box heights may not match anymore. Just try to choose something reasonable for the initial min-height, and stick with ems for the best flexibility. If a height specification were used, the larger content would flow out of the boxes or create a scroll bar - which I find less desirable than mismatched boxes.

0 comment(s).

Permalink