Padding problem?...Help with an unwanted gap in layout

Forum Moderators: open

Message Too Old, No Replies

Padding problem?...Help with an unwanted gap in layout

croakingtoad

2:19 pm on Nov 3, 2004 (gmt 0)

I'm having a problem with a gap in my document page and I can't figure out where the heck it's coming from!

Take a look at my code below and you'll see directly below the header area there is a gap of about 5-10px. I've colored the background of the header red so you can see it seems to be somewhere in the header area the problem, but search me I can't figure it out.

Any suggestions or solutions? Please?!

[edited by: croakingtoad at 3:10 pm (utc) on Nov. 3, 2004]

croakingtoad

2:21 pm on Nov 3, 2004 (gmt 0)

I should've mentioned this space appears in both FF & IE

encyclo

2:49 pm on Nov 3, 2004 (gmt 0)

You might want to check the Terms of service [webmasterworld.com] for the forum, which forbids the posting of personal URLs. Would it be possible to post a short and relevant snippet of the markup and related CSS?

First idea: if you are using a table-based layout, make sure that you have removed the cellspacing and cellpadding on all the table tags, and make sure you have removed any white space between the content and the surrounding

td

tags.

croakingtoad

3:12 pm on Nov 3, 2004 (gmt 0)

Thanks for the advice on the url, I've removed it, here is my code :

I am using XHTML strict--

<body>
<div style="text-align: center; padding-top: 25px;">
<table>
<tr><td>
<table class="header" width="100%">
<tr>
<td style="width: 290px;"><img src="images/bowties_logo.jpg" width="290" height="82" alt="" /></td>
<td valign="bottom" class="nav">
<ul id="navlist">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT US</a></li>
<li><a href="">WHERE TO BUY</a></li>
<li><a href="">CONTACT</a></li>
</ul></td>
<td style="width: 20px;"><img src="images/bowties_hdr_right.gif" width="20" height="82" alt="" /></td>
</tr>
</table></td></tr>
<tr><td>
<table style="background-color: #FFF;">
<tr>
<td valign="top">
<div id="navcontainer">
<ul>
<li><a href="#">Bow Ties</a>
<ul>
<li><a href="#">Print Bow Ties</a></li>
<li><a href="#">Woven Bow Ties</a></li>
<li><a href="#">Stripe Bow Ties</a></li>
<li><a href="#">Formal Bow Ties</a></li>
</ul></li>
<li><a href="#">Pocket Squares</a>
<ul>
<li><a href="#">Print Cummerbunds</a></li>
<li><a href="#">Stripe Cummerbunds</a></li>
<li><a href="#">Cotton Cummerbunds</a></li>
</ul></li>
<li><a href="#">Vests</a></li>
<li><a href="#">Ascots</a></li>
</ul>
</div></td>
<td style="border-left: 5px solid #D4B170;">
<object type="application/x-shockwave-flash" data="./flash/ties.swf" width="582" height="264">
<param name="movie" value="./flash/ties.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#3A3939" />
</object></td>
</tr>
<tr>
<td><p style="text-align: center; line-height: 1.15;">R.Hanauer, Inc.<br />P.O. Box 1447<br />Fort Mill, SC 29716<br />800.514.9707</p></td>
<td style="text-align: center; border-left: 5px solid #D4B170; padding: 10px;">
<object type="application/x-shockwave-flash" data="./flash/signup.swf" width="546" height="110">
<param name="movie" value="./flash/signup.swf" />
<param name="quality" value="high" />
</object></td>
</tr>
</table></td></tr>
<tr><td>
<table class="footer" width="100%">
<tr>
<td><span class="copyright">© 2000-#dateformat(now(),"yyyy")#  XXXX is a registered trademark of XXXX, Inc.</span></td>
</tr>
</table></td></tr>
</table>
<br />
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</div>
</body>

[edited by: tedster at 8:25 pm (utc) on Nov. 3, 2004]
[edit reason] remove specifics [/edit]

SuzyUK

8:22 am on Nov 4, 2004 (gmt 0)

Hi as encyclo says it appears to be the default cellpadding and cellspacing

I take it you're using a stylesheet as there are some classes in there..

the CSS equivalent of cellpadding is to set the padding on the <td> to zero, while there's not always a clear equivalent to cellspacing,

border-collapse

might work in this case. Alternatively you may just want to apply cellspacing to the tables in the HTML

try this in stylesheet:

table {
width: 100%;
border-collapse: collapse;
border: 0;
}

td {border: 0; padding: 0;}

Suzy

croakingtoad

12:59 pm on Nov 4, 2004 (gmt 0)

I actually already had the styles as so but on a whim I tried adding the cellpadding/spacing to the table element but it did not fix the problem...

Here's what I have for the table styles :

table {
border-collapse: collapse;
margin: 0;
padding: 0;
border: 0;
}