OpenRoad + Mod7

Two pioneering organizations, together at last.

OpenRoad is pleased to announce the acquisition of creative agency Mod7.

Read the letter from our Principal

No thanks, continue to website

OpenRoad is pleased to announce the acquisition of creative agency Mod7. Read the letter from our Principal.

toggle mod7

Using a background instead of a list-style-image...

Posted on July 18, 2006 in Design by Mod7

This forum had a post regarding a good cross-browser list style hack that gives one more precise control over custom bullet point graphics. The gist is here:

1. HTML:

  • Issue 5 - October 12, 2005
  • Issue 4 - August 22, 2005
  • Issue 3 - July 27, 2005

2. CSS: (comments added for post)
#newsList ul { /* for positioning and styling preferences */
padding:0;
margin:0;
}
#newsList li a, #newsList li a:visited {
list-style-type:none; /* removes default bullet */
background-image:url(../img/arrow_red.gif);
background-repeat: no-repeat; /* ONE bullet only please */
background-position: 0.45em; /*.45em from top (vertical) */
padding-left:12px; /* space between bullet and text */
/* styling options below */
line-height:1.5em;
font-weight:bold;
color:#000;
text-decoration:none;
}

Pretty painless and degrades nicely to boot. Noo doot aboot it.
Back