Can't get rid of gap on my home page

[Jpln]

I am trying to create a web site for my workplace and am using a Dreamweaver MX 3 column Halo template. I have used the fields provided, but when I view the page in Firefox and IE6, there is a massive gap between the last line of text and my two graphics - when I view the page in Dreamweaver, there is no gap. Can anyone explain what's going on please?

Here is the HTML of the section:

<div id="content">
<div class="feature">
<!-- <img src="" alt="" width="280" height="200"> -->
<h3 align="center">This is the Towcester Medical Centre holding page</h3>
<div align="center">Should you have any queries in the meantime, please phone <strong>01327 359953</strong> </div>
<h3 align="center">The surgeries</h3>
<p align="center">
Towcester Medical Centre is a purpose built centre serving Towcester and surrounding areas with a satellite surgery in
Paulerspury, 3 miles away.
</p>
</div>
<!-- <div class="story">
</div> -->
<div class="story">
<table width="100%" cellpadding="0" cellspacing="0" summary="">
<tr valign="top">
<td class="storyLeft"><p align="center"><img src="images/tmc.gif" width="280" height="230" border="2" align="baseline"> </p>
</td>
<td class="storyLeft"><p align="center"><img src="images/paulerspury.gif" width="280" height="230" border="2" align="baseline"></p>
</td>
</tr>
<tr valign="top">
<td class="storyLeft"> <p align="center">
<a href="#" class="capsule">Towcester Medical Centre</a> Link Way, Towcester, Northamptonshire, NN12 6HH.
<br/>Tel: <strong>01327 359953</strong></p>
</td>
<td> <p align="center">
<a href="#" class="capsule">Paulerspury Surgery </a> 6a Lumber Lane, Paulerspury, Northamptonshie, NN12 7ND
<br/>
Tel:<strong> 01327 811630</strong> </p></td>
</tr>
<tr valign="top">
<td class="storyLeft"> <p>
<a href="#" class="capsule"></a>

</p></td>
<td> <p>
<a href="#" class="capsule"></a>
</p></td>
</tr>
</table>
</div>
</div>
<div id="siteInfo">
<img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site
Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy;2007 Towcester Medical Centre

</div>
</div>
<!--end pagecell1-->

And here is the CSS of the STORY and FEATURE sections:
/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

/************** feature styles *****************/

.feature{
padding: 0px 10px 10px 0px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

img.floatLeft{
float: left;
padding: 0px 10px 0px 0px;
}
img.floatRight{
float: right;
padding: 0px 10px 0px 0px;

 

[Vragabond]

It's hard to say because you didn't tell us where this gap appears. Do you have a link to the page? Or could you at least let us know where we should be experiencing this gap?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jstreich]

Helpful hint... Tables are for tabular data, try changing them to divs.

Also, there is a 10px gap bellow the paragraphs specified:

.story p {
    padding: 0px 0px [red]10px[/red] 0px;
}

And 10px gap above the pictures specified:

img.floatLeft{
    float: left;
    padding: 0px [red]10px[/red] 0px 0px;
}
img.floatRight{
    float: right;
    padding: 0px [red]10px[/red] 0px 0px;
}

So there should be a 20px gap showing up. If it's larger than that, I'd assume that your divs or table elements have a margin (default margin or specified in CSS not posted above).

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[Jpln]

Many thanks for both replies. The gap appears just AFTER the line;<p align="center"> Towcester Medical Centre is a purpose built centre serving Towcester and surrounding areas with a satellite surgery in Paulerspury, 3 miles away. </p> and BEFORE the STORY div.

JSTREICH: I have changed the css to 0px, but the result is the same.

The spacing is fine in FIREFOX now, it is only IE which keeps the gap showing.

Thanks again all.

 

[BillyRayPreachersSon]

Set the margin on the P to 0 as well.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Jpln,

Did you resolve your problem? If setting the padding as well didn't work, try removing any whitespace surrounding the P element.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Jpln]

Thanks for your post Dan. No, unfortunatley it hasn't worked. It looks fine in Firefox, but IE leaves a huge gap.

I've given up with it now and am going to try and find a different template.

Thanks again.
Amanda