So I am trying to get an arrow to appear underneath a link once a mouse is hovering over it. I added the following css code ul#page_nav li a:hover { background: transparent url(/images/bg_topnav_hover.gif) no-repeat bottom center; } But once I go over the text with my mouse the image appears in the center of the text. It should appear in the center but underneath the text not on it. To make things more clear took a screenshot. . Anyone think they can help me out in getting the arrow appear directly underneath the text.
I'm not sure what your CSS code for your anchor tags is, but have you tried adding padding to the bottom? (Such as "a{padding-bottom:5px;}" or "a{padding:0px 0px 5px 0px;}", substituting the values you want for the padding.) What seems to be happening is that the image is indeed appearing where it's supposed to, at the bottom of the link. However, as links are inline elements, all the space it's taking up is what you're seeing. You could try "display:block" or "float:left" for the link, so that it takes up the whole li. Let us know if that works.
Fixed it thanks a lot ;] I added the following code ul#page_nav li a { text-decoration:none; display: block; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 8px 8px 5px 1px; font-size: 12px; display:block }
Cool. Glad it worked! (Not sure if it was a typo, but it looks like you have "display:block" listed twice. Just a heads up! ; ) Take care.