positionierungsproblem FF und Safari
Daniel Steinmann
- design/layout
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
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
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