WordPress.com

1. nrepair
   Member
   Nov 22, 2007, 11:41 PM

   I am using little icons in the meta section of my posts. They display perfectly in FF, but if there are enough tags to make the line wrap, then the tag icon won't display in IE. I know this makes no sense, but check out my blog in FF and then in IE and you'll see what I mean.

   Here is the CSS that I'm using to control the image placement:

   .author.vcard {
   background:url('http://inrepair.files.wordpress.com/2007/11/user2.png') no-repeat;
   padding-left:18px;
   }

   .cat-links {
   background:url('http://inrepair.files.wordpress.com/2007/11/folder1.png') no-repeat;
   padding-left:18px;
   }

   .tag-links {
   background:url('http://inrepair.files.wordpress.com/2007/11/tag1.png') no-repeat;
   padding-left:18px;
   }

   .edit-link {
   background:url('http://inrepair.files.wordpress.com/2007/11/edit1.png') no-repeat;
   padding-left:18px;
   }

   .comments-link {
   background:url('http://inrepair.files.wordpress.com/2007/11/comment1.png') no-repeat;
   padding-left:18px;
   }

   .entry-meta,.entry-meta a {
   font-size:1em;
   font-weight:500;
   color:#666;
   margin-top:15px;
   }

   Any ideas?

2. sunburntkamel
   Member
   Nov 30, 2007, 5:53 AM

   your icons default to being positioned top left. firefox gives you the top left position on the first line of an inline element. Internet explorer gives you top left of the rectangular block that the inline element takes up. so your icons are actually on the first line vertically, but at the start of the second line, horizontally. since your spans don't actually occur there, the icon is hidden.

   there's not really a fix for this, or even a workaround. you can set your spans to display: block; but that will force line breaks, which is probably not what you want.

Topic Closed

This topic has been closed to new replies.