Category CSS

Set Bullets in a List to Any Color Using CSS

Surprisingly CSS doesn’t have a straight forward way of changing the bullet color for any of the list-style-types. I’m going to show you a clean way to change the color of a bullet; without adding spans or using background images.

Setting min-height on Content Populated via JavaScript

It’s pretty annoying when a page loads and the content gets pushed around and container jump in height due to JavaScript, AJAX, JSON and/or Flash content being pulled to a container. This jump can easily be fixed by using the min-height CSS property on the parent container.

Examples where you may want to set min-height

  • Javascript embedded video players such as Brightcove
  • Sidebar widgets, such as recent tweets or last.fm stats
  • Galleries that are pulling in thumbnails from a database, XML, or JSON file via a JavaScript
  • Basically nearly any container that is going to be filled with a relatively small item and you can predict closely what the height of the item will be

So all you need to do is set min-height using CSS on the container.

#container { min-height:125px; }

Note: min-height follows the box model just like height does so when you set a min-height on a container that will not include borders or padding.

Two Simple Solutions for IE6 support

Of coarse IE6 doesn’t support min-height but IE7 and up does. And of coarse Opera, Firefox, Safari and Chrome support min-height.

But it’s a pretty easy fix. IE6 has a bug (surprise) in the way it supports plain old CSS height. Basically it doesn’t respect the set height of a container and will just expand as needed to fit the content. So in IE6 you can just use height as if it were min-height, but you’ll have to set height in your IE6 stylesheet so that you not setting height on modern browsers too. If you aren’t using conditional comments to serve IE6 an separate stylesheet. Then pinch yourself and then try the Dustin Diaz Fast Hack Bad Ass Method instead. (He didn’t officially name the method so I figured I’d make something up for him.)

Setting min-height isn’t Always the Best Solution

No matter which technique you use the most important thing is to let the user know that something is taking place. Something as simple as a animated image indicator such as a spinning wheel can do the trick.

If a primary part of the interface is going to be loaded with a delay for example, over one second then you might want the box to expand (animating the height property or some other effect) once it’s being populated with content to show the user that content is being pulled in. The interface may look broken to a user if there is a 800px tall box sitting there empty for two seconds, even if you have little indicator spinning. In this case you can have a small 200px box with a message such “Content X is loading…” Then before you display the content have the box slide to the proper height and fade in the content.

Another solution for long content area that are being dynamically filled is to have the the request broken up so that you can immediately start pulling in item 1, then item 2, then item 3, etc. The container can just grow as each item is pulled in.

There probably a million other problems that the min-height property isn’t a good fit. But remember if you remember to put the problem before the solution and are willing to do a little user testing the answer will be come clear.

CSS Reflections – Great for Dynamic Content

I hope other browser and the W3C pick up CSS reflections. It’s great for dynamic images. I’m using it with the Last.FM API so I can add a nice little refection for webkit browswers. I don’t want to use something like reflection.js because it just makes it complicated when you are already bring in content via Javascript (specifically JSON with Last.fm) plus I don’t really want the content to flash and to waste the user’s CPU on something like a reflection. I’d rather just (insert buzzwords) progressively enhance the the experience for webkit users.

example of reflection

Code used:

-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(rgba(242,242,242,.6)));

Read more about -webkit-box-reflect at webkit.org.

April 9, 2009 is CSS Naked Day

quasarkitten.net with no CSS applied for CSS Naked Day

To know more about why styles were disabled on this (post imported from my old blog, quasarkitten.net) website visit the Annual CSS Naked Daywebsite for more information.

The main point of CSS day is to show the power of CSS. It also helps expose misuse of HTML or bad practices. It reminded me that I need to update how I use tags on this site. For some reason I never updated the template. Oops :)

Disable CSS Styles: Quick Tip

If you have been using the Web Developer Toolbar since at least Firefox version 2 then you probably have learned some of the keyboard shortcuts to activate some of it’s features. My favorite keyboard shortcut was Command + Shift + S. This shortcut disables the CSS on a page so you can take a look at how the HTML is render by the browser.

Web Developer Toolbar

 

Delicious Extension Options

The problem I had is when I upgraded to Firefox 3. More accurately the problem lies with the del.icio.us add-on that was updated for Firefox 3. This add-on has the same keyboard shortcut assigned to opening the delicious bookmarks sidebar. It was really bugging me so here is how you change the keyboard shortcut in the delicious add-on.

  1. Go to Tools → Delicious Options.
  2. Select the Keyboard shortcuts tab.
  3. Near the bottom of this window You see an option called Bookmarks Sidebar with options to change the shortcut. Change the shortcut to whatever you’d like. I changed mine to Command + Shift + D. On my system it didn’t have any thing already assigned to that keyboard shortcut.
  4. Then just press the Restart Now button and your done.

Yahoo User Interface Theater (Videos)

I just recently found out about the YUI Theater. It is a collection of videos about the web development world. I’m really enjoying them so far. I have already watched Douglas Crockford: “The JavaScript Programming Language—Part 1”. It was very informative about the history of JavaScript. I look forward to watching all four videos.

Also on my list to watch is Shawn Henry’s “ Web Accessibility Guidelines Update” I enjoyed hearing her speak at An Event Apart Seattle 2007. So I’m excited to watch this presentation.

As of today there are 44 videos in the YUI Channel. I can’t wait to watch them all. Here are some of the ones I’m looking forward to watching.

Yahoo has even posted twenty-three of it’s video on iTunes as a podcast that you can subscribe to.

On a related topic the recent FLOSS Weekly podcast interviewed Nate Koechley, a Yahoo front-end engineer and designer. They talked about The Yahoo User Interface Library, a collection of open source JavaScript utilities and controls with cross-browser, cross-platform support.

So to wrap this up if your a developer pay attention to what Yahoo is doing because they are bringing out a lot of content, services, and code for us developers.

Background colors not printing?

Today I was working on a little report for work. So I designed a neat xHTML page that has some stats listed in a pretty little table, and then I realize people at work tend to print things out, so I better make a nice print style sheet. So I add my link tag: then started working on my print style sheet. Since I use CSS for all the layout all I really need to do is a few of things.

  • Remove the non-relevant section such as the page header
  • Adjust the browser defaults:
    • Remove coloring and underlines from links
    • Remove dotted border from abbreviations
    • Set my logo image to display as block
  • Restyle the table so that alternate rows are different colors
  • Add some Javascript to make the link’s url visible

So after doing all these I’m try to do some test prints. In Firefox and Opera everything is fine. Then in Internet Explorer 6 the background color for the alternate table rows isn’t printing. So I’m thinking it’s some sort of IE bug. After spending some time fiddling with the CSS I noticed that which ever element I applied a background color to it wouldn’t print.

Then it hits me… The browser preferences. If you go to the file menu and choose Tools << Internet Options A window will open. Choose the tab called Advanced. Then scroll down to the printing section and check the option “Print background colors and images”. See Figure 1.

Figure 1

Once you’ve done this your background colors will print.

I also noticed this happens in Safari for Mac. The preference to change this lives in the print dialog. Once your in the print dialog box, expand the dialog by pressing the upside down triangle thing next to the printer you’ve selected.

Figure 2

Then check the box that says “Print Backgrounds”. See Figure 3.

Figure 3

As a web designer it reminds me that you can’t depend on anything so make sure that your print style sheets do not depend on background colors. For example what if you wanted to have some light grey text or white text on a background color, well if the user has their background colors unchecked, which by default it is, the white text will be printing on white paper. Not good. I guess the lesson here is to test, test, and then do some more testing to make sure everything is working.