HTML Opera verschiebt Grafik 1px nach links

Belee · 24. Juni 2010

Hallo

Habe hier ein Problem mit dem Opera Browser.

Wenn Ihr euch dieses Beispiel anschaut: http://www.discoradioaction.eu/test.html

Seht Ihr das dass Image also Bild unter dem Opera 1 Pixel nach links verschoben ist, unter dem IE7,8 Firefox und Chrome ist das nicht der Fall, auch weiß ich so langsam nicht wie ich das flicken könnt weil von der Logik her darf das garnicht passieren was der Opera da macht. Ich habe auch wenig lust das Design jetzt wegen dem Opera komplett umzubauen.

Es spielt auch keine Rolle ob die Grafik in einem Container gepackt wird, ich habe alles möglich versucht, Opera verschiebt immer 1 Pixel.
Dem #wrapper im CSS habe ich extra eine 1200px höhe angegeben weil...solange kein Scrollbalken im Opera angezeigt bzw. gebraucht wird dann wird komischerweise nicht verschoben.

Eventuell sieht oder weiß ja hier doch jemand woran es liegen könnte ?

Danke

Belee

RainerBN · 24. Juni 2010

Sieht für mich o.k. aus (Opera 10.60beta unter Windows 7 32bit). Möglicherweise ein Fehler in deiner Opera-Version, der in einer zukünftigen Version behoben wurde...

masterchorch · 24. Juni 2010

mit Opera 10.54 auf XP auch keine Probleme!

XimeX · 24. Juni 2010

Opera 10.60beta win7 64bit auch keine probleme!

TheGhost31.08 · 24. Juni 2010

Mit meinem Opera (10.54) ist ebenfalls der Spalt zu sehen

LieberNetterFlo · 24. Juni 2010

neuste Opera 10.60 Build, Win7 32Bit, KEIN Spalt zu sehen

kennyalive · 24. Juni 2010

Safari 5.0 (6533.16), Spalt ist zu sehen.

bitfunker · 24. Juni 2010

Wow, bei Laut.fm hast du es weit gebracht, Respekt dafür.

Es muss wirklich was mit Scrollbalken zu tun haben, ich sehe das auch auf dem Notebook (Opera 10.54). masterchorch sieht es nicht, daher ist es kein Versionsproblem.

Zeigste uns mal die CSS?

Mr. Snoot · 24. Juni 2010

In Opera seh ich den Fehler auch nicht, aber dafür im IE6 und 7.

Hiermit klappts in den beiden IEs, vielleicht auch in Opera und da kannst damit weitermachen:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">

      html, body
      {
        margin:0;
        padding-top:0;
        text-align:center;  /* Zentrierung im Internet Explorer */
      }

      div#page
      {
        text-align:left;	/* Seiteninhalt wieder links ausrichten */
        margin:0 auto;		/* standardkonforme horizontale Zentrierung */
        width:1280px;
        height:450px;
        padding:0;
        background-image:url(/styles/bg.jpg);
        background-repeat:no-repeat;
      }

      div#wrapper
      {
        margin:0 auto;
        width:942px;
      }

    </style>

  </head>

  <body>

    <div id="page">

      <div id="wrapper">
        <img src="/styles/top.jpg">
      </div>

    </div>

  </body>

</html>

beten · 24. Juni 2010

Neuste Chrome-dev Version (6.0.437.3) -> Spalt is da
sobald die Hoehe von dem Container deaktiviert wird, passt es wieder.

Gib doch das Bild als Hintergrund fuer den "wrapper" an. Klappt wunderbar

Gruß

Belee · 24. Juni 2010

@snoot
Das wäre DIV Suppe und da bin ich kein Fan von. Die umschliessende Grafik also die Spots links und rechts neben der Hauptfgrafik ist die Hintergrundgrafik des <body>, diese Grafik hat in der Mitte einen Auschnitt von 942px in diesen passt dann halt die Hauptgrafik rein welche in einem DIV steckt, das DIV wird aber von einigen Browsern sobald der Scrollbalken da ist nach links verschoben.

Hier mal die Grafiken solo:

Das BG des <body>

Und das Images also Hauptgrafik welche in einem zentrierten <div> steckt.

So, was also soll man hier falsch machen? Bild 1 oben wird als Hintergrund des BODY festgelegt "per css".

Grafik 2 wird in einem DIV was 942px breit ist eingesetzt und das DIV wird zentriert so das es genau in den Ausschnitt von Bild 1 passt, das tut es ja auch, nur einige Browser verschieben das DIV um 1px nach links.

942px ist dann halt praktish die Breite der Hauptseite "wo was passiert", machen ich aus den 2 Grafiken eine dann habe ich eine Breite von 1280px und muss nach unten dann viel mit PADDING und MARGIN arbeiten, das ist denke ich nicht der Sinn der Sache.
Ich verstehe wirklich nicht warum da um ein Pixel verschoben wird, das dürfe eigentlich nicht sein.

EDIT
Ich habe das Problem jetzt bei einigen anderen Seite ebenfalls festgestellt zB. die Seite der FIFA hat auch das Problem mit dem 1px.

Mr. Snoot · 25. Juni 2010

~~Evtl. mal den Cache leeren, oder Opera neu installieren (neuere Version); ich kann das Problem - wie viele hier - nicht rekonstruieren.~~

edit: okay, ich sehe gerade, dass es bei kennyalive das Problem auch in Safari gibt. Dann ist's wohl doch eher ein Layoutproblem.

P.S. zwei divs würde ich auch nicht gerade als div-Suppe bezeichnen. Und wenn ich mir so einige "Musterlösungen" für valide, CSS-Hack freie und browserunabhängige CSS-Layouts anschaue, dann sind da meist noch mehr divs verschachtelt (selbst dann, wenn es sich nur um ein einspaltiges Layout handelt).

Belee · 25. Juni 2010

Hi

Ja ich habe das Problem eigentlich auch nur durch Zufall entdeckt. Wenn du nämlich den Browser nicht maximierst und mal das Fenster langsam "also stufenweise" kleiner/größer ziehst siehst du das zB. in meinem Fall der Spalt mal da ist und mal nicht. Immer bei ungerader Fensterbreite ist der Spalt weg, bei gerader ist er da.

Und so eine große Layout Sache ist das nun auch nicht, man setzt doch eigentlich nur ein DIV und zentriert es, und das verschieben einige Browser wenn der Scrollbalken da ist um 1px, ich denke das ist kein HTML Problem sondern ein Browserproblem "Bug".

Ich habe aber gestern noch was herausgefunden...

Code:

#wrapper {
 width: 942px;
 height: 1500px;
 margin-right: auto;
 margin-left: auto;
 padding-left: 1px;
}

Das "padding 1px" lässt den Spalt beim Opera verschwinden

, das ist das CSS für die Div-Box die auf dem <body> liegt. Das Problem hier ist dann aber das der IE und Firefox dann den Spalt zeigen.
Nun dachte ich ich kann mit Hacks arbeiten doch leider spuckt Opera mir hier wieder in die Suppe weil die Hacks die ich für den Firefox anwenden wollte der Opera auch kennt und abarbeitet

Also bleibt mir nichts anders übrig als das Design zu überarbeiten bzw. es so zu machen das der Spalt nicht zu sehen ist.

Ach und so soll es dann halt aussehen das ganze: http://www.discoradioaction.eu/dra_preview.jpg

The_Pfitsch · 25. Juni 2010

opera rundet immer die pixel, auf bzw ab, deshalb, versuch doch mal 5 divs mit width:19% und float left, sovie ein div mit 95%, värbst sie dem letzten gibst du eine andere farbe als den anderen fünf, und nun schiebe deinen browser langsam zusammen, und du merkst es fehlen immer zwischen 0 und 5 pixel, nachdem 5 pixel fehlen, wird wieder aufgerundt, und es fehlt wieder nix. das ist bei sehr vielen browsern so nicht nur bei opera.

Backslash · 27. Juni 2010

Eine mögliche Lösung, die praktisch nicht auffält aber nicht ganz korrekt ist, wäre das Bild einen Pixel breiter als das <div> zu machen. Dann gibt es zwar eine minimale Verschiebung um 1px , diese ist aber kaum sichtbar und verdeckt den teilweise auftretenden Rand.

test.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="./styles/main.css" type="text/css" media="screen" />
        
        <title>Disco Radio Action -- TEST</title>
    </head>
    <body>
        <div id="center">
            <img src="./styles/top.jpg" alt="test" id="top_img" />
        </div>
    </body>
</html>

main.css:

Code:

/* Standard */
body             
{
    background-color: black;
    background-image: url(./bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    color: #000;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

#center {
    width: 942px;
    margin: 0 auto 0 auto;
    height: 1200px;
}

img#top_img {
    width: 943px;
}

Koki_87 · 28. Juni 2010

Also erstmal hat nicht Opera das Problem, sondern der feurige Fuchs, der hat einen 1px Problem, welches bekannt ist (auch bei den Mozilla Entwicklern).

2. Bei mir in Opera 10.54 sieht es gut aus, weiß aber nicht ob du schon was gemacht hast. (bei mir wird aber auch nur alles bis Play now angezeigt).

3. für Opera gibt es als CSS Hack Möglichkeit die @media Eigenschaft, einfach mal nach googlen (Opera CSS Hack @media)

Suche

HTML Opera verschiebt Grafik 1px nach links

Belee

Lt. Commander

RainerBN

Ensign

masterchorch

Cadet 3rd Year

XimeX

Lt. Commander

TheGhost31.08

Captain

LieberNetterFlo

Rear Admiral

kennyalive

Admiral

bitfunker

ewohner

Mr. Snoot

Gast

beten

Lt. Junior Grade

Belee

Lt. Commander

Mr. Snoot

Gast

Belee

Lt. Commander

The_Pfitsch

Cadet 3rd Year

Backslash

Captain

Koki_87

Lt. Commander

Ähnliche Themen