• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem Darstellung IE7 und Firefox

Status
Für weitere Antworten geschlossen.
W

Werner I.

Neues Mitglied
Guten Abend zusammen,

ich habe ein Problem mit der Darstellung. Im IE7 wird es korrekt dargestellt, im Firefox und Opera allerdings verschiebt sich der Container (siehe Beispiel Werners Website - Links pr.HP ); den entsprechenden CSS-Code füge ich mal an.

Kann mir bitte jemand weiterhelfen, wie ich das Problem - es existiert leider auch noch an anderen Stellen - beseitigen kann.

Danke für Eure Hilfe
Werner

Code: 
div {background-color:#000000;}
 div#a
 {
  position:absolute; left:25px; top:655px;
  color: #C0C0C0;
  font-size: 100%;
  width:100px; height:20px;
 }
 #b
 {
  position:absolute;  left:260px; top:655px;
  color: #C0C0C0;
  width:220px; height:20px;
 }
 #c
 {
  position:absolute;  left:500px; top:250px;
  color: #C0C0C0;
  float: left;
  width:290px; height:20px;
 }
 #d
 {
  position:absolute;  left:860px; top:250px;
  color: #C0C0C0;
  float: left;
  width:120px; height:20px;
 }
  #e
 {
  position:absolute;  left:500px; top:290px;
  color: #C0C0C0;
  width:220px; height:220px;
 }
 
Wo verschiebt sich da was? Welcher Container? Bei mir im Firefox sieht es nicht so aus, als ob sich was verschieben würde, ich hab aber auch keinen IE7 zum Vergleichen.
 
Hallo Elfchen,

es geht speziell um den rechten Bereich: "private Homepage" und "zurück" sollten in einer Zeile stehen; im IE klappt es im Firefox und Opera wird private HP nach unten verschoben.

Gruß
Werner
 
Der IE scheint das margin der Überschrift nicht zu beachten, wenn du das margin auf 0 setzt, sind sie wieder gleich hoch.

Aber mal was anderes, warum machst du das alles mit position: absolute?
 
Hallo Thor,

entschuldige, wenn ich erst jetzt antworte, war aber über WE anderweitig tätig.

Aber mal was anderes, warum machst du das alles mit position: absolute?
Zum Vergrößern anklicken....
Ich habe ja auf meiner HP viele Bereiche, die auf allen Seiten gleich stehen sollen (daher ja auch CSS); ich kann diese einzelnen Bereiche doch nur über "div`s oder id`s" positionieren, oder?

Was aber mein mein Problem angeht: ich habe für den entsprechenden Bereich zwei Div`s (id c+d) angegeben; wobei ja beide top-gleich sind. Also müßten doch beide auch in einer Zeile stehen. Im IE funzt es, im FF nicht.

Danke für Deine Hilfe
Werner
 
Ja, die Entfernung nach oben ist bei beiden divs gleich, aber wie ich schon gesagt habe, hat die Überschirft noch ein margin, und dieses sorgt dafür, dass sie weiter unten angezeigt wird.

Gib ihr im CSS
Code: 
#c h2 {margin-top: 0;}
und sie sind gleichhoch.

Und um die absolute Positionierung zu vermeiden, könntest du folgendermaßen vorgehen. Ich war mal so frei, deine Bilder zu benutzen.

PHP: 
<!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="en" lang="en">
  <head>
    <title>Index</title>
    <meta name="description" content="Index" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <link type="text/css" rel="stylesheet" media="screen, projection" href="css/wernersBlumenSeite.css" />
    <link type="text/css" rel="stylesheet" media="print" href="css/print.css" />
    <script type="text/javascript" src="javascript/wernersBlumenSeite.js"></script>
  </head>
  <body>
    <div><img src="http://foto.stromer29.de/images/Banner3.jpg" alt="" /></div>
    <ul>
      <li><a href="#">Start</a></li>
      <li><a href="#">Galerien</a></li>
      <li><a href="#">Wissenswert</a></li>
      <li><a href="#">Gästebuch</a></li>
      <li><a href="#">Links</a></li>
    </ul>
    <div id="rosediv">
      <img id="rose" src="http://foto.stromer29.de/images/Rose.jpg" alt="" />
      <a href="impressum.html">Impressum</a>
      <a href="sitemap.html">Sitemap</a>
    </div>
    <div id="images">
      <a href="#">zurück</a>
      <h2>private Homepages</h2>
      <img src="http://foto.stromer29.de/Banner/fotogalerie-bodiez2.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/DDpix.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/ms-foto.gif" alt="" />
      <img src="http://foto.stromer29.de/Banner/Naturfotografie.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/fotogalerie-bodiez2.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/DDpix.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/ms-foto.gif" alt="" />
      <img src="http://foto.stromer29.de/Banner/Naturfotografie.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/fotogalerie-bodiez2.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/DDpix.jpg" alt="" />
      <img src="http://foto.stromer29.de/Banner/ms-foto.gif" alt="" />
      <img src="http://foto.stromer29.de/Banner/Naturfotografie.jpg" alt="" />
    </div>
  </body>
</html>
Code: 
* {
  color: #fff;
}

body, html {
  margin: 0;
  padding: 5px 0 0 15px;
  background-color: #000;
}

a {
  margin-right: 35px;
}

div#images {
  padding-top: 15px;
  width: 500px;
  margin-left: 550px;
}

div#images a {
  float: right;
}

div#images img{
  margin-bottom: 15px;
  display: block;
}

h2 {
  margin-top: 0;
}

img {
  border: 2px solid #fff;
}

ul {
  width: 500px;
  height: 1.5em;
  padding: 0;
  margin: 10px 0;
  list-style-type: none;
}

ul li {
  float: left;
  width: 100px;
  height: 1.5em;
  text-align: left;
}

div#rosediv {
  float: left;
}

#rose {
  display: block;
  margin-right: 15px;
}
 
Zuletzt bearbeitet:
Setze mal den Abstand von h2 einheitlich auf Null, da haben die Browser oft unterschiedliche Standardeinstellungen:
Code: 
h2 {margin: 0; padding: 0;}
Auf die absoluten Positionierungen würde ich ebenso verzichten. Das kannst du alles über float und margin lösen und sieht ebenfalls einheitlich aus.
Auch die vielen ID's sind z.T. überflüssig. Da kannst du z.B. ul-Listen verwenden.
 
Hallo Thor und prm,

zuerst einmal Danke für die Tips.

Ich habe die Codes von Thor mal kopiert und mittels Phase5 in neue Seiten kopiert und die CSS-Datei entsprechend umgenannt.

Auf den ersten Eindruck hab ich aber wohl nen Fehler reingebaut, weil die Seite die CSS-Daten wohl nicht richtig ausliest: Banner und Rose sind richtig, Hintergrund aber weiß und Links nicht nebeneinander sondern untereinander. Oder hab ich etwas übersehen?

Werde mich morgen noch mal damit befassen. Auf jeden Fall scheint es mir so schon die elegantere Lösung zu sein.

Euch noch einen schönen Abend.

Gruß
Werner
 
Werner I. schrieb:
Ich habe ja auf meiner HP viele Bereiche, die auf allen Seiten gleich stehen sollen (daher ja auch CSS); ich kann diese einzelnen Bereiche doch nur über "div`s oder id`s" positionieren, oder?
Zum Vergrößern anklicken....
Da scheinst Du ein grundlegendes Verständnisproblem zu haben.

1. CSS benutzt man, wenn man Design & Layout bestimmen will. Egal auf wievielen Seiten, egal ob sich irendwas auf mehreren Seiten wiederholt.

2. a) Meisten braucht man gar nichts besonders zu positionieren, weil die Browser das für einen übernehmen. Sie können Dinge meist besser positionieren, weil sie die Größe des Browserfensters berücksichtigen. Manuelle Positionierung durch den Webmaster ist oft überflüssig und macht die Vorteile des Positionierens durch den Browser zunichte.

b) Positionieren kannst Du alles! Du brauchst dafür kein spezielles Tag! Das wäre ja auch Blödsinn, denn für Layout ist CSS zuständig, aber nicht HTML! Deswegen positioniert man auch nur mit CSS und nicht mit HTML. Die Positionsangaben kann man selbstverständlich jedem HTML-Element zuweisen. Das Element <div> ist nur zum Gruppieren mehrerer Elemente zwecks gemeinsamer Formatierung.
Außerdem brauchst Du auch keine ID, um ein Element zu positionieren. Es kommt einzig darauf an, wie Du das Element ansprechen kannst, das Du positionieren willst. Das kann über allgemeine Selektoren passieren, auch über Klassen oder IDs, aber zum Positionieren ist nicht zwangsläufig eine ID (und schon gar nicht ein spezielles Tag) notwendig.

Gruß,
-Efchen
 
Hallo Efchen, hallo Thor,

Efchen, Dir zunächst einmal Danke für Deine ausführliche Erklärung; genau für Layout und Design hatte ich auf CSS aufgebaut. Ich muß allerdings gestehen, dass ich mich zwar versucht habe einzuarbeiten, aber - wie ich jetzt merken musste - zu umständlich und wohl nicht mit dem richtigen Erfolg.

Thor: ich habe diese Seite jetzt mal mit Deinen Daten hochgeladen, etwas bearbeitet und festgestellt, dass sie im Firefox korrekt dargestellt wird, im IE 7 aber bei den Links eine Verschiebung nach rechts gegeben ist; wenn ich mit jetzt "Display:inline" arbeiten würde, verschiebt sich alles andere wieder.

Im Opera wird der Bereich Impressum und Sitemap vollkommen überlappt dargestellt.

Hast Du mir villeich noch einen Tipp?

Danke und Gruß
Werner
 
Was den richtigen Weg zum Lernen angeht, habe ich die Erfahrung gemacht, dass die meisten, die CSS lernen wollen, bereits an HTML scheitern. Basis für CSS sollte immer ein valider und semantisch korrekter HTML-Code sein. Dazu gehört auch ein Doctype, der die Browser in den Standards Mode versetzt, um Darstellungsunterschiede zu vermeiden.

Vielleicht hilft Dir das ja weiter, um den richtigen Weg einzuschlagen, falls Fragen dazu sind, beantworte ich die gerne.

Gruß,
-Efchen
 
Ach herrjeh, das seh ich ja jetzt erst, das ist ja der völlig falsche Doctype, muss natürlich der hier sein
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Die Verschiebung der Links kam vom margin der Liste, margin-left und margin-right auf 0, dann ist das auch weg.

Das Überlappen hatte ich auch gesehen, allerdings nur einmal, jetzt nicht mehr. Hab den Code auf der Seite vorher mal geändert. Sry, stand da wohl etwas neben mir.
 
Hallo Thor,

Danke für die Korrektur. Darf ich noch zwei Fragen stellen.:?:

1. Im Firefox wird die Linkleiste korrekt linksbündig dargestellt; im IE wird diese Linkleiste etwas nach rechts verschoben: Wenn ich jetzt (für den IE) "Display:inline" einfüge, verschiebt sich aber wieder im Firefox alles.
Gibt es hier eine andere Lösung?

2. Wie kann ich es machen:Ich will bei z.B. den Images auf der Seite Priv.HP noch einige hinzufügen. Jetzt ist es ja so, dass durch das "clear:both" bei der Rose die nächsten unter der Rose auftauchen würden. Ändere ich das both in left, bekomme ich aber das Impressum nicht mehr direkt unter die Rose.

Ich danke schon mal für Tips

Gruß
Werner
 
Werner I. schrieb:
Im Firefox wird die Linkleiste korrekt linksbündig dargestellt; im IE wird diese Linkleiste etwas nach rechts verschoben
Zum Vergrößern anklicken....
Durch das text-align: left, welches du den Listenelementen schon gegeben hast, sollte das nicht mehr der Fall sein, bei mir ist es auch im IE links. Nimm das display wieder raus, denn das bringt da nichts, ausserdem steht da display: nline, was falsch ist.

Werner I. schrieb:
2. Wie kann ich es machen:Ich will bei z.B. den Images auf der Seite Priv.HP noch einige hinzufügen. Jetzt ist es ja so, dass durch das "clear:both" bei der Rose die nächsten unter der Rose auftauchen würden. Ändere ich das both in left, bekomme ich aber das Impressum nicht mehr direkt unter die Rose.
Zum Vergrößern anklicken....

Damit das Impressum immer unter der Rose bleibt, kannst du die Links direkt nach dem Bild schreiben, dann umgibst du das ganze mit einem div, gibst dem div eine id und die Eigenschaft float: left. Der Rose nimmst du im CSS das clear und das float und setzt dafür display: block. Dann werden die Links unterhalb der Rose angezeigt, sind mit in dem div und bleiben damit immer unterhalb der Rose, egal wo du noch Bilder hinzufügst.

Hab das auch vorne im Code geändert, da kannst du es dir anschauen.
 
Hallo Thor,

zunächst einmal Danke!! :grin: Es hat soweit gut geklappt; habe die CSS-Datei noch erweitert für die Link-Seite. Dank Deiner Hilfestellung hab ich wieder einiges gelernt.

Mit dem IE hast Du Recht, jetzt klappt es auch bei mir. Frag nicht warum Phase5 es immer falsch angezeigt hatte.

Wenn ich mir meine Seite auf einem Laptop mit 15er Bildschirm anschaue, habe ich das Problem, dass z.B. die Seite "Links" vollkommen falsch dargestellt wird: Die Links verschwinden alle komplett nach unten. Hat das evtl. was mit der festen Breite über Pixel zu tun?

Gruß
Werner
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben