Forum
Tipps
News
Menu-Icon

IE6: HTML/CSS Hintergrundgrafik beginnt nicht am linken Rand

Hallo,
Bei meinem aktuellen Projekt verwende ich für einzelne Texte auf einer Seite div-container, jeder Text bekommt darin eine h2-Überschrift, die per CSS eine Hintergrundgrafik zugewiesen bekommt.
Der Microsoft Internet Explorer 6 zeigt bei der ersten Box auf der Seite die Grafik um einige Pixel nach rechts verschoben an, die folgenden Boxen sind korrekt dargestellt. (Ebenfalls getestet auf IE7 und Firefox 1.5, keine Probleme.) Es scheint sich also um einen (mir bislang nicht bekannten) Internet-Explorer-Bug zu handeln. Kennt jemand hierfür eine Lösung/Workaround?

Eine eingekochte (auf die Problemstelle beschränkte) Version der Seite habe ich auf
 http://www.docdrum.de/ie6bugdemo/index.html

zum veranschaulichen veröffentlicht.

Gruß,
DocDrum


Antworten zu IE6: HTML/CSS Hintergrundgrafik beginnt nicht am linken Rand:

Moin,
leider war die Demo-Seite aufgrund von Seiteneffekten bei Serverbasteleien kurz nicht verfügbar, jetzt gibt es sie wieder und eine Lösung hab ich noch nicht gefunden. Hat irgendjemand einen Vorschlag? Selbst kleine Tips könnten hilfreich sein, weil man ja häufig gerade das offensichtlichste übersieht.

Gruß,
DocDrum

Kann es sein, dass hier ein </div> fehlt?

<div id="container">

  <div id="sidebar_left">
    <div id="subnav">
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>

*hüstel* ähm... jap, das fehlt, ist wohl beim 'einkochen' verloren gegangen... in der Ursprungsversion ist der Fehler nicht drin, die ist laut validator.w3.org absolut in Ordnung (wie auch das Stylesheet), deshalb gehe ich davon aus, dass das nicht das Problem war... hab das fehlende 'div' eingefügt, aber momentan keinen IE6 zur Verfügung um das zu testen... wenn irgendein stolzer IE6-Besitzer bitte so nett wäre, ein kurzes 'geht' bzw. 'geht immer noch nicht' zu posten... :)

Gruß,
DocDrum

Also wenn ich das div schließe, wird die Grafik bei mir bis zum Rand gezeigt (hab mir kurz eine gebastelt) ... wenn das div offen ist geht´s nicht bis zum Rand.

... allerdings zerschießt´s mir dann auch das Layout :-\

Habs gerade nochmal auf IE6 getestet, Fehler besteht weiterhin... der div, den du geschlossen hat, gehörte wohl zu einer anderen Layout-Ebene :)

Gruß,
DocDrum

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Sehr merkwürdiges Phänomen. Hab mich auch schon einige Zeit dran versucht - ohne Erfolg  :-[

Möglicher Workaround: Vielleicht kannst du die Integration des Hintergrundbildes auch noch auf das DIV der nächsthöheren Ebene (sprich: "drunter") ausweiten. Gibt dann zwar erstmal Trouble mit dem 1px Rand, aber den könntest du oben ja wegnehmen und den dunklen Grauton des Randes in die Hintergrundgrafik mit reinbasteln.

greez 8)
JoSsiF

Das Hintergrundbild auf den DIV zu setzen wäre eine Möglichkeit, mit nur repeat-x und passender Höhe dürfte das den gleichen Effekt haben (ich meine, es sollte das selbe Bewirken, nicht, dass der selbe Effekt auftritt... ich hoffe, ich hab mich klar genug ausgedrückt :) )

Ein hässlicher Workaround war, noch zusätzlich ein leeres DIV vor dem ersten eigentlichen einzufügen, und per CSS 'invisible' zu setzen... da erscheint zwar eine Lücke im Gesamtbild, aber die Hintergrundgrafik wird dann im ersten sichtbaren komplett angezeigt.  CSS-parameter 'hidden' reicht nicht, weil das Element vor der Renderengine verborgen bleibt, und somit das zweite (das erste sichtbare) den fehlerhaften Balken bekommt...

Hab (mal wieder) keinen Zugriff auf IE6 und ne Präsentation vorzubereiten, Resultate gibt's wohl erst morgen abend...

Gruß und Dank,
DocDrum

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Hab (mal wieder) keinen Zugriff auf IE6

Du glücklicher Mensch ;D

Kurzes Feedback: Ich hab das Hintergrundbild jetzt im DIV statt in der Überschrift geladen, jetzt geht es problemlos!
Vielen Dank für die Hilfe

Gruß,
DocDrum


« Gemalter Strich mit Hyperlink versehenWomit fange ich an? (Podcast) »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Hypertext
Hypertext ( zu Deutsch: Übertext) ein ein von dem Informatiker Theodore L. Nelson in den sechziger Jahren geprägter Begriff für Text, der dreidimensional g...

Textur
Unter einer Textur versteht man eine Oberflächenstrukur, die ein bestimmtes Material simuliert, wie Holz, Tapete oder Metall. Bei der 3D-Computeranimation bezeichnet...

CSS
CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist....