Pure CSS Popups 2

Now that we've seen pure CSS popups causing text to appear and disappear, it follows that we could cause other elements to do the same... like images, maybe? Maybe. Hands-on: What to Do Any browser that does a good job of supporting positioning will get some of the stuff I did here correct, so continuing onward is probably worth it. The basic drill is this: mouse over the links on the left side of the page. Watch the space below the links. Make sure to mouse over all the links, back and...

Styling hr with CSS

Introduction Even though it's sometimes recommended to replace the element with cascading stylesheets only using horizontal borders of other elements, I prefer as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet.  On the other hand, simple, unstyled does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. I used to hide...

CSS Design: Going to Print

by Eric MeyerYou’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup. That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you. Print style sheets...

Styling Your forms with CSS and Labels

I had a comment asking about styling forms using CSS with the label tag in my last blog entry, so I thought I would write another post to show an example. Here's how you would use the label tag and some CSS to create a stylin' form with very little markup: <style>label { position: absolute; text-align:right; width:130px; }input, textarea { margin-left: 140px; }label.check, label.radio { position:relative; text-align:left; }</style><form> <label for="name">Your...