Firefox ignores my "margin-top:-30px;" Help!

[Jordyn Burdick]

I'm in the process of debugging my cross browser discrepancies for a website. It shows up perfect in Chrome and Safari, looks horrible in IE but only has ONE error in Firefox. I thought it would be simple to fix, but of course not! Here's the problem:

The navbar should overlap the scrolling banner, but Firefox seems to ignore my negative top margin code. I've tried so many approaches to fix this I've lost count! Here's the code:

[CSS CODE]

* {
    padding: 0;
    margin: 0;vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    text-decoration:none;
    list-style:none;
    white-space:normal; 
    }
 
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
 
body { 
    background: #232323; 
    line-height: 1; 
    color: black;
    font-family: Arial, Helvetica, sans-serif; 
    }
 
a{
    font-weight:bold;
}
 
a:link {
    color:#232323;
}      /* unvisited link */
 
a:visited {
    color:#232323;
}  /* visited link */
 
a:hover {
    color:#343434;
}  /* mouse over link */
 
a:active {
    color:#232323;
}  /* selected link */    
 
 
#container {  
    width: 1000px;  
    margin: 0 auto;
    background: url(images/AMSite01.png) no-repeat;
}
 
/*coding for header*/
#title{
    padding-top:10px;
    margin-bottom: -60px;
}
 
#tagline{
    float:left;
}
 
#socialicons{
    margin:0px 0px 0px 500px;
    position:absolute;
}
 
#socialicons li{
    float:left;
}
 
#navbar{
    margin-top:-40px;
    position:absolute;
    z-index:100;
}
 
#navbar li{
    float:left;
}
 
.button{
    margin-top: 37px;
    padding-left:110px;
}
 
#facebook{
    background: url(http://www.mrriseandgrind.com/blog/images/AMSite09.png) no-repeat;
    height:150px;
}
 
.fbbutton{
 
}
 
#twitter{
    background: url(http://www.mrriseandgrind.com/blog/images/AMSite10.png) no-repeat;
    height:150px;
    width:300px;
    margin-left: 657px;
    position:absolute;
    z-index:-1;
}
 
.twbutton{
    position:absolute;
    margin-left:5px;
}
 
#banner{
    margin-top:-30px;
}
/*end coding for header*/
 

[/CSS CODE]

[HTML CODE]

<div id="header">
 
            <div id="title">
                <a href="home.html"><img src="http://bytes.com/images/AMSite11.png" alt=""/></a>
            </div><!-- end title -->
 
            <div id="tagline">
                <img src="http://bytes.com/images/AMSite12.png" alt=""/>
            </div><!-- end tagline -->
 
            <div id="socialicons">
                <ul>
                    <li><img src="http://bytes.com/images/AMSite13.png"/></li>
                    <li><a href="http://www.youtube.com/mrriseandgrind "><img src="http://bytes.com/images/AMSite14.png"/></a></li>
                    <li><a href="https://twitter.com/#!/BlackBoiPachino "><img src="http://bytes.com/images/AMSite15.png"/></a></li>
                    <li><a href="http://www.facebook.com/profile.php?id=12806574 "><img src="http://bytes.com/images/AMSite16.png"/></a></li>
                </ul>
            </div>
 
            <div style="clear:both"></div>  
 
            <div id="navbar">
                <ul>
                    <li><a href="home.html"><img src="http://bytes.com/images/AMSite03.png"/></a></li>
                    <li><a href="bio.html"><img src="http://bytes.com/images/AMSite04.png"/></a></li>
                    <li><a href="media.html"><img src="http://bytes.com/images/AMSite05.png"/></a></li>
                    <li><a href="Camp.html"><img src="http://bytes.com/images/AMSite06.png"/></a></li>
                    <li><a href="http://amorrow.tumblr.com/"><img src="http://bytes.com/images/AMSite07.png"/></a></li>
                    <li><a href="contact.html"><img src="http://bytes.com/images/AMSite08.png"/></a></li>
                    <li id="facebook">
                        <iframe class="button fbbutton" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mrriseandgrind.com&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
                    </li>
                    <li id="twitter"><a class="button twbutton" href="http://twitter.com/blackboipachino" class="twitter-share-button"
                        data-count="horizontal">Tweet</a><script type="text/javascript"
                        src="http://platform.twitter.com/widgets.js"></script>
                    </li>
                </ul>
            </div><!--end navbar -->
 
            <div style="clear:both"></div>  
 
            <div id="banner">
                <img src="http://bytes.com/images/banner1.gif" name="adBanner" alt="Ad Banner" />
            </div><!-- end banner -->
 
        </div><!-- end header -->
 

[/HTML CODE]

[drhowarddrfine]

Validate your html and css for those lists of errors.

[Jordyn Burdick]

Thanks for your response. I have validated the code and the problem persists still. Any other ideas?

[JKing]

A link to your project would be helpful or at the very least a screenshot.

[Jordyn Burdick]

it's uploaded to a sub domain of my business site:
http://mrrise.huntergraphics.org/

[JKing]

Instead of margins, why not just absolute position all these things? You've declared absolute positioning on a few elements anyway. Instead of using margins to position your element use top,left,right and bottom.

Doesn't appear to ignoring the negative margin either. The images in your slideshow have a shadow effect leaving about 43px all the way around the image.

[Jordyn Burdick]

You're right! It's not ignoring the negative margin. It treats it very differently thought. When I increase the negative margin on the banner element and refresh the preview in Firefox, for whatever reason, it affects all the following elements and messes up their alignment. I'll try the absolute positioning like you suggested. Thanks JKing.

[Jordyn Burdick]

Excellent! It fixed my issues with firefox! Thanks a ton!!! Now on to debugging IE, the bane of my existence.

[JKing]

If you run into any issue with IE feel free to ask and I can likely help with those too.