CSS Absolute Positionierung - Problem mit Chrome

Haussi

Hallo Leute!

Ich habe ein sehr merkwürdiges Problem.

[Blockierte Grafik: http://cache1.willhaben.apa.net/mmo/3/130/779/53_-1928538423.jpg]

Und zwar wird der grüne Banner "BSE-Stammtisch" nur in Google Chrome an einer etwas anderen Stelle positioniert. In IE und FF sind die Positionen völlig ident.

Das merkwürdigste kommt erst: Ändere ich die Höhe des Banners von 11px auf z.B. 15px so wird der Banner in allen 3 Browsern völlig ident dargestellt.

Gibt es in Chrome einen Zusammenhang bezüglich Grafikhöhe und Absoluter Position !?

die betroffene Seite

das CSS-Dokument

Danke

MfG

Hannes

Thonixx

Das Problem besteht auch im Opera und ich hab ein paar Sachen ausprobiert mit deiner Style Datei und so wie ich sehe, würde ich einfach den Banner ca. 5 Pixel nach unten schieben und ihn da lassen, damit du sicher gehen kannst, dass er die Schrift nicht verdeckt.

Sonst bleibt dir nur noch die Möglichkeit des 15px hohen Banners.
Schaus dir auch mal im Opera an oder hier (http://www.browsershots.org).

Haussi

Danke - für diesen Tip.

Hab die Lösung für das Problem mittlerweile gefunden:
--> siehe http://xhtmlforum.de/57363-css-abso…html#post435666

thilda

Aber geänder hast du es noch nicht?
Also bei mir im FF3.0.8 sieht es noch immer nicht gut aus.
Opera9.5 auch nicht.

yeti66

Drei Dinge habe ich geändert:
1. ...den Doctype mit anschließender Fehlerbereinigung
2. ...dem #bsestammtisch 5px dazugegeben
3. ... + RESET STYLES im CSS zugefügt

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>www.AABBCC.at - die digitale Plakatwand</title>
<meta name="Keywords" content="Werbefl&auml;che, Plakatwand, Schwarzes, Brett, Ried, Braunau, Sch&auml;rding, Grieskirchen, Festl, Events, Zeltfest, Clubbing, Gratiswerbung, Flyer" />
<meta name="Description" content="Gratis Werbefl&auml;che f&uuml;r Veranstalter s&auml;mtlicher Events (B&auml;lle,Zeltfeste,Clubbings,Konzerte,etc...) die in den Bezirken Ried,Braunau,Sch&auml;rding oder Grieskirchen stattfinden" />
<meta name="author" content="(c) by Hannes Leitner" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="de" />
<!-- Verhindert das Speichern,Drucken,etc.. Popup-Menü wenn man mit der Maus über eine Grafik fährt  - Problem ist im IE aufgetreten  !-->
<meta http-equiv="imagetoolbar" content="no" />
<!-- <style type="text/css">  !-->
<link rel="stylesheet" type="text/css" href="maincss.css" />
<script type="text/javascript">
<!--function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
<!--/* CSS Document */
/*reset styles*** thanks to Eric A. and Kathryn S. Meyer *** http://meyerweb.com/eric/thoughts/2007/05/01/*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/*reset styles end*/
 
a {
    text-decoration: none;
}
/* Horizontale Navigation   -  http://de.selfhtml.org/css/layouts/navigationsleisten.htm  */
body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black;
    background-color: #000000;
}
ul#Navigation {
    text-align: center;
    border: 0px solid black;
    background-color: #22BE1B;
    position:absolute;
    top: 150px;
    left: 20px;
    z-index: 5;
    margin: 0px;
    padding: 0px;
}
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 10px;
    padding: 1px;
    letter-spacing:1px;
}
ul#Navigation a, ul#Navigation span {
    padding: 0px 5px;
    text-decoration: none;
    font-weight: bold;
    border: 0px solid black;
    border-left-color: white;
    border-top-color: white;
    color: black;
    background-color: #22BE1B;
}
* html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    width: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
}
ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    color: white;
    background-color: black;
}
/* Überschrift www.AABBCC.at */
h1 {
    color: #22BE1B;
    font-family: arial;
    font-weight:bold;
    font-size: 30px;
    z-index: 3;
    position:absolute;
    top: 0px;
    left:90px;
    margin: 20px;
    padding: 0px;
}
/* ....die digitale Plakatwand etc... */
h2 {
    color: #22BE1B;
    font-family: arial;
    font-weight:normal;
    font-size: 14px;
    z-index: 4;
    position:absolute;
    top: 50px;
    left:110px;
    margin: 0px;
    padding: 0px;
}
.normal {
    color: #F9FAF3;
    font-family: arial;
    font-weight:normal;
    font-size: 13px;
    z-index: 4;
    position:absolute;
    top: 200px;
    left:110px;
    margin: 0px;
    padding: 0px;
}
/* Seitenlayout */
#LogoAABBCCKleinohneHolz {
    position:absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}
#mausrad {
    position:absolute;
    top: 200px;
    left: 20px;
    z-index: 2;
}
#GruenRund {
    position:absolute;
    top: 125px;
    left: 20px;
    z-index: 2;
}
/* Seitenlayout Auswahl.html*/
#auswahl {
    position:absolute;
    top: 80px;
    left: 20px;
    z-index: 1;
    left: 5%
}
#mailauswahl {
    position:absolute;
    top: 570px;
    left: 20px;
    z-index: 2;
}
/* Hintergrund Bezirke */
#braunauoriginal {
    position:absolute;
    top: 200px;
    left:40px;
    z-index: 1;
}
#riedoriginal {
    position:absolute;
    top: 200px;
    left:40px;
    z-index: 1;
}
#schardingoriginal {
    position:absolute;
    top: 200px;
    left:40px;
    z-index: 1;
}
#grieskirchenoriginal {
    position:absolute;
    top: 200px;
    left:40px;
    z-index: 1;
}
/****************************************************************************/
/* Banner - Braunau- Braunau-Braunau-Braunau-Braunau-Braunau-Braunau-Braunau*/
/****************************************************************************/
#bsestammtisch {
    position:absolute;
    top: 1005px;
    left: 180px;
    z-index: 2;
}
#dartbraunau {
    position:absolute;
    top: 332px;
    left: 800px;
    z-index: 2;
}
#ljgeretsberg {
    position:absolute;
    top: 950px;
    left: 513px;
    z-index: 2;
}
#buggylords {
    position:absolute;
    top: 950px;
    left: 413px;
    z-index: 2;
}
#mscgilgenberg {
    position:absolute;
    top: 712px;
    left: 499px;
    z-index: 2;
}
/***************************************************************************/










/****************************************************************************/
/* Banner - Ried- Ried- Ried- Ried- Ried- Ried- Ried- Ried- Ried- Ried------*/
/****************************************************************************/
#brunosoldies {
    position:absolute;
    top: 650px;
    left: 1500px;
    z-index: 2;
}
/***************************************************************************/








/****************************************************************************/
/* Banner - Schärding- Schärding- Schärding- Schärding- Schärding- Schärding*/
/****************************************************************************/


/***************************************************************************/




/****************************************************************************/
/* Banner - Grieskirchen- Grieskirchen- Grieskirchen- Grieskirchen----------*/
/****************************************************************************/




/***************************************************************************/
-->
</style>
</head>
<body bgcolor="#000000">
<h1>www.AABBCC.at</h1>
<img src="banner/br/bsestammtisch.jpg" alt="" border="0" /><br />
<img src="banner/br/ljlogo.jpg" alt="LJ Geretsberg" border="0" />
<h2>...die digitale Plakatwand
  f&uuml;r die Bezirke Ried - Braunau - Sch&auml;rding - Grieskirchen&nbsp;</h2>
<div id="bsestammtisch"> <a href="http://www.ntmb.de/hit/6130"target="_blank"><img border="0"src="http://www.aabbcc.at/INDEX/banner/br/bsestammtisch.jpg"alt="www.bse-stammtisch.de.tl"/></a></div>
<!--  <a href="http://www.ntmb.de/hit/6130"target="_blank"><img border="0"src="banner/br/bsestammtisch.jpg"alt="www.bse-stammtisch.de.tl"/></a>   !-->
<!-- <a href='http://www.bse-stammtisch.de.tl' target="_blank" > !-->
<!-- <a href='http://www.ntmb.de/hit/6130' target="_blank"><img src="banner/br/bsestammtisch.jpg" alt="www.bse-stammtisch.de.tl" border=0></a>  !-->
<!--  <img src="banner/br/buggylords.jpg" alt="www.bse-stammtisch.de.tl" border=0>   !-->
<div id="dartbraunau">
  <!-- <a href='http://www.dc-braunau.at' target="_blank" > !-->
  <a href='http://www.ntmb.de/hit/6131' target="_blank" > <img src="http://www.aabbcc.at/INDEX/banner/br/dartbraunau.jpg" alt="http://www.dc-braunau.at" border="0" /> </a> </div>
<div id="ljgeretsberg">
  <!-- <a href='http://lj-geretsberg.at' target="_blank" > !-->
  <a href='http://www.ntmb.de/hit/6132' target="_blank" > <img src="http://www.aabbcc.at/INDEX/banner/br/ljlogo.jpg" alt="LJ Geretsberg" border="0" /> </a> </div>
<div id="buggylords">
  <!-- <a href='http://buggylords.twoday.net' target="_blank" > !-->
  <a href='http://www.ntmb.de/hit/6133' target="_blank" > <img src="http://www.aabbcc.at/INDEX/banner/br/buggylords.jpg" alt="Lords of Buggys" border="0" /> </a> </div>
<div id="mscgilgenberg">
  <!-- <a href='http://www.msc-gilgenberg.at' target="_blank" > !-->
  <a href='http://www.ntmb.de/hit/6134' target="_blank" > <img src="http://www.aabbcc.at/INDEX/banner/br/mscgilgenberg.jpg" alt="MSC Gilgenberg" border="0" /> </a> </div>
<div id="LogoAABBCCKleinohneHolz"> <a href='http://www.aabbcc.at' target="_blank" > <img src="http://www.aabbcc.at/INDEX/LogoAABBCCKleinohneHolz.JPG" border="0" alt="www.aabbcc.at" width="100" height="100" /> </a> </div>
<div id="braunauoriginal"> <img src="http://www.aabbcc.at/INDEX/braunauoriginal.jpg" /> </div>
<div id="mausrad"> <img src="mausrad.jpg" /> </div>
<div id="GruenRund"> <img src="gruenrund.jpg" /> </div>
<!-- CSS-Menü Beispiel von  http://aktuell.de.selfhtml.org/artikel/css/mouseover/


<div class="menu">


<div id="Home">
<a class="menu" href="index.htm">Home</a><br>
</div>


<div id="Email">
<a class="menu" href="asdsadasd.html">E-Mail</a><br>
</div>


<div id="Extras">
<a class="menu" href="extras/index.htm">Extras</a><br>
</div>


<div id="Links">
<a class="menu" href="links/index.htm">Links</a><br>
</div>
</div>
!-->
<!-- CSS-Menü Beispiel von  http://de.selfhtml.org/css/layouts/navigationsleisten.htm !-->
<ul id="Navigation">
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li> </li>
  <li><a href="ried1.html">Ried</a></li>
  <li><span>Braunau</span></li>
  <li><a href="scharding1.html">Sch&auml;rding</a></li>
  <li><a href="grieskirchen1.html">Grieskirchen</a></li>
  <li><a href="info.html">Info</a></li>
  <li><a href="impressum.html">Impressum</a></li>
  <li><a href="mailto:info@aabbcc.at">Kontakt</a></li>
  <li> </li>
  <li> </li>
  <li> </li>
</ul>
<!-- ID 2340 wurde für www.aabbcc.at angelegt!-->
<!--
<p align="left"><font color="#c0c0c0" face="Arial"><font size="2">&nbsp;&nbsp;
</font></font></p>!-->
<p>
  <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
  <script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2083048-1");
pageTracker._trackPageview();
</script>
</p>
</body>
</html>

Alles anzeigen

.....und dan klappte es auch

Unregistriert

Hallo,

thilda - Hab es schon geändert - bei mir wirds in folgenden Browsern völlig identisch angezeigt...

IE 6.0.2900
Chrome 2.0.172.31
FF 3.0.10

@yeti - bezüglich
1) welche fehlerbereinigung - was hast du konkret geändert ?
3) reset styles - bewirkt das ähnliches wie

* {margin:0; padding:0;}

mfg

Hannes

yeti66

Zitat

@yeti - bezüglich
1) welche fehlerbereinigung - was hast du konkret geändert ?
3) reset styles - bewirkt das ähnliches wie

1. Ich hatte den DOCTYPE von HTML auf XHTML umgestellt und entsprechende Anpassungen an die Anforderung des XHTML gemacht. Das ist vielleicht besser ausgedrückt als Fehlerbereinigung.(siehe auch Unterschiede HTML vs. XHTML : http://de.selfhtml.org/html/xhtml/unterschiede.htm)
2. Die Reset Styles sind halt umfangreicher in der Funktion und gehen über den Universalselektor hinaus. Mit dem Universalselektor wird halt für alle Elemente im Dokument die voreingestellten Randabstände zurückgesetzt, mehr nicht. Wenn Dir das im Dokument genügt ist es OK. Der Witz ist es aber die volle Kontrolle über das Layout und Maßigkeit zu haben und die unterschiedlichen Browser leider von unterschiedlichen, weil eigenen, "Standarts" ausgehen. Es gibt von verschiedenen Webdesignern unterschiedliche herangehensweisen in Sachen RESET STYLE(siehe auch: http://bigod.net/2008/02/03/reset-css-a-la-eric-meyer/). Einfach mal nach ResetStyle googeln - das ist ein interessantes weil lohnendes Thema und jedem zu empfehlen.

CSS Absolute Positionierung - Problem mit Chrome

Tags

Benutzer online in diesem Thema