How to target the parent div from child div?

Need CSS Help - Child 2px lower than Parent?

• Hi I have the following CSS: table.user3_pill { margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; padding: 0; } td.user3_pill_l { background: url(../images/style/user3_pill_l.png) no-repeat; width: 10px; height: 16px; margin: 0; } td.user3_pill_m { background: url(../images/style/user3_pill_m.png) repeat-x; width: auto; height: 16px; padding: 0; margin: 0; } td.user3_pill_r { background: url(../images/style/user3_pill_r.png) no-repeat; width: 11px; height: 16px; margin: 0; } #user3_pillmenu { white-space: nowrap; float: left; margin: 0; padding: 0; } #user3_pillmenu ul, #user3_pillmenu ul { margin: 0; padding: 0; list-style: none; } #user3_pillmenu li { float: left; background-image: url(../images/style/user3_pill_s.png); background-repeat: no-repeat; background-attachment: scroll; background-position: top left; height: 16px; margin: 0; padding: 0; } #user3_pillmenu a { display: block; padding: 0px 5px 0px 6px; line-height: 16px; } #user3_pillmenu a:link { text-decoration:none; font-family: Arial Black, Gadget, sans-serif; font-size: 14px; text-align: center; color: #000000; } #user3_pillmenu a:visited { text-decoration:none; font-family: Arial Black, Gadget, sans-serif; font-size: 14px; text-align: center; color: #000000; } #user3_pillmenu a:hover { text-decoration:none; font-family: Arial Black, Gadget, sans-serif; font-size: 14px; text-align: center; color: #000000; } The menu seperator image: url(../images/style/user3_pill_s.png) shows up 2 px below the left right and middle images here is the sample html: <div id="user3"> <table cellpadding="0" cellspacing="0" class="user3_pill"> <tr> <td class="user3_pill_l"> </td> <td class="user3_pill_m"> <div id="user3_pillmenu"> <ul id="mainlevel-nav"><li><a href="/joomla15full/index.php?option=com… class="mainlevel-nav" >About Joomla!</a></li><li><a href="/joomla15full/index.php?option=com… class="mainlevel-nav" >Features</a></li><li><a href="/joomla15full/index.php?option=com… class="mainlevel-nav" >News</a></li><li><a href="/joomla15full/index.php?option=com… class="mainlevel-nav" >The Community</a></li></ul> </div> </td> <td class="user3_pill_r"> </td> </tr> </table> </div> I can't seem to determine why the separator is lower by 2px than the other images? Any help or suggestions would be greatly appreciated

• Answer:

  I couldn't duplicate your problem because I don't have the images but I can think of one reason. It could be that your images have a bottom white border of 2px high and you think that the separator is 2px lower but in fact it is sticking to the bottom of the images. Or perhaps the image of your seperator has a top white border of 2px high but you cant see it. Open your images with photoshop if possible and keep pressing control+ until the view is maximum and look at the bottom of your images and the top of your separator image. If you see those extra 2 pixels, crop them. Of course there could be another reason that I can't think of at the moment because I don't see your website and how it looks. Anyway, as a quick solution try adding a margin-top:-2px; to the style of the separator and hopefully it will take it up by 2px.