www.webdeveloper.com
Results 1 to 12 of 12

Thread: Image not filling container

  1. #1
    Join Date
    Jan 2010
    Posts
    10

    Image not filling container

    Hi All

    I have a test site at: http://purple-mouse.co.uk/test/

    Does anyone know why the img container shows the background under the image?

    I can live with it but would love to know how to control it.

    thanks

    Mandy

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    I'm not sure I understand your problem (can't see the connection between your topic title and the question in your post). So I guess I'll have to ask some clarification questions.

    What is it exactly that you are wanting to happen?

  3. #3
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by Sup3rkirby View Post
    I'm not sure I understand your problem (can't see the connection between your topic title and the question in your post). So I guess I'll have to ask some clarification questions.

    What is it exactly that you are wanting to happen?
    Sorry I didn't make it clear.

    The image has a transparent word so the background of the a:link shows through and changes on hover. The image doesn't cover the whole of the a:link though so the background shows as an underline. I would like the image to show the background through the transparent central area but not beneath.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    You can always try something like
    HTML Code:
    #navMenu img { margin-bottom: -3px; }
    But that's more of a hack than anything. I do hate to offer a 'quick fix', but maybe after work I can take another look and pinpoint where the extra space is coming from.

  5. #5
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by Sup3rkirby View Post
    You can always try something like
    HTML Code:
    #navMenu img { margin-bottom: -3px; }
    But that's more of a hack than anything. I do hate to offer a 'quick fix', but maybe after work I can take another look and pinpoint where the extra space is coming from.
    That's very kind. I was thinking of a hack like that but really wanted to get the bottom of why it happens. I thought it was the default padding on the UL but seems not as I've styled everything to padding:0;

    If what I'm doing is bad practice and there is another way, please let me know. I'm self taught and so must have lots of bad habits.

    Mandy

  6. #6
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    221
    Try "text-decoration:none;" in your link style? Could be that the underline isn't apparent in the :link state ?

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,472
    Hi there mandysutton,

    the "img element" by default is an "inline element" and,
    as such, has spacing to the right and to the bottom.

    To remove it add the highlighted attribute to your CSS img rules...
    Code:
    
    img {
        display:block;
        width:100%;
        border: 0;
    }
    Further reading:-

    coothead

  8. #8
    Join Date
    Jan 2010
    Posts
    10
    Thanks for both suggestions above. Neither work - and I checked out the further reading too.

    Quite a mystery!

  9. #9
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,472
    Hi there mandysutton,

    Neither work - and I checked out the further reading too.
    Do you actually believe that I would go to the trouble of giving you the
    solution to, and "Further reading" about your problem if it did not work.

    Here is the test code that I used...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <base href="http://purple-mouse.co.uk/test/">
    
    <meta charset="utf-8">
    
    <title>Testing Responsive Nav img test edit</title>
    
    <style>
    html, body,ul,ol,li,img,a {
        margin:0;
        padding:0;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     }
    html {
        overflow-y:scroll;
     }
    body{
        background-color:#111;
        color:#ccc;
     }
    img {
        display:block;
        width:100%;
        border:0;
     }
    #navMenu li {
        list-style: none;
        background: #111;
        width:50%;
        margin:0 25%;
     }
    #navMenu a:link ,#navMenu a:visited{
        background: pink;
        display:block;
        text-decoration: none; 
     }
    #navMenu a:hover {
        background:#f00;
     }
    
    @media screen and (min-width: 500px) {
    #container{
        max-width:1000px;
        margin:auto;
     }
    #navMenu li {
        float: left;
        width:16.66%;
        margin:0 ;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <div id="navMenu">
    <ul>
     <li><a href="1.php"><img src="home.png" alt="" /></a></li>
     <li><a href="2.php"><img src="home.png" alt="" /></a></li>
     <li><a href="3.php"><img src="home.png" alt="" /></a></li>
     <li><a href="4.php"><img src="home.png" alt="" /></a></li>
     <li><a href="5.php"><img src="home.png" alt="" /></a></li>
     <li><a href="6.php"><img src="home.png" alt="" /></a></li>
    </ul>
    </div>
    </div>
    
    </body>
    </html>

    coothead

  10. #10
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by coothead View Post
    Hi there mandysutton,


    Do you actually believe that I would go to the trouble of giving you the
    solution to, and "Further reading" about your problem if it did not work.

    Here is the test code that I used...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <base href="http://purple-mouse.co.uk/test/">
    
    <meta charset="utf-8">
    
    <title>Testing Responsive Nav img test edit</title>
    
    <style>
    html, body,ul,ol,li,img,a {
        margin:0;
        padding:0;
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
     }
    html {
        overflow-y:scroll;
     }
    body{
        background-color:#111;
        color:#ccc;
     }
    img {
        display:block;
        width:100%;
        border:0;
     }
    #navMenu li {
        list-style: none;
        background: #111;
        width:50%;
        margin:0 25%;
     }
    #navMenu a:link ,#navMenu a:visited{
        background: pink;
        display:block;
        text-decoration: none; 
     }
    #navMenu a:hover {
        background:#f00;
     }
    
    @media screen and (min-width: 500px) {
    #container{
        max-width:1000px;
        margin:auto;
     }
    #navMenu li {
        float: left;
        width:16.66%;
        margin:0 ;
      }
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <div id="navMenu">
    <ul>
     <li><a href="1.php"><img src="home.png" alt="" /></a></li>
     <li><a href="2.php"><img src="home.png" alt="" /></a></li>
     <li><a href="3.php"><img src="home.png" alt="" /></a></li>
     <li><a href="4.php"><img src="home.png" alt="" /></a></li>
     <li><a href="5.php"><img src="home.png" alt="" /></a></li>
     <li><a href="6.php"><img src="home.png" alt="" /></a></li>
    </ul>
    </div>
    </div>
    
    </body>
    </html>

    coothead
    I'm sorry to cause offence - maybe I didn't implement your solution properly - I will try again.

  11. #11
    Join Date
    Jan 2010
    Posts
    10
    Thanks to coothead - It DOES work. I must have done something stupid when I tried before. It taught me a good lesson in that it helps to have the style in the head rather than a separate stylesheet while testing so you can be sure you are editing the right css.

  12. #12
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,472
    Hi there Mandy,

    you did not cause any offence, rather surprise that you dismissed it
    even with the comprehensive explanatory link that was supplied.

    But me though, being a bald headed old fart, am definitely not infallible.

    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles