By Chris Coyier

This is our second installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. If you have a question about one of these topics, feel free to reach me (Chris Coyier) through one of these methods:

1. Send an email to ask [at] smashingmagazine [dot] com with your question.
2. Post your question in our forum. You will need to sign up (yes, the forum is not officially launched yet, but it is running!).
3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”

Please note: I will do what I can to answer questions, but I certainly won’t be able to answer them all. However, posting questions to the forum gives you the best opportunity to get help from the community.

1. Different Color for List Item Bullets

@christopherscot writes:

I wish there was an easier way to specify color on list bullets… list-style-color maybe?

Hey, Christopher. Alas, list-style-color does not exist. There are a couple of different ways you could go about it though. One way would be to wrap the content of each list item in a span, like this:

<ul>
   <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></li>
   <li><span>Aliquam tincidunt mauris eu risus.</span></li>
   <li><span>Vestibulum auctor dapibus neque.</span></li>
</ul>

Then, in your CSS:

ul {
   list-style: disc;
   color: red;
}


ul li span {
   color: black;
}

View Demo

Another way would be to remove the bullets entirely by setting list-style-type: none. Then, apply a background image to the list items, making sure to nudge the text over to make room.

ul {
   list-style: none;
}


ul li {
   background: url(images/bullet.png);
   padding-left: 20px;
}

2. Roll-Over Button

@jonfreeze writes:

How can I create a roll-over button but still be able to copy and paste text on the button?

Hey, Jon. In order to make the text copy-and-pastable, the text needs to be real Web text. But we can still create a nice roll-over effect by shifting the background image of the button on roll-over. I like creating a special toolbox CSS class for buttons. So, anytime I need to make a link look more button-like, I just apply class=“button” to any link or input button.

Here is the CSS:

.button             { padding: 5px 15px; background: url(images/button-bg.png) repeat-x; color: #222;
                      border: 1px solid #ccc; font: bold 18px Helvetica; text-decoration: none; }
.button:hover       { background-position: bottom left; }

Notice that all we’re doing is shifting the background position on roll-over, not swapping it for a new image. This has the double benefit of one less server request and a smoother, quicker transition.

View Demo

3. Pixel Width Decision

Jon Schwenn writes:

I know more and more websites, especially the ones with high-quality design, are pushing wider. As I start a new project, I think about my client’s demographics and the purpose of the website. I just checked out the analytics report for one of the larger e-commerce websites that I run. There were about 1,300 visits from people whose resolution was under 1024 pixels wide. I then looked up the revenue generated from this group, and it was almost 5% of orders over the last 30 days. Is it still best practice to stick with the good ol’ 800 width? Or should I realize it’s 2009? What about the 5% of sales coming from 800x600 resolution set of computers? That’s still a decent chunk of sales to just toss aside and a decent chunk of people to annoy (and possibly lose) with a side-scrolling website.

Hey Jon, I think you already have the perfect mindset for making decisions about website width. You are looking at real analytics data of the website in question. That is exactly what you need to read to make the right call. I don’t think any business in the world would be willing to potentially lose 5% of its sales without a darn good reason. So the real question becomes: “Are there tangible benefits to designing wider than 800 pixels?” If you have cooked up a really sweet design that benefits from that extra horizontal room, that new design may just make up for that 5% and then some. But if you are widening just for the sake of widening or because of current trends, then don’t. Let the design itself guide you. If you can pull off everything you need and fit it nicely on an 800 pixel-wide monitor, do it. If you do go wider, make smart decisions about the viewable area for the 800 pixel crowd. For example, don’t put the “Add to cart” button on the far-right side, where it is liable to get cut off.

For fun though, let’s look at more general statistics, supposing we were building a new website without existing analytics data. w3schools puts out screen-resolution data for its website every January. It doesn’t include 2009, but assuming the trend continues, it sees 5% or less of visitors with 800x600 monitors. Here are some other screen-resolution data from my own analytics:

CSS-Tricks.com (audience of Web designers and computer-savvy people):

• January 2009, 800x600 - 0.33%
• June 2008, 800x600 - 1.08%
• Most popular resolution: 1280x1024

BeaconAthletics.com (e-commerce website targeting school and government workers):

• January 2009, 800x600 - 7.49%
• June 2008, 800x600 - 7.47%
• Most popular resolution: 1024x768

JewishStudies.wisc.edu (university website with audience of academics and press):

• January 2009, 800x600 - 2.07%
• June 2008, 800x600 - 4.16%
• Most popular resolution: 1024x768

My advice? If your website is e-commerce or has an older and less computer-oriented audience, design to 800px (probably a maximum width of 775px). Otherwise, you are safe going wider, but perhaps stick to something around the popular 960px.

4. Bringing up Modal Page on Page Load

Rich Staats writes:

I would like to create a simple modal box that appears on document.ready, and not on a click event. This would be the “Latest contest” message to users, and I would like to use cookies to show it only once. But if possible, I would like to have the cookie cleared when a new contest message is created. Even if cookies were cleared on the 1st of every month, we could work the contests around that.

Hey Rich, rather than re-invent the wheel with modal boxes, I went in search of a jQuery plug-in that could handle it. One of the first ones I checked out, jqModal, fits the bill nicely. Some modal box plug-ins only provide a function that you can call with certain elements, which will bring up the modal box on a click event, but this one has an additional function that allows the modal box to come up via an independent function. This is just what we need, because we aren’t waiting for a click; we want to open it after a cookie check.

Since we are already using jQuery, we might as well make it easy on ourselves and use a plug-in for the cookie work as well. This gives us some new functions that make it really easy to set and get cookies.

Turns out, we can accomplish your task pretty darn easily with these plug-ins. Here is the whole bit, including all the includes and loading jQuery itself.

<script src=“http://www.google.com/jsapi" type=“text/javascript”></script>
<script type=“text/javascript”>
    google.load(“jquery”, “1.3.1”);
</script>
<script src=“js/jquery.cookie.js” type=“text/javascript”></script>
<script src=“js/jqModal.js” type=“text/javascript”></script>
<script type=“text/javascript”>
    $(function(){
        var modalCookie = “modal_cookie”;
        var options = { path: ‘/’, expires: 10 };
        var shouldOpen = $.cookie(modalCookie);


    $('#dialog').jqm();
    if (shouldOpen != "no") {
        $('#dialog').jqmShow();
        $.cookie(modalCookie, 'no', options);
    };
});


</script>

In your markup, the page element with the ID of #dialog will be used for the modal box. You can put whatever you want in there! The cookie in this example lasts only 10 days, but you can easily change the expires number in the code above. If you wanted to “clear” the cookie early, just change name of the cookie.

View Demo | Download Files

5. Tabs on the Left

Eric Rasmussen writes:

I am looking for a simple way to create tabs on the left side of a file browser, similar to the file browser in MobileMe. Here is an example of what I am am trying to accomplish.

Hey Eric, I think the ticket here is to create a two-column layout. I understand the ultimate goal is probably to have more columns than that, but I’ll get you started here with this example, and then you can take it from there.

To visually separate the columns, we’ll use color variation. Right off the bat, we run into the classic problem of making the columns equal in height. We’ll get around this by using “faux columns,” which is a classic technique of “faking” equal-height columns by wrapping both columns in another element and setting a background image on that.

Our left column is simply an unordered list, and the right is a div where we can put content. Here is the entire markup:

<!– For centering and faux columns –>
<div id=“page-wrap”>


&lt;!-- Left Column --&gt;
&lt;ul id="nav"&gt;
    &lt;li class="current"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Documents&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Movies&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Right Column --&gt;
&lt;div id="content"&gt;
    &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.&lt;/p&gt;
&lt;/div&gt;


</div>

Notice the class of current on the first list item. We’ll use this CSS hook to apply special styling that will visually link that tab to the right column. A slight shadow will be applied to the other tabs (via a background image) to make them look tucked under.

Here is the important CSS:

#page-wrap          { width: 500px; margin: 30px auto; border: 1px solid #999;
                      background: #eee url(images/nav-bg.png) repeat-y; overflow: auto; }


ul#nav              { list-style: none; width: 140px; float: left; padding: 10px 0 10px 10px; }
ul#nav li           { margin: 5px 0; }
ul#nav li a         { padding: 8px 3px 8px 10px; display: block; text-decoration: none;
                      font: 18px Helvetica; letter-spacing: -1px; color: #222; outline: none;
                      background: #666 url(images/nav-bg-off.png) top right repeat-y; }
ul#nav li a:hover,
ul#nav li a:active  { border-left: 3px solid #999; }

ul#nav li.current a { background: #eee; border: none; }

#content            { width: 340px; float: right; padding: 15px 0; }

View Demo | Download Files

As a bonus in the demo, I included some jQuery to dynamically swap the content and change the “current” tab as you click through the tabs. Check out the code!

(al)