positionierungsproblem FF und Safari

[Daniel Steinmann]

Ich zerbreche an einem kleinen Layoutproblem. Es handelt sich um ein 3-spaltiges Skin, XHTML-strict, SEO-optimiert und ist bisher ohne Browser-Hack realisiert. Auf dem IE läuft es einwandfrei, der FF und Safari bocken. FF und Safari setzen mir mein Background-DIV ohne ersichtlichen Grund auf "top: 40px". Das DIV id=bg ist das Erste DIV im Layout und umfasst den ganzen Content.

Das DIV ist nötig für den schwarzen Hintergrund, weil ich den body nicht schwarz haben will, da dies unnötige weitere Anpassungen verlangt.

Das IMG am Anfang wird nicht angezeigt, es dient zum Vorladen und wird auch effektiv nicht ausgegeben.

Kann mir jemand aufzeigen wie dieser Abstand oben zustande kommt?

Hier der Link zur Developmentsite: Testseite

Hier ein Ausschnitt aus dem CSS:

  
body, html {  
font-family: Tahoma, Arial, Helvetica, sans-serif;  
color:#000;  
font-size:20px;  
margin:0;  
padding:0;  
width:100%;  
height:100%;  
}  
#Form{  
background:#000;  
/* base layout*/  
#bg{  
width:100%;  
margin:0;  
padding:0;  
top:0 !important;  
text-align:center;  
background:#000;  
position: relative;  
}  

Hier das Skin in HTML:

  
<img src="bgsmall.jpg" visible="false" style="display:none;" />  
<div id="bg">  
    <div id="controlwrap">  
	    <div id="ControlPanel" runat="server"></div>  
    </div>  
    <div id="fixed">  
        <div id="colmask">  
            <div id="colmid">  
                <div id="colright">  
                    <div id="col1wrap">  
                        <div id="col1pad">  
                            <div id="col1"><!-- Column 1 start -->  
                                <div id="TopPane" class="MainTopContent" runat="server"></div>  
                                <div id="ContentPane" class="MainCenterContent" runat="server"></div>  
                                <div id="BottomPane" class="MainBottomContent" runat="server"></div>  
                            <!-- Column 1 end -->  
                            </div>  
                        </div>  
                    </div>  
                    <div id="col2"><!-- Column 2 start -->  
                        <div class="NavWrap">  
                            <div class="LogoPane"><img src="http://www.mrdanos.com/Portals/0/danoslogoneu.gif" height="52px" width="200px" alt="MR.DA-NOS" /><!-- <DNN:LOGO runat="server" id="dnnLOGO" /> --></div>  
                            <div class="NavPane"><TIMODESIGN:MENU runat="server" id="timodesignMENU" showicon="False" StartId="244" StartLevel="1" /></div>  
                        </div>  
                        <div class="NavWrap">  
                            <div class="PartyHeader"><marquee class="nextpartylabel" scrollamount="2" scrolldelay="100"><dnn:NPLABEL runat="server" id="dnnNPLABEL" /></marquee></div>  
						    <div class="PartyLink" style="margin:0 0.9em 0.6em 0.9em;"><a href="/guestlist.aspx">GUESTLIST</a></div>  
                        </div>  
                        <div id="LeftPane" class="MainLeftContent" runat="server"></div>  
                    <!-- Column 2 end -->  
                    </div>  
                    <div id="col3"><!-- Column 3 start -->  
                        <div id="RightPane" class="MainRightContent" runat="server"></div>  
                    <!-- Column 3 end -->  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div style="clear:both" />  
</div>  

Vielen Dank für alle Tipps.

Gruss Daniel