Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CS3 Noob Issue- Image issue

keysersoze

keysersoze

macrumors 68000
Original poster
Jan 6, 2004
1,596
11
NH
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:
 

Attachments

  • Picture 1.png
    Picture 1.png
    34.7 KB · Views: 145
  • Picture 2.png
    Picture 2.png
    10.2 KB · Views: 143
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.
 
craigverse said:
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.
Click to expand...

Thanks for the reply; I did that, and it zapped the margins on the sides, but had no effect on cell spacing... thanks though!
 
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>
 
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.
 
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.
 
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) ;)
 
SrWebDeveloper said:
Now there is.
...
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back