Steve Bryant - CSS

A Quick Note on Text Shadows

Wed, 26 Oct 2011 11:15:00-0500

I was recently doing some work for a client and they had a menu that would appear over a background image. The background image would be different for each page. Unfortunately, the background image on some pages made the menu text difficult to read. The designer thought it would be a good idea to have a drop shadow behind the text. This sounded good to me, except that I didn't know how to do that. Fortunately, it is really easy. [More]

Real World HTML: Client Review

Thu, 27 Jan 2011 11:00:00-0500

In our last "Real World HTML" entry, we created a printable page - finishing up the implementation of the design and the print page. There's nothing left to do now, but show it to the client. I don't think I have ever shown something to a client that hasn't wanted something changed - even if I show them a pixel-perfect match of the original design. In fact, I have been tempted to use the approach Hal Helms mentions for exacting clients (watch for the Rick Roll). In any event, I had no reason to expect this to be any different. [More]

Real World HTML: The Printable Page

Thu, 20 Jan 2011 15:45:00-0500

In our last "Real World HTML" entry, we handled a rounded corner box sitting on a gradient - finishing up the implementation of the design. The only thing that remains now is making the printed page look good. Styling for print should be easy - especially if the HTML is structured well. With that in mind, let's take a quick look at what we have so far. [More]

Real World HTML: Rounded Corners Box

Thu, 13 Jan 2011 13:13:00-0500

In our last "Real World HTML" entry, we handled a funny joining of graphical lines. This time we need to handle some rounded corner boxes sitting on a gradient. Before we go on, let's take a look at the box. [More]

Real World HTML: A Funny Joining of Graphical Lines

Thu, 06 Jan 2011 14:30:00-0500

In our last "Real World HTML" entry, we implemented the skeleton of the site (with a bit of heresy). Now we need to handle a small peculiarity of the design. Before we go on, let's review our design in all three states. [More]

Real World HTML: Graphics-Heavy Banner

Thu, 11 Nov 2010 13:00:00-0500

In the first entry on "Real World HTML", we reviewed the design (functionally matching a site I recently completed) that we must implement and created the skeleton HTML and CSS. Now it is time to implement the header (or banner) of the design. Let's start off by taking a look at the banner. Here is the banner in its two states: [More]

Real World HTML

Thu, 04 Nov 2010 11:30:00-0500

HTML5 is currently all the rage. But while people are busy discussing the latest and greatest, maybe it is a good time and step back to look at how to write solid HTML4. Most of the HTML I see, frankly, could use a bit of work. I want durable HTML. Since I don't see that written about enough, I thought I would pick up the gauntlet. First, I should define "Durable HTML". By this, I mean HTML code that can take a hit and withstand the unexpected. For example, what happens if a manually cleared float is added to the main content area of the page. Does it mess up the design? What about a wider-than-expected image or contiguous text string? What if the text is much longer than expected - making your site taller than you originally guessed? What if JavaScript is disabled? How easy is it to make changes that - to the client - look really easy to make? What if they want to change out an image in the header? What if they want to change the width of the site or center it? These are just some of the things that are easy to fail to anticipate when writing your HTML. Very often I see HTML that works, but only if everything continues to be as it was when the code was first written. When that code falls apart, it often does so in glaring ways. The key is to avoid obvious failure. Rather than trying to speak in abstracts, I am going to take a real world example and work through it - using a site I actually did recently for a client (with different text, colors, and images). I will cover exactly what I did on this project for my client as well as things that I might have done differently if I had it to do over again (I usually have at least one of those for any given project). [More]

A Handful of Code

Fri, 11 Apr 2008 06:00:00-0500

In my last post about page controllers, Jason Holden asked on which pages I use page controllers. This is a great question and speaks to a larger issue of code organization that applies to CSS and JavaScript as well. [More]

CSS Naked Day 2008

Wed, 09 Apr 2008 11:30:00-0500

I just found out that it is CSS Naked Day, so here is my blog... naked.

Attractive Forms

Tue, 08 Apr 2008 06:30:00-0500

I am looking for some attractive form designs. If you have seen any that you like, I would love to have a look at them. I would also like to find attractive data tables and administrative menus.

Opera Sues Microsoft

Fri, 14 Dec 2007 06:00:00-0500

Opera just announced that it is suing Microsoft (open letter, press release) for using its market dominant position to tie its OS to a browser with poor standard support.

[More]

CSS Organization

Fri, 02 Mar 2007 06:00:00-0500

Last month, a discussion popped up on the CSS list about organization of CSS files. This is a discussion that comes up from time to time on that list and in smaller development discussions.

I don't think that my way is necessarily better than any other, but I thought I would share it. If for no other reason than to open up the discussion.

One method that I have seen is to divide up the files into "modules": forms.css, layout.css, tools.css, typo.css. This seems nice, but leads to a few problems.

[More]

Traveling Reference

Fri, 26 Jan 2007 19:29:00-0500

Ben Forta is asking for input on his next CFWACK book. The discussion in the comments reminded of the old CFML Reference that I keep with me. It is one of a few books that I always have near my computer when I travel.

CSS Pocket Reference (outdated, but still handy when I can't remember some bit of syntax)
ColdFusion Quick Reference Guide to CFML (no longer in print, but still handy to jog my memory a bit)
Regular Expressions in 10 Minutes (Forta strikes again!)
SQL Pocket Reference (perhaps the least used of the bunch, but I still like to have it)
The Elements of Style (I don't write the copy, but it has still been handy)

These books taken together weigh less than a pound and take up less space than your average computer book. They have still managed to be tremendously useful when I am working on the road (especially if I am trying to get some work done with no internet connection).

Anyone else have suggestions for books that they don't leave home without?

The Future of Hacks in IE

Thu, 13 Oct 2005 13:39:00-0500

Microsoft is working on Internet Explorer 7 and in an entry on the IEBlog, they mention the possibility of existing hacks for IE breaking pages in IE7.

If you are currently using a doctype that triggers IE's quirks mode, your site won't be affected. If you are using standards mode and hacks for IE, however, it might be.

The reason for this is that IE is trying to make their standard mode more standards compliant. They recommend using conditional comments instead of CSS hacks.

Find out more information at "IEBlog: A Call to action: The demise of CSS hacks and broken pages".

All in all, this is the kind of change that people have long been asking for from Redmond, but if you are using standards mode the transition could be rocky unless you prepare now.

Quick CSS Reference

Fri, 09 Sep 2005 13:58:00-0500

This is a quick reference on how to use CSS. We've no time for long explanations, so I will include a few other resources for that sort of stuff.

For details on CSS properties, see the w3schools CSS Reference or the DevGuru CSS Index.
You can also read An Introduction to CSS on the W3C's site (they are in charge of standards on the web).

Enough of that, We're trying to get some work done here! [More]