You have a been a subscriber to my site and for that I am grateful. I've switched over to a new host and am now using a different CMS, so this feed will not be updated going forward. To get notified of any new posts, please visit my site again and subscribe from there, or follow @askthecssguy on twitter. Muchas thanks!

Waqas writes:Is there any way to specify alternate font size?e.g.p { font: 11px Tahoma, Helvetica; }If Tahoma font is not available in machine, Helvetica will be used (if available) with size 11px. Is there any workaround that if Tahoma is available it will use size 11px & if it is not available Helvetica will use for example 13px?Yes - here's a way. I had found this article from 2007: JavaScript/CSS Font Detector, so let's use that as a starting point.I'll start with HTML for a simple paragraph:<p>Row, row, row your boat<br />Gently down the stream.<br />Merrily, merrily, merrily, merrily<br />Life is butter dreams.</p>And style it:<style type="text/...

This saturday morning, October 16th, there is a local AIGA mini-conference on topics like designing for mobile, HTML5 and CSS3 (yours truly speaking), HTML frameworks, accessibility, and more. If you're in the Memphis area, check it out.Here are the details.I only know two of the other speakers (JD and John Lloyd). I'm looking forward to meeting the others, but even more so, getting to meet some of the other web-savvy designers in Memphis who are interested in these topics. Maybe I'll see you there.

So what's a spinbox? A picture is worth a thousand words:Here's the thousand word version (via):A spin box -- sometimes called a spinner control -- is a collective term for the combination of a text box with an up-down control. Users can click arrow buttons (the up-down control) or press the UP ARROW or DOWN ARROW key to change the value in the text box. The value ascends or descends incrementally.I've been optimizing web forms for use in iPhones and Androids. Not too long ago I ready a post by Luke Wroblewski on the topic (which used hotel search forms as an example - bonus for me). In Luke's post, he calls attention to the fact that Kayak's mobile app uses spinboxes for room and gues...

I don't read many technical books about web site development with CSS. I probably learned like many of you likely did: online articles, right click/view source, firebug, and a hell of a lot of trial and error. I never take for granted that I've been able to provide bacon and diapers for my family by learning from these freely available resources. I'm taking a moment now for that to sink in.... it's awesome.You can't do that and become a surgeon, right? Like you can't walk up to someone who you know has recently had their appendix removed, right-click, view source, and replay the procedure, saving the information to implement later. If you could, I'd imagine there'd be lots of link ba...

I've toyed with offering affiliate links to Theme Forest from this site in the past. But since the people who typically visit my site tend to design and markup their own, it didn't seem worth it (and the click-through numbers supported that). If anything, readers of this site would be on the selling end rather than the purchasing end.Now I see that the same family of sites is offering Code Canyon, a marketplace for code, which also seems to fit the readers of my site (once again, the selling end rather than the purchasing). And if you aren't the kind of person who sells their designs and themes, perhaps you are the type of person who would be interested in monetizing your javascript ima...

Many of you are likely already familiar with the immensely useful feature of including plus signs (+) in Gmail addresses, such as the following:askthecssguy+mileycyrusfanclub@gmail.comThis would allow me to sign up for account at another web site, and be able to track spam or apply filters based on everything after the plus sign.The problem is that many web sites that ask for email addresses will reject addresses that contain a plus sign. To get around this, we could do one of two things: Contact every web site owner whose site doesn't allow plus signs, and convince them to change their form validation. Get Gmail to recognize a special string of characters as the same as '+'.I'd love to ...

I'm working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don't have as much contrast as what I'd like. To better distinguish at a glance which inputs are disabled/enabled, I've chosen to style the labels of disabled inputs with a faint gray color.Consider the differences in the screenshot below.You may also view a live HTML example of the above form to see how disabled fields appear in your browser.HTMLThe difference in HTML is a small one. The first example might have a checkbox whose HTML looks like this:<input type="checkbox" id="astronomy1" disabled="true" /><label for="astronomy1">Astronomy</label>While t...

I couldn't resist. The round-up post trend is growing at an unbelievable rate. If lists are that good, then surely a list of lists is even better, right? Let's get started.Titles with interesting adjectives and words 20+ Wicked Proof of Concepts for Better use of jQuery/CSS I appreciate concepts that keep the wicked from seeping through. 40 Sexy And Creative Typographic Logo Designs This is the Justin Timberlake of article titles. 50 Kick-Ass And Creative Dark Website Designs Of all terms to use, I like 'kick-ass' the most. 6 Easy Ways To Cure A Nasty Case Of Redesign-itis I'm glad there's a 6-step program to treat this. 27 Best Photoshop Web Layout Design Tutorials to Design Decent ...

Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn't show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color.One way people get around this is by including two logos on their site, hiding the one for print in the screens css, and vice versa. It works, but it includes twice as many img tags as what is really necessary.A method I've had success with is calling a print-optimized image in the html, and using CSS to swap out the image with a screen-fr...

As powerful as Firebug is for inserting HTML and CSS on the fly, sometimes you just want to save a local version of the page so that HTML manipulation can be saved and tested across browsers.I just wanted to share a tip on how easy this is to do. Right click, view source, and save it as an html file. If you're lucky, the page will load right up, bringing in the CSS/JavaScript files that's being used on its original domain.For some sites, you have to give a little guidance. Like today, I went to wired.com, viewed and saved the html source. You can view the result here.Yuck, it's missing styles. That's not what we wanted.But by inserting a little code in head, we can grab everything th...

Perhaps I'm using delicious.com wrong, but sometimes I wish I had the ability to narrow down my results from a variety of different tags rather than excluding results that don't share the first tag I marked. That's where this exercise came into play.The technique can be used anywhere. In my line of work (online hotel reservations), I've experimented with this technique for a room selection for online hotel reservations. For instance, hide all but the non-smoking rooms with a king bed, and only show me rooms that I can pay for in advance to get the cheaper price. That sort of thing.For this article, I'm going to base my examples on delicious.com's bookmarks.View demoDisclaimer stuffThis...

My coworker Alan sent me a link to moustacheme.com last week. Moustacheme.com has a wall of awesome, which is a gallery of moustachioed photos (perhaps it could be called a "stash of staches", or a "stache-cache"), and it uses a clever CSS technique for an attention-getting effect on hover.Let's recreate it.The HTMLWe want a thumbnail container, with our link inside of it. The thumbnail image is inside the link. The thumbnail containers are at a fixed dimension (thanks to the thumb) and will simply float left and repeat .So this:<div class="thumbnail"> <a href="#"> <img src="thumb.gif" alt="" /> </a></div>repeated a few times and put in a container, l...

Mike writes:Check this out: http://econsultancy.com/reports.Scroll up/down... whaaaaat? :) How was this done?Answer: fixed background images. Let's look at some examples.ImagesFor the basic effect, start with two same sized images, with a slight difference. For my example, I chose this color image and made second version of it in black and white.The images don't have to be the same size, but that definitely makes it easier.The markupEach image will need it's only container. I've used a header div and a content div.<html> <head> ... </head> <body> <div class="header"> ... </div> <div class="content"> ... </div>...

With regards to this article, Josh writes:"Would it be possible for you to recreate this with jQuery and see how many lines of JS you can save in the process?"Yes!View demoThis is a direct jQuery replacement of this particular example.The jQueryI ditched all the home-grown functions, linked out to the jQuery-latest.js, then wrote the following bits:$(document).ready(function() { $('.pickme tbody tr:odd').addClass('odd'); $('.pickme tbody tr').hover( function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); } ).click( function() { $('.selected').removeClass('selected'); $(this).addClass('selected').find('input').attr('checked','checked');...