Doctyper » Quick Tip http://doctyper.com Doctyper is the website of Richard Herrera, a front-end developer with a strong commitment to the web standards movement. Sat, 31 Jul 2010 00:17:23 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Substitute :last-child for :first-child for IE 7 support http://doctyper.com/archives/200912/substitute-last-child-for-first-child-for-ie-7-support/ http://doctyper.com/archives/200912/substitute-last-child-for-first-child-for-ie-7-support/#comments Tue, 01 Dec 2009 23:05:29 +0000 doctyper http://doctyper.com/?p=56 Consider the following:

ul li {
   display: inline;
   margin-right: 10px;
   padding-right: 10px;
   border-right: 1px solid red;
}

ul li:last-child {
   margin-right: 0;
   padding-right: 0;
   border-right: 0;
}

This bit of CSS would give you perfect line separators in IE8+. But since IE 7 supports the :first-child pseudo-class, we can do one better:

ul li {
   display: inline;
   margin-left: 10px;
   padding-left: 10px;
   border-left: 1px solid red;
}

ul li:first-child {
   margin-left: 0;
   padding-left: 0;
   border-left: 0;
}

Same* result, with more browser support.
*Substitute for “sane”.

]]> http://doctyper.com/archives/200912/substitute-last-child-for-first-child-for-ie-7-support/feed/ 0 RGBa makes a great debugging tool http://doctyper.com/archives/200912/rgba-makes-a-great-debugging-tool/ http://doctyper.com/archives/200912/rgba-makes-a-great-debugging-tool/#comments Tue, 01 Dec 2009 22:31:09 +0000 doctyper http://doctyper.com/?p=48 With 24 Ways pushing RGBa into the foreground today, I thought I’d share a quick debugging tip. Using RGBa can help while you’re debugging element positioning. For the adventurous, combine with a debug class:

.debug {
  background: rgba(255, 0, 0, 0.5);
}

]]> http://doctyper.com/archives/200912/rgba-makes-a-great-debugging-tool/feed/ 0