CS3 Noob Issue- Image issue

Discussion in 'Web Design and Development' started by keysersoze, Sep 15, 2008.

  1. keysersoze macrumors 68000

    keysersoze

    Joined:
    Jan 6, 2004
    Location:
    NH
    #1
    Hi,

    I have created a table consisting of a number of rows and colums. I insert an image, and align everything, but when I preview in Safari or Firefox, a chunk of white space gets inserted above and below my image. Any suggestions how to get rid of that white space? I set padding and cell spacing to zero. :eek:
     

    Attached Files:

  2. craigverse macrumors 6502

    craigverse

    Joined:
    Dec 8, 2006
    Location:
    Reno, NV
    #2
    You need to tell it to not have margins or something. I could so be wrong. idk what I'm talking about probably but I think something like...

    <img src="" style="margin:0;padding:0">

    would work.
     
  3. keysersoze thread starter macrumors 68000

    keysersoze

    Joined:
    Jan 6, 2004
    Location:
    NH
    #3
    Thanks for the reply; I did that, and it zapped the margins on the sides, but had no effect on cell spacing... thanks though!
     
  4. craigverse macrumors 6502

    craigverse

    Joined:
    Dec 8, 2006
    Location:
    Reno, NV
    #4
    If you want add the code here and I'll take a look.
     
  5. craigverse macrumors 6502

    craigverse

    Joined:
    Dec 8, 2006
    Location:
    Reno, NV
  6. keysersoze thread starter macrumors 68000

    keysersoze

    Joined:
    Jan 6, 2004
    Location:
    NH
    #6
    hehehe thanks for the link - I am off to read it through.

    Here's my code, if you want to look at it still. Thanks!
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style1 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #222222;
    }
    .style3 {
    	font-size: 28px;
    	color: #339999;
    }
    .style4 {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 28px;
    	color: #999999;
    }
    .style5 {font-size: 10px}
    -->
    </style>
    </head>
    
    <body>
    <table width="800" border="0" cellpadding="0" cellspacing="0" style="margin:0;padding:0">
      <tr valign="top">
        <td width="30"> </td>
        <td width="55"> </td>
        <td width="49"><img src="Images/vertgradientA1_2_3.png" width="49" height="30" align="top" /></td>
        <td width="72"><img src="Images/vertgradientA1_2_3.png" width="72" height="30" align="top" /></td>
        <td width="49"><img src="Images/vertgradientA1_2_3.png" width="49" height="30" align="top" /></td>
        <td width="9"> </td>
        <td width="89"> </td>
        <td width="123"> </td>
        <td width="5"> </td>
        <td width="133"> </td>
        <td width="9"> </td>
        <td width="84"> </td>
        <td width="93"> </td>
      </tr>
      <tr valign="top">
        <td> </td>
        <td align="right"> </td>
        <td colspan="3" align="left"> </td>
        <td colspan="5" align="right" valign="middle"> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr valign="top">
        <td> </td>
        <td> </td>
        <td> </td>
        <td><img src="Images/vertgradientA1_2_3.png" width="49" height="30" hspace="0" vspace="0" border="0" /></td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
      <tr valign="top">
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"><p><img src="lightbulb.jpg" width="72" height="100" hspace="0" vspace="0" border="0" align="top" style="margin:0;padding:0"/></p>    </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
        <td width="0"> </td>
      </tr>
      <tr valign="top">
        <td> </td>
        <td> </td>
        <td width="0"> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    </body>
    </html>
     
  7. craigverse macrumors 6502

    craigverse

    Joined:
    Dec 8, 2006
    Location:
    Reno, NV
    #7
    Where you have your lightbulb image show up you need to remove the <p> which signifies there to be a paragraph which makes extra room before and after it just like a paragraph would be formatted.

    From reading the link I posted I suggest you add

    Code:
    tr.decoration img {display: block;}
    to your style stuff in the beginning and then in the code when you have a table row you need to have it say

    Code:
    <tr class="decoration"
    for your rows with tables.

    sooooo.....


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #222222;
    }
    .style3 {
    font-size: 28px;
    color: #339999;
    }
    .style4 {
    font-family: "Times New Roman", Times, serif;
    font-size: 28px;
    color: #999999;
    }
    .style5 {font-size: 10px}
    tr.decoration img {display: block;}
    -->
    </style>
    </head>
    
    <body>
    <table width="800" border="0" cellpadding="0" cellspacing="0" style="margin:0;padding:0">
    <tr class="decoration" valign="top">
    <td width="30"> </td>
    <td width="55"> </td>
    <td width="49"><img src="Images/vertgradientA1_2_3.png" width="49" height="30" align="top" /></td>
    <td width="72"><img src="Images/vertgradientA1_2_3.png" width="72" height="30" align="top" /></td>
    <td width="49"><img src="Images/vertgradientA1_2_3.png" width="49" height="30" align="top" /></td>
    <td width="9"> </td>
    <td width="89"> </td>
    <td width="123"> </td>
    <td width="5"> </td>
    <td width="133"> </td>
    <td width="9"> </td>
    <td width="84"> </td>
    <td width="93"> </td>
    </tr>
    <tr class="decoration" valign="top">
    <td> </td>
    <td align="right"> </td>
    <td colspan="3" align="left"> </td>
    <td colspan="5" align="right" valign="middle"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    </tr>
    <tr class="decoration" valign="top">
    <td> </td>
    <td> </td>
    <td> </td>
    <td><img src="Images/vertgradientA1_2_3.png" width="49" height="30" hspace="0" vspace="0" border="0" /></td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    </tr>
    <tr class="decoration" valign="top">
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"><img src="lightbulb.jpg" width="72" height="100" hspace="0" vspace="0" border="0" align="top" style="margin:0;padding:0"/></td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    <td width="0"> </td>
    </tr>
    <tr class="decoration" valign="top">
    <td> </td>
    <td> </td>
    <td width="0"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>
    Something like that, it's a bit messy though. >_<

    I think that'd work.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    A quick note to keysersoze. When posting HTML code, please use the HTML code button in the toolbar (it's the icon with < >). It will make the post much more readable. You can go back and edit it t0o, just place [ HTML ] CODE [ /HTML ] around the code, without the spacing.
     
  9. keysersoze thread starter macrumors 68000

    keysersoze

    Joined:
    Jan 6, 2004
    Location:
    NH
  10. craigverse macrumors 6502

    craigverse

    Joined:
    Dec 8, 2006
    Location:
    Reno, NV
  11. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #11
    I'm surprised there hasn't been an "errrmmmm, tables?" post yet.
     
  12. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
    Now there is.

    Just as an informal suggestion to the OP, on your next project try to avoid using tables for layout and instead use div's. This means learn how div's work, the float property, how to align content within div's and how to align div's next to each other. Then change your DTD to XHMTL strict once you're proficient at it.

    Why?

    • XHTML strict is very cross browser compatible compared to HTML/transitional.
    • Less code.
    • Separate content from style, entirely (don't even use "style=" attributes as you first tried in your table's HTML)
    • Tables in XHTML should only be used for tabular data.
    There ya go, 7on, it's official! :)

    -jim

    ps: Can an admin of macrumors.com turn this response into a bbcode tag or something to automate it please - thanks (I am just kidding) ;)
     
  13. keysersoze thread starter macrumors 68000

    keysersoze

    Joined:
    Jan 6, 2004
    Location:
    NH
    #13
    So explain to me the prevalence of using tables in layouts, especially in tutorials? Is it just because they are more easily thrown together? Obviously I haven't much experience/training with site construction, and am just dubbing around, but am interested to hear more of an argument from you for the use of Div's over a table, other than the few listed above. Maybe translate a bit for the beginning designer on how using Div's ultimately impacts end users (other than cross browser compatibility)? I could research the advantages on the web, but considering you sound like you know what you are talking about, I'd be interested in hearing it from you.

    I guess I should have labeled my title 'newb' not 'noob' too, right? :eek:

    EDIT: OK, I did what was suggested. I scrapped the table and went with divs and its a whole new world. Once I figured out what I was doing, it was a whole lot easier actually. Thanks for pointing me in that direction.
     

Share This Page