Will not show the entire hovered image

Discussion in 'CSS' started by HellBomb, Jun 30, 2010.

  1. #1
    Ok, i have been messing with this for 2 days and cannot get it to work, im probably just to flustered with it to get it to work. Well my problem is it will now show the entire background image it only should about 50% of the image height wise and 100% of the image width wise. I need it to show 100% height wise or it looks very stupid.

    CSS
    a.thanks { background:url(themes/twisted_night/buttons/thanks.gif) no-repeat left; padding:0; border 0; }
    a.thanks:hover { background:url(themes/twisted_night/buttons/thanks_hover.gif) no-repeat left; }
    a.thanks img {width:81px; height:19px; }
    
    Code (markup):
    HTML
    <a class="edit" href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="clear.gif" alt="$vbphrase[edit_delete_message]" border="0" />&nbsp;</a>
    
    Code (markup):

     
    HellBomb, Jun 30, 2010 IP
  2. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do you not have a live link to this problem, it will make it much easier to debug. Especially as we have no access to the image you're using, and it is written with PHP functions!
     
    pmek, Jul 1, 2010 IP
  3. HellBomb

    HellBomb Active Member

    Messages:
    125
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    80
    #3
    You can ignore the php functions that have to css properties connected with them and sorry but i am unable to provide a link to the project as its under a local development server on my computer. But i will upload the images so that you can see that problem.

    capture.png is what it is showing, edig.gif is what its supposed to be showing. so you can see it is not showing that much of the image.
     

    Attached Files:

    HellBomb, Jul 1, 2010 IP
  4. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Have you tried using a CSS reset at all? Here is a blog post I wrote on what to do and how to use it, It's hard to say exactly what the problem i as no one will be able to replicate it without the actual code.
     
    pmek, Jul 2, 2010 IP
  5. HellBomb

    HellBomb Active Member

    Messages:
    125
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    80
    #5
    actually because of the way i did it the height of the displayed image was limited because of the line height. I solved this problem by adding
    padding:5px 2px;
    Code (markup):
    to the a.thanks element.
     
    HellBomb, Jul 2, 2010 IP