Ergebnis 1 bis 7 von 7

Thema: CSS Absolute Positionierung - Problem mit Chrome

  1. #1
    HTML Newbie
    Registriert seit
    22.03.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Absolute Positionierung - Problem mit Chrome

    Hallo Leute!

    Ich habe ein sehr merkwürdiges Problem.




    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Thonixx
    Gast

    Standard AW: CSS Absolute Positionierung - Problem mit Chrome

    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 (www.browsershots.org).

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.03.2009
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Absolute Positionierung - Problem mit Chrome

    Danke - für diesen Tip.

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

  4. #4
    Meister(in)
    Registriert seit
    27.03.2009
    Ort
    Berlin
    Beiträge
    278
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Absolute Positionierung - Problem mit Chrome

    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.

  5. #5
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Absolute Positionierung - Problem mit Chrome

    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-Code:
    <!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>
    .....und dan klappte es auch
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  6. #6
    Unregistriert
    Gast

    Standard AW: CSS Absolute Positionierung - Problem mit Chrome

    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

  7. #7
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Absolute Positionierung - Problem mit Chrome

    @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.
    Geändert von yeti66 (20.06.2009 um 15:23 Uhr)
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

Ähnliche Themen

  1. CSS-Layout absolute Positionierung
    Von SinnlosS im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 03.04.2009, 15:35
  2. Problem CSS-Positionierung IE6
    Von Daniel 88 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 06.09.2007, 21:48
  3. Ist Absolute Positionierung in einer Tabelle möglich?
    Von Jimmy bondy im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.05.2006, 09:38
  4. absolute positionierung ändern
    Von Monchi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 17.07.2005, 18:08
  5. postion:absolute Problem
    Von elbart im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.01.2005, 16:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •