Strange, it works fine in Dreamweaver and IE. Basically, I have a nested div that contains several heading and paragraph elements.

The <h2> and <h3> elements work okay, but the <h1> just budges up against the top of the div! The margin appears to be there, its more like the div moves 'down'.

Any ideas anyone?

HTML:

          <div id="contentBgWide">
            <div id="contentWide">
              <h1>Services</h1>
              <p>To make things easier for you, I have split my services into packages. The higher level packages contain more features and are aimed towards clients who need a more demanding design / development solution. Currently there are only packages for websites, however I will be adding graphic design packages as time goes on. All current graphic design queries should be submitted through the <a href="contact.htm">contact</a> page.</p>
              <div class="pService1">
              <br class="clear" />
              <h2>Level 1 Web package</h2>
              <p>The level 1 website package is ideal for those who just need to get the message across about who they are and what they do. This will be useful if you have a small business or shop and want your customers to be able to gain a better understanding of how you work. This would also be suited to those who have a band or are a member of a club and want people to be able to access information on it.</p>
              <p>Due to the lack of dynamic content that would be generated through a CMS (see below) I can guaruntee that all Level 1 packages will be valid <a href="http://validator.w3.org/" target="_blank">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/" target="_blank">CSS</a>.</p>
              <p>The level 1 web package includes the following features:</p>
              <ul class="list">
                <li>5 static web pages</li>
                <li>Contact form with PHP email function</li>
              </ul>
              <p><span class="bold">Cost:</span> £150 <span class="highlight">*</span><br />
                <span class="bold">Estimated completion time:</span> 1 Month <span class="highlight">**</span></p>
              </div>

CSS:

#content, #contentWide {
    padding:0 15px 15px 15px;
    width:320px;
    background:url(../image/bgCropTop.gif) no-repeat;}

#contentBg {
    width:350px;
    background:url(../image/bgCropBtm.gif) no-repeat 0 100%;}

#contentBgWide {
    width:720px;
    background:url(../image/bgCropWideBtm.gif) no-repeat 0 100%;}
    
#contentWide {
    width:690px;
    background:url(../image/bgCropWideTop.gif) no-repeat;}

    
h1, h2, h3 {
    font-size:220%;
    margin:.5em 0;
    padding:0;}
        
h2 {
    font-size:140%;}
    
h3 {
    font-size:120%;}
    
p {
    padding:0;
    margin:.5em 0 1.5em;}

Thanks to anyone who can help!

Try putting padding-top: 1px; on the #contentwide div, could very well be margin-collapse and that will stop it.

Ahhh thanks thats fixed it! Now that I think about it, I had this exact same problem a few weeks ago and you gave me the solution lol.

You always have to watch it when you have 2 divs butting up against each other, most of the time you're going to get margin-collapse.