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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Hythe, Hampshire
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Really confused by 'background-image' behavior

    Ok,

    Well I've spent almost 2 hours trying to work this one out, and have given up - therefore I bet it's really easy and I've just missed it!

    Basically I've created a table with the first row being 110 high, the same height as the associated logo GIF. I'm then adding a background image (again 110 high) to fill any remaining space in the cell.

    The problem is I'm getting 2 or 3 white pixels below the logo, as if there's a <BR> following the <IMG> tag???? The really fun part is that if I increase the size of the background image to 113, it fills the white space, which seems to suggest there is something around the logo increasing the row height? But, if I remove the background-image from the CSS, the excess pixels disappear from below the logo!!!!

    I can't get my head around this one, so any advice would be much appreciated.

    Regards,
    John Greenwood.

    The HTML is;
    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="1000" class="page">
    <!-- Logo -->
      <tr height="110">
        <td colspan="5" class="logo"><img src="/images/logo.gif" alt="" height="110" width="362" /></td>
      </tr>
    <!-- Photos -->
      <tr height="158">
       etc etc.....
    The CSS is;
    Code:
    body {
        background: #ff9900;
        font-family: arial, verdana, sans-serif;
        font-size: 12px;
        text-align: left;
        margin: 10px;
    }
    
    .page {
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #ffffff;
    }
    
    .title {
        background-image: url('/images/logo-background.gif');
        border-bottom: 2px solid #000000;
    }
    Last edited by GreenwoJ; 02-24-2009 at 02:17 PM.

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Try adding this:

    img {display:block;}
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    GreenwoJ (02-24-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by adding
    Code:
    td.logo img{
    float:left;
    }
    into your CSS.

    PS: Do you know why tables are very bad for layout?

    Add [CODE][/CODE] tags around your code while posting here.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    GreenwoJ (02-24-2009)

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by jerry62704 View Post
    Try adding this:

    img {display:block;}
    And here’s the reason why: https://developer.mozilla.org/en/Ima...ysterious_Gaps

    I agree that tables should never be used for a page layout. They are only meant for tabular data such as a phone directory or stock market listings or similar stuff.

  • Users who have thanked VIPStephan for this post:

    GreenwoJ (02-24-2009)

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Hythe, Hampshire
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hiya,

    Quote Originally Posted by jerry62704 View Post
    Try adding this:

    img {display:block;}
    Thanks for that, now I need to go and try and understand 'why' it has fixed things

    I've not posted on here before, but you came well recommended by a web developer contact of mine. This is the way forums are supposed to work, sensible answers really quickly - very impressive!

    Chat soon.

  • #6
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    hi John,

    Add this to your css:

    Code:
    img
    {
      border:0;
      margin:0;
      padding:0
    }
    All the best - redspyder
    Last edited by redspyder; 02-24-2009 at 02:46 PM.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by redspyder View Post
    hi John,

    Add this to your css:

    Code:
    img
    {
      border:0;
      margin:0;
      padding:0
    }
    Which should take care of any browser defaults affecting the image […]
    Images have no default margin or padding so there’s no need to add this. I’ve posted the reason for the gaps above.

  • #8
    New Coder
    Join Date
    Jan 2009
    Location
    Cornwall - UK
    Posts
    47
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by VIPStephan View Post
    Images have no default margin or padding so there’s no need to add this. I’ve posted the reason for the gaps above.
    Sorry about that, post corrected.

    All the best - redspyder

  • #9
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Images are inline items like text. And like text they have a space at the bottom for descender on letters (like "y"). By changing it to block, you eliminate the need for them so the whole thing sits on the bottom of the line instead of above it.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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