Daniel Steinmann: positionierungsproblem FF und Safari

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

  1. Hi,

    Es handelt sich um ein 3-spaltiges Skin, XHTML-strict, SEO-optimiert

    Da hast du "SEO-optimiert" wohl mit Div-Suppe verwechselt.

    FF und Safari setzen mir mein Background-DIV ohne ersichtlichen Grund auf "top: 40px".

    Du hast dem Div #fixed ein margin:2em auto verpasst ...

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    1. Du hast dem Div #fixed ein margin:2em auto verpasst ...

      Vielen Dank, hab doch gewusst dass es mein kleiner Fehler ist ... :-)

      Da hast du "SEO-optimiert" wohl mit Div-Suppe verwechselt.

      Kannst Du einen anderen Weg aufzeigen, den Maincontent für Suchmaschinen möglichst zuoberst im Content zu haben und ein Skin herzustellen das für alle modernen Browser ohne Hacks auskommt?

      Meine Skins basieren bisher auf diesen Grundlagen: Matthew James Taylor