Margin problems...

[jhatter]

Hi,

Iam having problem with a margin and I can't figure out what the problem is. The gap between the nav bar & the purple box should be 10px, but when I view in Safari or FF it is more like 60px.

I think I need a fresh pair of eyes to look at this.

Thanks in anticipation of your replies.

5004


body { background: #000000; }

#container { width: 980px; background: #FFFFFF; margin: 0 auto; text-align: left; }

#homebox { margin-top:10px; width: 980px; height: 777px; background-color: #af8798; }

#hometext { position: relative; top: 0px; left: 48px; width: 800px; text-decoration: none; font-family:Georgia, "Times New Roman", Times, serif; color: #ffffff; vertical-align: top; font-size: 60px; }

p.introtext1 {text-decoration: none; font-family:Georgia, "Times New Roman", Times, serif; font-size: 80px; letter-spacing: 6px; color: #ffffff; font-style: italic; width: 780px; vertical-align: top; }


<div id="container">

<div style="margin-top:10px; background:#600F31; height:30px;">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="11%" align="center" valign="middle"><a href="index.html" class="bianco">Home</a></td>
<td width="13%" align="center" valign="middle"><a href="food.html" class="bianco">Food</a></td>
<td width="13%" align="center" valign="middle"><a href="wine.html" class="bianco">Wine</a></td>
<td width="19%" align="center" valign="middle"><a href="cooking.html" class="bianco">Cooking Classes</a></td>
<td width="19%" align="center" valign="middle"><a href="walking.html" class="bianco">Walking</a></td>

<td width="10%" align="center" valign="middle"><a href="more.html" class="bianco">..More</a></td>
</tr>
</table>
</div>

<div id="homebox">
<div id="hometext">
<p class="introtext1">Bespoke</p>
<p> food, wine &amp; walking</p>
</div>
</div>

</div>

[Beverleyh]

Try setting margin:0; on #hometext and p.introtext1 (paragraphs come with, amongst other things, their own default margins in different browsers)

[molendijk]

On my machine, the gap is too big with all browsers.
You should set margin-top:-60px on #homebox.

[jhatter]

Thanks Beverley, that sorted the problem.