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
    New Coder
    Join Date
    Apr 2006
    Location
    The Netherlands, Nijmegen
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Insane of the PIXEL again!!!! Need help!

    Hi back again with a pixel problem.

    IE shows it good but FireFox shows some spaces between the images. I tried like hunderd different ways but it didnt work. Only one thing worked but then the rest of the div layout messed up.... I changed the doctype to a different one but still problems...

    The code is very simple but still you see space between the images. The purpose is the put these images directly under eachother.

    I made the layout first with div-layers but i got insane of it so i made it with a table layout but still the S(*)F&S(&FS pixel

    Need help!

    Here is the direct like to the page.

    strange.htm

    And here is the easy code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Layout</title>
    	<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    	<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    	<meta name=vs_defaultClientScript content="JavaScript">
    	<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<link name="stylesheet" rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    
    <style>
    html, body
    
    {
    
     margin: 0;
    
     padding: 0;
    
     border: 0;
    
     background-color: #F0E8E8;
    
     color:#000;
    
    }
    </style>
      
    <body>
    
    <table border="0" cellpadding="0" cellspacing="0">
    <tr><td><img src="img/mkjactie_tmobile.gif" border="0" width="70px" height="105px" class="ProviderImg"></td></tr>
    <tr><td><img src="img/mkjactie_productplus1.gif" border="0" width="72px" height="47px"></td></tr>
    <tr><td><img src="img/mkjactie_mobiel.gif" border="0" width="70px" height="105px" class="MobielImg"></td></tr>
    <tr><td><img src="img/mkjactie_productplus2.gif" border="0" width="72px" height="47px"></td></tr>
    <tr><td><img src="img/mkjactie_kado.gif" border="0" width="70px" height="105px" class="KadoImg"></td></tr>
    </table>
    
    </body>
    
    </html>

  • #2
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I thought you have to add:
    Code:
    table img
    {
    font-size: 0;
    line-height: 0;
    }
    Correct me if I'm wrong.

  • #3
    New Coder
    Join Date
    Apr 2006
    Location
    The Netherlands, Nijmegen
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Masterslave
    I thought you have to add:
    Code:
    table img
    {
    font-size: 0;
    line-height: 0;
    }
    Correct me if I'm wrong.
    Im not gonna correct you im gonna thank you!!!!!!!!!!!!

    Super!

    Save me a nervous-breakdown!!

  • #4
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hehe, all right then.
    It's odd that you've to add that to a image... welcome in the wonderfull world of HTML/CSS.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    It's not the font-size property that causes/fixes that, it's the line-height. Images are inline elements so there is some space that comes from the default line-height (for text you might have). Setting the image to display: block; or, as Masterslave suggested, the line-height to zero fixes that.
    Yeah, line height is a really nasty hidden thing that gave me some hard times too.


  •  

    Posting Permissions

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