✔ IE - Firefox = Verschiedene Anordnung des Designs (css)

Status
Nicht offen für weitere Antworten.
P

Photocharts

Mitglied
Mhh, brauche mal eure Hilfe.

Und zwar habe ich mein neues Design fast fertig gecodet, aber irgendwie entsteht beim Firefox so eine schwarze Spalte, wenn das Design beim IE sitzt.
Ist es beim Firefox richtig, sieht es im IE nicht richtig aus...

Das ganze habe ich mit Css gemacht, da mich die Tabellen aufgeregt haben -.-

css3.css:

HTML: 
div#navi {
  position: absolute;
  top: 84px;
  left: 204px;
  height: 40px;
  width: 400px;
  padding: 0px;
  z-index : 4;
}

div#navi2 {
  position: absolute;
  background-color: #D9CDBD;
  top: 138px;
  left: 620px;
  height: 424px;
  width: 162px;
  z-index : 4;
}

div#haupt {
  position: absolute;
  background-color: #FFF3E5;
  top: 120px;
  left: 187px;
  min-height: 420px;
  height: auto;
  width: 393px;
  padding: 12px;
  z-index : 4;
}

div#links1 {
  position: absolute;
  top: 30px;
  left: 0px;
  height: 120px;
  width: 204px;
  padding: 0px;
  z-index : 4;
}

div#links2 {
  position: absolute;
  background: url(frankreich/links2.jpg);
  top: 120px;
  left: 0px;
  height: 442px;
  width: 204px;
  padding: 0px;
  z-index : 4;
}

div#mitte1 {
  position: absolute;
  background: url(frankreich/mitte1.jpg);
  top: 10px;
  left: 590px;
  height: 120px;
  width: 30px;
  padding: 0px;
  z-index : 4;
}

div#mitte2 {
  position: absolute;
  background: url(frankreich/mitte2.jpg);
  top: 120px;
  left: 580px;
  height: 442px;
  width: 30px;
  padding: 0px;
  z-index : 4;
}

div#rechts1 {
  position: absolute;
  background: url(frankreich/rechts1.jpg);
  top: 0px;
  left: 620px;
  height: 120px;
  width: 160px;
  padding: 0px;
  z-index : 4;
}

div#rechts2 {
  position: absolute;
  background: url(frankreich/rechts2.jpg);
  top: 120px;
  left: 603px;
  height: 19px;
  width: 179px;
  padding: 0px;
  z-index : 4;
}

die index.php seite:

HTML: 
<div id="links1"><a href="index2.php?section=start"><img src="../frankreich/links1.jpg"></img></a>
</div>

<div id="navi">
<a href="index2.php?section=start" name="Start"><img src="../frankreich/start.jpg" border="0"></a>&nbsp;&nbsp;
<a href="index2.php?section=foto&haupt=foto" name="Fotografie"><img src="../frankreich/fotos.jpg" border="0"></a>&nbsp;&nbsp;
<a href="index2.php?section=kreatives&haupt=kreatives" name="Kreatives"><img border="0" src="../frankreich/kreatives1.jpg"></a>
</div>

<div id="mitte1"> </div>

<div id="rechts1"> </div>

<div id="links2"> </div>

<div id="mitte2"> </div>

<div id="rechts2"> </div>

<div id="haupt"><small><font face="VERDANA,ARIAL,HELVETICA"><? include ('haupthaupt.php'); ?></font></small></div>

<div id="navi2"><? include "http://photocharts.po.ohost.de/db/zufallsbild.php"; ?><br><br>
      <?php
 if(isset($_GET['section']) AND isset($navi[$_GET['section']])) {
  if(!file_exists($navi[$_GET['section']])) echo "Die Datei ist nicht vorhanden.";
     include $navi[$_GET['section']];
   }
   else {
       include $navi['start'];
   }
?></div>

Wäre echt klasse, wenn ihr mir helfen könntet...!


LINK: http://www.m0l.biz/users/photocharts/startseite/indexfrankreich2.php

--> Die einzelnen Links sind noch nicht richtig, also nicht wundern. Wer dennoch interesse am Inhalt hat: http://www.photocharts.de
 
Die schwarze Spalte (links vom DIV #navi2) taucht bei mir im Firefox (2.0) und IE (6.0) auf.

Vielleicht hilft es weiter, wenn du die linke Positionsangabe für das DIV #navi2 auf 610px herabsetzt?

Und entferne noch die doppelt vorhanden Code-Zeilen aus dem Dokument:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Photocharts - Manuela Dörr</title>
...
 
Jetzt habe ich es für den firefox optimiert, es ist im IE aber nicht richtig. Mache ich es für den IE passend, geht es im Firefox nicht richtig.

--> Die Codezeile oben habe ich gelöscht, thx.
 
Vermutlich hängt es mit dem Doctype zusammen, den du derzeit für das Dokument deklarierst, denn dieser versetzt den IE in den sog. Quirksmodus, weshalb er das Boxmodell falsch interpretiert, und so die padding-Angaben des DIVs #haupt nicht zur Breitenangabe hinzuaddiert.

Die doppelten Code-Zeilen sind in der Online-Version noch immer vorhanden.
 
Ach so... Jetzt habe ich die kompletten Zeilen rausgeschmissen, also die Codezeilen.
Das Problem besteht nach wie vor...

Was kann ich dagegen am besten tun? Oder ich bau den Hauptteil einfach in eine Tabelle *überleg*


EDIT: Jo, das war der Fehler. RIESEN Dankeschön ;) Nehme jetzt wohl eine Tabelle und stell bei Cellspacing einfach 6 oder so ein.
Danke ;)
 
Zuletzt bearbeitet:
Probier es doch mal mit einer der folgenden Doctype-Varianten:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
oder
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück