Dreamweaver - Help with vertical spacing

Author

Help with vertical spacing

mpola

2004-08-22, 12:14 pm

To anyone who tries to answer this, thank you very much for taking the time to
read it through.

I have a table based template page that requires a picture with a caption
underneath. I am having trouble because when I preview, the caption is alwas
lower than I want.

I have tried it two ways. In the first method, I simply have the caption in
the cell below the cell with the picture. The results are decent in Netscape,
but the spacing is almost an inch in Internet explorer. Unacceptable. Here is
the code:

table width="973" height="394" border="0" cellpadding="0">
<tr>
<th width="6" height="157" scope="col"> </th>
<th width="171" scope="col"><p><img src="../images/Auto%20Racing%203.JPG"
width="166" height="137" align="bottom"></p>
</th>
<th width="678" scope="col"><span class="style5"><span
class="style7">Headline</span></span></th>
<th width="108" align="left" valign="top" scope="col"> </th>
</tr>
<tr>
<td height="32"> </td>
<td><div align="center" class="style1"><span class="style10">Get out in
front with mpTechnology Service</span>s</div></td>
<td> </td>
<td> </td>
</tr>
<tr>

I have also tried putting the caption in the same cell as the picture, the
vertical spacing between the picture and the caption now measures about 3/8
inch. Better because both browsers look the same, but still barely close enough
to he picture. Here is the code for this one.

<table width="973" height="471" border="0" cellpadding="0">
<tr>
<th width="6" height="234" scope="col"> </th>
<th width="171" scope="col"><p><img src="../images/Auto%20Racing%203.JPG"
width="166" height="137" align="bottom"></p>
<span class="style10">Get out in front with mpTechnology services
</span></th>
<th width="678" scope="col"><span class="style5"><span
class="style7">Headline</span></span></th>
<th width="108" align="left" valign="top" scope="col"> </th>
</tr>
<tr>
<td height="32"> </td>

I have a lot of trouble with vertical spacing. IIn many cases I get a
reasonable result with Netscape, but Omternet Explorer spreads everything out.

Separate question! What is this ' ' that Dreamweaver puts in all over the
place?

Thanks again,

Mel Polatchek

Murray *TMM*

2004-08-22, 12:14 pm

Some comments -

1.   is a non-breaking space placed in each cell of a new DW table.
Empty cells do unexpected things in the browser, like collapse, have no
border, and no background color. The   prevents that.

2. ="../images/Auto%20Racing%203.JPG - lose the spaces in your file names
and DEFINITELY don't capitalize the extension, i.e., autoracing203.jpg.

3. Table height is invalid HTML.

4. A width of 973px will guarantee horizontal scroll on too many browser
windows to be worth it. Keeping your pages at about 760px width will work
best, unless your demographic requires otherwise.

5. You don't need <p> tags around an image.

Try this code -

<table width="973" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="6" scope="col"> </th>
<th width="171" scope="col" align="center"><img
src="../images/Auto%20Racing%203.JPG"
width="166" height="137">
</th>
<th width="678" scope="col"><span class="style5"><span
class="style7">Headline</span></span></th>
<th width="108" align="left" valign="top" scope="col"> </th>
</tr>
<tr>
<td> </td>
<td><div align="center" class="style1"><span class="style10">Get out in
front with mpTechnology Service</span>s</div></td>
<td> </td>
<td> </td>
</tr>

And then edit style10 to have top padding or margin (either should work) as
needed to space the text down.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"mpola" <webforumsuser@macromedia.com> wrote in message
news:cg9shi$r05$1@forums.macromedia.com...
> To anyone who tries to answer this, thank you very much for taking the
> time to
> read it through.
>
>