Still supporting multiple versions of IE?

If you still have to support multiple versions of Internet Explorer, then you’ll want to take a look at this Smashing Magazine article about how IE 6, 7 and 8 treat various elements of CSS: http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

And for those who scoff at the idea of anyone still using IE6, I’m currently working for a large global corporate where they’ve only *just* changed from IE6 to IE7. And some people there are still on IE6.

[Links last checked November 2009]

New to CSS? or just need a refresher?

Chris Spooner has compiled a list of 15 must read articles for CSS beginners, which is available on the Line 25 website. The articles he’s linked to are:

1. Resetting your Styles with CSS Reset
2. Learn CSS Positioning in Ten Steps
3. Internet Explorer and the CSS Box Model
4. Specifics on CSS Specificity
5. Faux Columns
6. Sexy Ordered Lists with CSS
7. Divitis: What it is and How to Avoid it
8. Using background-image to Replace Text
9. CSS Sprites: What They Are, Why They’re Cool, and How to Use Them
10. How to Create a CSS Menu Using Image Sprites
11. 10 Examples of Beautiful CSS Typography and How They Did It…
12. CSS Shorthand Guide
13. Push Your Web Design Into the Future With CSS3
14. How to Use Headings in HTML
15. 10 HTML Tag Crimes You Really Shouldn’t Commit

I’m not sure that all these articles are ‘beginner’ articles, but they are articles that can help you solve many of the ‘What happened?’ and ‘How do I get it to do that?’ questions.

That link again: http://line25.com/articles/15-must-read-articles-for-css-beginners

[Links last checked July 2009]

Round-up of 50 free lessons in graphic design

The good folks over at PSD Tuts Plus have pulled together a collection of 50 free lessons in various aspects of graphic design — from typography to color theory, to grid-based design and design theory, and rounding out the collection with some UI and usability lessons.

In their own words:

While many of us can create something that looks good in Photoshop or attractive when spliced into CSS, do we actually understand the design theory behind what we create? Theory is the missing link for many untrained but otherwise talented designers. Here are 50 excellent graphic design theory lessons to help you understand the ‘Whys’, not just the ‘Hows’.

[Links last checked June 2009; thanks to Char JTF for alerting me to this site]

Creating a non-scrolling title for a webpage

Mike Hamilton, head honcho at Madcap Software, recently shared how to create a non-scrolling region on a web page. For those who remember the old WinHelp days, this was something that happened automatically. Not so in web-based Help.

Mike’s blog post gives instructions on how to do this with a Heading 1 (H1) style in Madcap Flare, but the basics of the settings apply to any HTML/CSS.

You can get the full details here:
http://madcapsoftware2.wordpress.com/2009/04/20/adding-non-scrolling-regions-to-flare-topics/

[Links last checked April 2009]

Fully fluid web design

Ethan Marcotte has written a terrific article — Fluid Grid –  for A List Apart, where he clearly explains how to break out of the ‘little white lie of minimum screen resolution’.

He shows us how to use ems for scalable (fluid) text sizes (I knew that bit) and then how to extrapolate that into calculating percentage widths for a completely fluid web layout. He explains the technique simply and gives some nice clear examples, so there should be no excuse for table-based or fixed pixel width layouts again!

Update 30 April 2009: A criticism levelled at Ethan’s article at A List Apart was that it didn’t deal with fixed width elements inside the container, such as images. So he experimented and came up with a ‘fluid image’ solution too! Very clever. Details of his fluid image solution are here:
http://unstoppablerobotninja.com/entry/fluid-images/

[Links last checked April 2009]

View a website’s CSS

There are a couple of ways to view a website’s Cascading Style Sheet (CSS) file.

• A site’s CSS gets loaded on to your computer and so you can always go look at it in your temporary internet files (identify the filename first by viewing the source of the page—in the source, you’re looking for lines in the HEAD area such as this: <link rel=”stylesheet” href=”[path/filename].css” type=”text/css” media=”screen” />)
• Firefox: You can use a web developer add-in to open the CSS in another browser window. For example, there’s a great Firefox extension from Chris Pederick (http://chrispederick.com/work/web-developer/) that sits in your browser window. Once installed, click the CSS toolbar button for the options.
• Internet Explorer: Use a free toolbar add-in such as the Web Accessibility Toolbar from Vision Australia (http://www.visionaustralia.org.au/info.aspx?page=614). Once installed, click the CSS toolbar button for the options.

I’m sure there are many more options, but the ones I’ve suggested are quick and easy—and free.

Script-free pure CSS menu

Steve Gibson (of Gibson Research Corporation fame) has an excellent CSS-based menu that you can use horizontally, vertically, or both. All CSS, no JavaScript required. And it’s public domain too, so you can use and modify it as you wish.
http://www.grc.com/menudemo.htm

Steve Gibson’s menu is the one I adapted for use on this website: http://minarco-mineconsult.com/

By using two different DIV IDs, I was able to get the horizontal and vertical menus displaying differently even though they both use the same menu contents. I also put the menu contents into a JS file for ease of reuse, but the menus display as a result of the CSS for the DIVs, not the JavaScript.

[Links last checked January 2008]

CSS settings for horizontal rule (hr)

I was having some difficulty with the different ways that IE7 and Firefox rendered any CSS I’d set for the horizontal rule (hr) tag. Here’s my solution (substitute your own color and sizing values):

hr
{
height: 1px;
color: #808000; /* only works in IE */
background-color: #808000; /* needed to color the HR in Firefox */
border: 0px; /* needed for Firefox so that it renders the 1px height correctly */
}

You want fonts with that?

Nathan Ford, over at unit interactive, has written a great blog post on moving a little outside the square when it comes to defining ‘font stacks’ in CSS, such as: font-family: Arial, Helvetica, sans-serif;

He suggests that you define the stacks according to their purpose (context), specifying your ideal font first, then the alternative (or font that best fits), followed by a common font, then the generic one. While he suggests four, there’s nothing to stop you from defining six or ten fonts in your stacks. The ideal font you specify doesn’t have to be a font that’s installed on everyone’s machine, and he gives us some links to stats on what’s installed on computers around the world, as well as a comparison of the fonts mentioned in his article as a downloadable PDF document.

One thing he didn’t mention is the great Typetester tool where you can select fonts, specify their attributes (including dynamic color and background color), see how they display in your browser, then grab the CSS for the font combination you want. It sure beats changing the CSS, and refreshing the browser to test out every nuance!

That blog post again?
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

HTML email newsletters

On occasion, I’ve been asked about creating email newsletters. My investigations to date have lead me down the path of “It’s not worth it”, or “Use one of these paid services”. If asked why I believe it’s not worth it, I usually come up with reasons such as having to hand code the HTML, cannot use CSS etc. Now, while that’s not an issue for me, it is for those who think you can just bung something up in Word and send it out.

Now Mathew Paterson has written a great article on this, and in it he talks about going “back to 1999″ with respect to the coding etc. But he has lots of other interesting things to say in his three page article: http://www.sitepoint.com/article/principles-beautiful-html-email

It’s well worth a read if you’re thinking of going down the ‘email newsletter’ path.