Ask SM [CSS/JS]: Pixel Width Decisions, Modal Boxes

Advertisement

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;
}

colored bullets

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.

button sample

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 800×600 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 800×600 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, 800×600 – 0.33%
  • June 2008, 800×600 – 1.08%
  • Most popular resolution: 1280×1024

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

  • January 2009, 800×600 – 7.49%
  • June 2008, 800×600 – 7.47%
  • Most popular resolution: 1024×768

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

  • January 2009, 800×600 – 2.07%
  • June 2008, 800×600 – 4.16%
  • Most popular resolution: 1024×768

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.

tabs on left

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">

	<!-- Left Column -->
	<ul id="nav">
		<li class="current"><a href="#">Home</a></li>
		<li><a href="#">Documents</a></li>
		<li><a href="#">Pictures</a></li>
		<li><a href="#">Movies</a></li>
	</ul>

	<!-- Right Column -->
	<div id="content">
		<p>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.</p>
	</div>

</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)

CSS,

↑ Back to top

I create websites and help others create better websites through writing and speaking. I consider myself a lucky man for getting to work in such a fun and rewarding field.

  1. 1

    ok, you definitely rock…

    0
  2. 2

    Wow! Thanks Chris, for your insight! Interesting questions, and very complete answers! I was a 800px fan myself, buy now I really like the extra space :)

    0
  3. 3

    modal box,
    thanks for that …, chris rocks!

    0
  4. 4

    This may also be useful for those interested in the Pixel size conundrum..
    A list of browser desktop space dimensions on different resolution PC

    http://www.designerstoolbox.com/designresources/safearea

    Just came across it today coincidentally, i assume these sizes are excluding any added toolbars

    0
  5. 5

    Is there a way to get the colored bullet to work IE7?

    0
  6. 6

    @Gregory
    Yes, there is! Ask Microsoft to fix IE7. Sorry, I’m not trying to be cocky, don’t take it as an offense, just trying to lighten up a day.

    0
  7. 7

    What a great post — all good, useful answers! I am already a big fan of Chris (I read css-tricks daily) and now with “Ask SM”, I get more good stuff from him. The downloads are a nice bonus. Thanks Chris!!

    0
  8. 8

    Using a class .button is a bit useless, you should use the button HTML element instead. Read on :

    http://particletree.com/features/rediscovering-the-button-element/

    0
  9. 9

    There is always problem with IE.

    0
  10. 10

    Wow, this is about as old as my Tandy 2000 with XTree Gold.

    0
  11. 11

    Great post!
    Is there a way to have the Cookie in the Modal pop-up not expire. The idea here is to only show the pop-up once for the user.

    0
  12. 12

    thats interesting always better to clear doubts

    0
  13. 13

    Thanks for the help with the Tabs on the Left, that was really useful. Thanks!

    0
  14. 14

    Thanks for this but colored bullets don’t work in IE7 (at least not on my PC).

    0
  15. 15

    thumbs up!

    0
  16. 16

    Why not considering a definition list for Tabs on the Left? Because the way it’s written now it’s just a left navigation…

    Semantic tabs should be represented with a tag, the describing the tab title, the containing the tab data.

    Edit: and the href of the links should be more than just an #. If someone has javascript disabled he/she can’t visit the other pages…

    0
  17. 17

    Great article :)

    0
  18. 18

    Five Minute Argument

    February 6, 2009 1:42 am

    I handle coloured list bullets with a javascript (via jQuery) approach which has the advantage of not polluting the markup. The colour is applied to each li and this works in IE7.

    0
  19. 19

    I think using a background image instead of the default bullets should work for those trying to get them to work for ie.

    @joggink
    I am trying to work on something similar to the tabbed example. The different tabs are meant to load different data from the server. So using the definition list method, would that mean that the tabs are built up by the definition terms while the content is the data?

    0
  20. 20

    Some great tips there, thanks Chris!

    0
  21. 21

    I wonder how you can detect the size of the browser window.

    0
  22. 22

    This is awesome idea, ask a professional.. Chris you rock

    0
  23. 23

    @Paul K: Well, in some cases I find it useless and a bit overhead to use ajax when you use tabs… Ajax can be an enhancement but most of the times it’s used in the wrong way…

    If you’re using a definition list then all the data is loaded at once, so when you click “documents” there is no delay in showing the content of the documents. This is usefull for a product data sheet or something where the different specs are displayed in different tabs. However, if you want to use the lefttabs with an Unordered list, it’s not actually a ‘tab object’, it’s more a left-side navigation. In that case (and if you want to load your content with ajax) you should at least use the right links. e.g. <a href=”documents.php” rel=”nofollow”>Documents</a>, when you do your ajax request, you can add an extra parameter to your request (for instance documents.php?ajax=true), so you know if you should display the content only, are the content wrapped in the page skeleton (html, body, divs, …)

    It’s in a nutshell, and I hope it’s a bit clear what I was trying to say :-)
    Sometimes the big idea of technologies are lost, like Ajax is for action, not for content. Just like the web was founded to share information, so never forget that anybody has to be able to access your information from any place, any time. Don’t forget the visual disabled, screenreaders, searchengines, mobile surfers, …. (in the left tab example some of the previously named groups have been ignored)

    0
  24. 24

    You know, if you want to have a wide design, but don’t want to lose that 5%, you could find the screen resolution of the guest (upon entry) and load the appropriate style sheet. This is assuming you don’t have inner content areas with a static width.

    Personally, I hate doing that… but e-commerce is e-commerce.

    0
  25. 25

    Food for thought on screen resolution width:

    1) Netbooks have very small screens, while most are 1024, it’s hard to say with some of the smaller screen designs coming out

    2) Not everyone uses browsers maximized, just because the display is 1024 or 1280+ doesn’t mean that every user uses them maxed, especially on macs, not maximized browser windows are the default, it becomes even more common with people working on multiple monitors.

    0
  26. 26

    @mikemike (February 5th, 2009, 8:16 pm)
    “Wow, this is about as old as my Tandy 2000 with XTree Gold.”
    mikemike, why do you even visit smashingmagazine? I saw you always try to insult authors.

    0
  27. 27

    Why not using list-style-image instead of background images?

    0
  28. 28

    @kevin

    I visit here because it used to be great. I don’t know if I just started getting frustrated because I’ve gotten so good that everything here seems noobish, or if it’s because the quality has gone down. I think the value back then was that this stuff was hard to find, and frankly it’s just easy now. I come here hoping for a treat, and get one only about twice a month (when there is a non-social icon set, or when there is a software review, eg text editors, etc.)

    0
  29. 29

    Chris — setting aside mikemike’s obvious disdain (man I hope I can be that cool someday) I thought this was a great article and a worthy complement to css-tricks.

    0
  30. 30

    mikemike,
    This site helps me alot. And then sometimes an article comes up that is yes, noobish. But so what? Not everybody is at the same level as YOU. Why are you vising sites that provides tutorials for noobies if your a pro? I find even the noobie articles reminds me of stuff and I think this site is great. When the time comes where I’m at a level where this stuff is no longer helpful, maybe then I’ll visit elsewhere. I don’t see the point in bashing the article or the site and it’s authors. GO ELSEWHERE if it’s too basic for you.

    0
  31. 31

    Thanks for the tips! The working example especially help. It’s easy to go inspecting it like that.

    0
  32. 32

    Wow! This is a fantastic post! Definitely going into my bookmark folder entitled Smashing!!!!!

    0
  33. 33

    That Beacon site is great. Love the concept! Is that a jQuery miracle as well?

    Signed,

    A non-programmer ;)

    0
  34. 34

    How can i create a image sequence gallery [ i mean image thumbnail links ] in a grid with CSS ?

    0
  35. 35

    Yes, Chris, Ask SM is one of the best ideas of SM!!

    0
  36. 36

    What about people who don’t keep their windows maximized? Shouldn’t we at least assume 800×600 for them, or is horizontal scrolling what you need here?

    0
  37. 37

    People with 800×600 screens see scrollbars everywhere but you know what ? they don’t care. They prefer to keep their money or maybe they can’t afford to buy a new screen.
    Anyway they’re probably not the most interesting customers you can dream of.

    When you don’t know what to do, look at your local amazon website : they make real studies, user tests and not only assumptions.

    0
  38. 38

    Aloha, this is a fantastic article, I hope to see more and more articles like this. A great book on spacing and simplicity is Save The Pixel by Ben Hunt. I’ve noticed also that many sites are built for wider screen resolutions which I definitely think is a great idea. Will their be an article to address fluid vs. fixed widths in designs?

    0
  39. 39

    Very useful article! Thx!

    @Eric Rasmussen, Chris Coyier:
    I once set up a method of a tab menue with :hover using a .htc-file for the IE6. You can put all kind of content in there and as far as i can see it’s bulletproof. Check the demo here.

    0
  40. 40

    Hey…

    Amazing work….u rockkk

    Amar

    0
  41. 41

    your modal example will drive anyone who has cookies turned off absolutely nuts.

    0
  42. 42

    @”Different Color for List Item Bullets”/ the first example, which is no contains image using, doesn’t work on ie 7.0.
    we can say that “this method doesn’t work for i.explorer 7.0″ i think.

    i’ve tried to explain a problem that must be solved in my opinion

    0

↑ Back to top