table has unwanted gaps

[nicrose]

Hi I'm having a problem with a table. I'm using Dreamweaver to create a table. It all has to be in html with no CSS. I want text in the table and I want to be able to shorten or lengthen the table vertically if we have to edit the text later.

The problem is, I get these gaps between the top and middle row, and the bottom and middle row. It's almost perfect in Firefox, but when I upload it to the website, the gaps are really pronounced. I guess this has to do with the size of the text in the middle. Should I be using some kind of inline CSS so that the middle cells on the right and left will lengthen or shrink up, depending on how much text there is in the middle? Or is there a better way to go about this?

I'm also not sure why the background color of the middle cell is not showing up in Firefox. Any suggestions are much appreciated.

Here is the html:

<table width="615" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="49"><img src="images/m_home_body_table_topleft.jpg" width="49" height="49" /></td>
<td width="527"><img src="images/m_home_body_table_topmid.jpg" width="527" height="49" /></td>
<td width="39"><img src="images/m_home_table_topright.jpg" width="46" height="49" /></td>
</tr>
<tr>
<td><img src="images/m_home_table_midleft.jpg" width="49" height="482" /></td>
<td bgcolor="EEEEEE"><p> <br />
<span class="style1">We've been satisfying customers like you since the Truman Administration and there isn't much we can't handle. In fact, most of our best customers are other printers!</span></p>
<p class="style1">Our printing is first rate, top quality, traditional offset and letterpress. We've been doing it since 1946. If you're looking for the best value for your printing dollars from a company whose quality is second to none, then perhaps we can help. </p>
<p class="style1">We take pride on the excellent reputation we've earned with our customers. We strive to continue to offer the best printing value available.</p>
<p class="style1">Get the individual attention your printing deserves. Unlike most online printers, WE WILL NOT GANG YOUR BROCHURES OR POSTERS WITH A DOZEN OTHER PRINTING JOBS!</p>
<p class="style1">Our customers have many choices of vendors when it comes to who does their printing. Since our clients range from printing brokers, designers, letterpress printers, copy shops, and other offset printers, we know we have to be competitive on price and quality.</p>
<p class="style1">Simply click on a tab on the left to go to the product you wish, such as Letterpress Printing or Carbonless Forms. From there, you will be instructed how to order and easily upload your files.</p>
<p class="style1">Don't see what you need? No problem. Most of the work we do is custom made for the individual which can't fit into a nice, neat web page. Simply call us at (510) 555-5555 or email us at site@aol.com for a quick estimate on your project.</p>
<p class="style1">Whether it's 500 business cards, 500,000 booklets, or 100 letterpress wedding invitations, let us put our 60 years of expertise to work for you.</p></td>
<td><img src="images/m_home_table_midright.jpg" width="46" height="482" /></td>
</tr>
<tr>
<td><img src="images/m_home_table_botleft.jpg" width="48" height="51" /></td>
<td><img src="images/m_home_table_botmid.jpg" width="527" height="51" /></td>
<td><img src="images/m_home_table_botright.jpg" width="46" height="51" /></td>
</tr>
</table>

 

[decksnap]

At first glance it should be #EEEEEE not EEEEEE for Firefox. or even #eee.

 

[nicrose]

table gaps

Thanks Decksnap for the tip about the bg color.

I'm also wondering what I can do about the gaps in between the rows. You won't be able to see what I mean because it looks almost perfect in Firefox preview from Dreamweaver.

But when I upload the html to the actual site there are big white gaps between the rows. Is there a way to prevent that? Is there a way to repeat y the border on the left and right sides in order to prevent gaps? Note: I can only use inline styles. I can't use any CSS style sheets on this site.

 

[angelwatt]

Can you at least provide a screen shot of what you're seeing? I don't have the images you have so the code alone doesn't help me test it. Also, out of curiosity, why can you only use inline styles? Does that mean no use of the style tag either?

As an aside, when posting HTML code, use the HTML button on the toolbar when you're writing in the post. It will help format the code and add coloring, which makes it more readable (it's the button with <> on it).

 

[SelfMadeCelo]

i've tried looking at this and it's hard to do without the images...source?

 

[SelfMadeCelo]

I created some filler images and I see what you're talking about. I would use a background image in the side cells instead. That way as the cells become large it scales with the text.

 

[nicrose]

background images

I created some filler images and I see what you're talking about. I would use a background image in the side cells instead. That way as the cells become large it scales with the text.

Self Made Celo:
I tried that, but the images do not show up at all, not even in Dreamweaver.

I can only use style tags or inline CSS because this host probably won't allow me to upload my own style sheets.

 

[angelwatt]

I can only use style tags or inline CSS because this host probably won't allow me to upload my own style sheets.

I've never heard of a host not allowing CSS files. You can still do the style tag though. I'm not sure what your side images look like, but you may be able to repeat them with CSS as a background image rather than using the img tag. So instead of,

<td><img src="images/m_home_table_midleft.jpg" width="49" height="482" /></td>

you can use,

<td class="left"> </td>

Then the CSS

td.left {
 background-image: url(images/m_home_table_midleft.jpg);
 background-repeat: repeat-y;
}

 

[nicrose]

Thanks

I've never heard of a host not allowing CSS files. You can still do the style tag though. I'm not sure what your side images look like, but you may be able to repeat them with CSS as a background image rather than using the img tag. So instead of,

<td><img src="images/m_home_table_midleft.jpg" width="49" height="482" /></td>

you can use,

<td class="left"> </td>

Then the CSS

td.left {
 background-image: url(images/m_home_table_midleft.jpg);
 background-repeat: repeat-y;
}

Thanks Anglewatt, but I cannot use css right now; I don't think I can use a style sheet. I figured out a way to do it on my own by artifically increasing the height of the side images (the border images in my table). They can be stretched infinitely because this particular image stays the same in the vertical direction. So I did this:

Instead of

<td><img src="images/m_home_table_midleft.jpg" width="49 height=" height="482"></td>

I changed it to:

<td><img src="images/m_home_table_midleft.jpg" width="49 height=" height="650"></td>

Which allowed me to increase the size of the text in the middle cell without any gaps appearing between the rows. If only there were an inline way of doing that, too. I'd like to learn it, esp for creating emails with tables. (This project is not for an email campaign, but I would like to know the inline version for the future reference.)

 

[SelfMadeCelo]

You could've done:

<td style="background-image: url(images/m_home_table_midleft.jpg);background-repeat: repeat-y;"> </td>

That's inline.

 

[pelsar]

as an old table pro......

with years of experience in Dreamweaver.....if you get me access to all the files perhaps i can help...though its not totally clear to me the actual problem, i'll give you a few directions:

if you want to have consistency between table rows you'll have to place an extra column with an invisible gif to standardize the height.

additional very thin cell along the width of the table with a horizontal gif (invisible) to standardize the horizontal length.

tables in tables may be required to stop some cells from "going crazy" (but i would have to have the files to work that one out....)

dreamweaver can have an internal style sheet (that is not an additional file).

 

[nicrose]

using inivisible gifs to fix a table

if you want to have consistency between table rows you'll have to place an extra column with an invisible gif to standardize the height.

additional very thin cell along the width of the table with a horizontal gif (invisible) to standardize the horizontal length.

tables in tables may be required to stop some cells from "going crazy" (but i would have to have the files to work that one out....)

Here are the images:

The html is in the original post.

Edit: The top and bottom middle images are the wrong size. I'm trying to figure out why the middle images are shrunk down when they get uploaded to my myspace page.
Anyhow, the pixel measurements should be 527 x 49 for the top one, and 527 x 51 for the bottom one.

 

[pelsar]

table problem...a solution

your new table is made up of three pieces: top, middle and bottom, you do this all in dreamweaver, you start with a new table....make sure the tables have no borders, no padding..nothing.

your going to have 3 graphics: two piece, bottom piece and the vertical line for the sides
the top table cell contains the graphic with the top right, left corners and the horizontal as a single graphic

same for the bottom, but obviously the corners are "up".

now for the tricky part...the two horizonal lines are made in to a single graphic and become the background of your middle cell...make this one graphic very very long (vertically), so that any text in this cell can enlarge the cell without a problem.

once that is in, you can place an additional table within this main table area for control of your text and graphics....

one note: if you cant line up the top/bottom and middle graphics, place the top and bottom as "backgrounds" within their cells (and add gray to their right side so they dont repeat themselves), and that should work fine....

 

[nicrose]

table issue

one note: if you cant line up the top/bottom and middle graphics, place the top and bottom as "backgrounds" within their cells (and add gray to their right side so they dont repeat themselves), and that should work fine....

Thanks, Pelsar.

I think I understand most of what you wrote except the thing about adding gray to the right side so the background don't repeat.....What does that mean
to "add gray"?

 

[pelsar]

table backgrounds....

Thanks, Pelsar.

I think I understand most of what you wrote except the thing about adding gray to the right side so the background don't repeat.....What does that mean
to "add gray"?

the backgrounds should have a "little extra" just incase they dont fit exactly to the pixel...and backgrounds automatically repeat themselves.....so i add some extra on the side.....