29 January 2012

IE7 and bulleted lists' margins

For a recent project, we noticed that IE7 was giving us fits with unordered lists: It was "hiding" the actual bullet of the item, but showed the text. Some research revealed that it was flushing everything to the left because we had this in our CSS:
#main-content ul{ margin-left:0 }
The solution? Use the hack to reference only IE7 (the hash tag):
#main-content ul{
 margin-left:0;
 /* 
  The next two lines are only visible to IE7. This fixes the 
  issue of IE7 not showing the bulleted items; they were 
  flushed left so far that the bullet was mostly hidden. 
  All other browsers ignore the next two lines.
 */
 #margin:0 5px 0 42px !important; 
 #padding:0; 
}