Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    Paragraph background image

    The background-image of a <p> is not showing fully.
    I have an online example at http://www.jamiewest.org.uk/css/codingforums/
    and the button being at
    http://www.jamiewest.org.uk/css/codi.../button_bg.gif
    Would using a min-height: be acceptable here?

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi rafiki,

    You could just use height:25px which will show the image.

    I believe IE 6 has problems with min-height and min-width, so sticking to just "height" will probably be easiest.

    Drew

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    I got that working now, I tried to change it to an anchor <a> tag and it has gone back to just covering the text.
    Any ideas on this one?
    Thanks
    Rafiki.

  • #4
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    Arrow


    Anyone?

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there rafiki,

    as the a element is an inline element you will need to use this sort of coding....
    Code:
    
    CSS
    
    <style type="text/css">
    #button {
        display:block;
        width:128px;
        line-height:25px;
        color:#000;
        text-decoration:none;
        text-align:center;
        background-image:url(button_bg.gif);
     } 
    </style>
    
    HTML
    
    <a id="button" href="#">home</a>
    
    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •