Both render exactly the same for me.  Apart from the font, I'd recommend a more universal font that all browsers will like.

I'm seeing the same in both browsers as well. Do you have a screenshot you could show us?

Check your browser cache. Maybe you are caching a older version of the css.

Here's the screenshot from Firefox.  I cleared the cache and it's still doing the same thing...

As for the font, I know, but my boss insists that we use our special font, even if it does cause me grief.

Thanks all!

Woops, forgot to add what is SUPPOSED to look like...

Seems fine in all Firefox versions:

http://browsershots.org/http://www.heartwork.com/

Try hitting 'Ctrl+F5'.

Failing that, use Firebug to dissect the elements on page and figure out what's causing it.  Look at margins, padding, floats etc.

It's just the "content" pages (ie. About US, FAQ, Contact US, etc.)  the pages linked on the bottom are the ones showing the messed up margins.  The rest of the site is fine.

Oh! Ok.

It's your div element #wrapper.

I fiddled around with the wrapper but noting I do seems to change the margins of the header. I can get everything else to change though.

Here's the code I built for the content pages: 

<STYLE TYPE="text/css">
<!-- 
#contentbord {padding: 15px 0px 10px 0px;
    border-top: 1px solid #b7b7b7;
    }
    
#h3 {
    width:375px;
    float:left;
    font-size:20px;
    color:#f51435;
	text-transform: uppercase;
	margin-top:0px;
    font-family:'akzidenz-grotesk_bq_mediumRg';
}
.pageTitle {
    text-transform:uppercase;
    margin-top:0px;
    font-family:'akzidenz-grotesk_bq_mediumRg';
    font-size:15px;
    color:#707070; 
    margin-bottom:10px;
}
.class1 A:link {
color: #f51435; text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: none;}

.class2 A:link {color: #b7b7b7;
text-decoration: none}
.class2 A:visited {text-decoration: none}
.class2 A:active {text-decoration: none}
.class2 A:hover {color: #00696c; text-decoration: none;}

.paragrapgh{
text-indent:50px;}

-->
</style>
<div id="col-main" class="content">
    <div id="page-header">         
    </div>
       <image class="feature"> {% capture pageTitle %}{{page.handle}}.jpg{% endcapture %}
        {{ pageTitle | asset_url | img_tag }}
       
        <div id="contentWrapper"></div>
            <div id="contentbord">

    </div>


<div id="c_left"><h3>DESIGN FOR GOOD WORK</h3></div><div id="c_right"><div class="pageTitle">{{ page.title }}</div>{{ page.content }}</div>

</div>
<div class="clear"></div>
</div>

Thanks!

It is not the margins of your header, you header is fine (although the height needs adjusting).  The style on your div #wrapper are causing the gap difference.

GOT IT!

Thanks so much for your help :)