CSS Trick – Image inside a div inside a list item

While working on some web design for a colleague of mine the other day, I came across this cool css trick that I had never seen or read about.  It was so different that I wanted to share it with you.  I wish I could take credit for this, but I can’t.  Thanks goes to Michael Davis of I’m Not Marvin for putting this one together.  I’m just relaying the trick.

So, I came across a problem where I needed a sort of box-shadow to follow the text in a menu item.  The shadow itself was done in photoshop and saved as a .png file and uploaded to wordpress.  The shadow itself couldn’t be one length as the list items were all different lengths.

So I started by adding a div to each list item with the css class of image in each one.  Then I put div after that and called style=”clear:both” to get rid of any positioning that might have been inherited.  Here’s the way it looked:

<ul>
<li><div class=”image”>Guest Calendar</div><div style=”clear:both”></div></li>
<li><div class=”image”>Event Calendar</div><div style=”clear:both”></div></li>
<li><div class=”image”>Podcast Archive</div><div style=”clear:both”></div></li>
<li><div class=”image”>Blog Archive</div><div style=”clear:both”></div></li>
</ul>

Then I added the CSS like this:

ul li .image {
padding: 8px 75px 8px 20px;
background-position: top right;
background-image:  url(textshadow2.png);
float: left;
}

So, clearing any relative or absolute positioning in the div allowed me to use float:left, and the I positioned the background image to the top right.  If you don’t position it to the top right, it automatically goes top left and then it stretches all the way to the right.  The padding of 75px right is what will push it over as well as the float:left styling.

In this way you are actually using the image to regulate the size of the menu item.  I had a whole set of other code on the “ul li” that looked as follows:

ul li {
background-image: url(dropshadow.png);
background-color: #bb0000;
list-style-type: none;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
font-weight: normal;
margin: 0px 0px 0px 0px;
}

So you can see here that there really isn’t any positioning styles on the “ul li” itself.  The drop shadow was added to run the length of the list item on the top with a height of about 5px.  Again, a .png image.  So now I have 2 images in the same list item!  Cool, huh?

The cool part for me though was that now the text shadow will always only go as far as the text itself goes.  In all honesty, I’m not 100% sure why, I just know that it works.

I’d love to hear your comments and/or explanations as to why this worked so I have a better understanding.  Sometimes you don’t need to understand it, you just need to know that it works.

Until next time…. may your code validate and the winds be ever at your back.