[CSS] IE zeigt richtig an, Opera und Firefox nicht

scheibo · 31. Dez. 2005

Hallo, ich bin dabei meine Seite von Tabellen zu befreien, jetzt habe ich es soweit hinbekommen das es im IE passt, leider wird es im Firefox und Opera nicht richtig angezeigt.
Kann mir bitte jemand den Fehler zeigen?

Die index.php:

HTML:

<div id="layout"> 
  <div id="header"><img src="images/header.jpg" alt="scheibo.de - Die Partycommunity" width="766" height="113"></div>
  <div id="navigation"><a href="index.php?site=startseite"><img src="images/_button_startseite.jpg" alt="Startseite" width="175" height="28" border="0"></a><br>
    <a href="index.php?site=events"><img src="images/_button_partydates.jpg" alt="Partydates" width="175" height="27" border="0"></a><br>
    <a href="index.php?site=news"><img src="images/_button_newseinsenden.jpg" alt="News Einsenden" width="175" height="27" border="0"></a><br>
    <a href="archiv.php"><img src="images/_button_archiv.jpg" alt="Archiv" width="175" height="27" border="0"></a><br>
    <a href="http://www.scheibo.de/forum"><img src="images/_button_forum.jpg" alt="Forum" width="175" height="27" border="0"></a><br>
    <a href="http://www.scheibo.de/der%20chat/"><img src="images/_button_chat.jpg" alt="Chat" width="175" height="27" border="0"></a><br>
    <a href="index.php?site=links"><img src="images/_button_links.jpg" alt="Links" width="175" height="27" border="0"></a><br>
    <a href="index.php?site=kontakt"><img src="images/_button_kontakt.jpg" alt="Kontakt" width="175" height="27" border="0"></a><br>
    <img src="images/_navi_down.jpg" width="175" height="8"></div>
  <div id="werbebanner_header"> 
    <!-- Werbebanner  Div -->
    <div id="werbung_links"><img src="images/banner_01.jpg" alt="Werbung" width="15" height="65"></div>
    <div id="werbung_oben"><img src="images/banner_02.jpg" width="468" height="2"></div>
    <div id="werbung_rechts"><img src="images/banner_03.jpg" width="2" height="65"></div>
    <div id="werbung_unten"><img src="images/banner_05.jpg" width="468" height="3"></div>
    <div id="werbebannerbild"><img src="images/scheibobanner/banner.gif" alt="Werben auf scheibo.de kann so  einfach sein!" width="468" height="60"></div>
    <!-- Werbebanner ende -->
  </div>
  <div id="inhalt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
    dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
    lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
    te feugait nulla facilisi. 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
      wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
      lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
      odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
      te feugait nulla facilisi.</p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
    dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
    lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
    te feugait nulla facilisi. </div>
  <div id="unternavi"></div>
  <div id="footer"><a href="http://www.scheibo.de" target="_blank"><img src="images/footer.jpg" alt="scheibo.de" width="766" height="29" border="0"></a></div>
<div id="rechtelinie"></div>
</div>

Hier die CSS:

HTML:

body{padding : 0; margin : 0; font-family: verdana; font-style: normal; font-size: 11px; color: #000000;}
#layout{position : absolute;top : 0;left : 0;background-color: #AED8AA;width: 766px;height: 100%;z-index: 10;}
#navigation{float:left;min-height:800px;width: 175px;z-index: 20;}
#werbebanner_header{position : absolute;top : 25px;left : 281px;z-index : 100;}
/* Der zusammengesetzte Werbebanner */
#werbung_links{position : absolute;top : 0;left : 0;z-index : 100;}
#werbung_oben{position : absolute;top : 0;left : 15px;z-index : 100;}
#werbung_rechts{position : absolute;top : 0;left : 483px;z-index : 100;}
#werbung_unten{position : absolute;top : 62px;left : 15px;z-index : 100;}
#werbebannerbild{position : absolute;top : 2px;left : 15px;z-index : 100;}
/* Der zusammengesetzte Werbebanner ENDE*/
#inhalt{width: 588px;z-index : 50;padding:10px;}
#unternavi{background-color: #45AD3A;background-image:  url(images/_navi_background.jpg);width: 175px;background-repeat: repeat-y;position:absolute;top: 0;margin:0;height: 100%;z-index : -1;}
#footer{width: 766px;height: 29px;clear:leftz-index : 5;}
#rechtelinie{position:absolute;background-color: #ffffff;background-image:  url(images/_right.jpg);width: 5px;background-repeat: repeat-y;top: 0;left : 766px;height: 100%;z-index : 3;}

Online Beispiel

Finde es auch komisch das ich bei dem DIV für die Grafik unter der Navigation einen Negativen wert angeben musste obwohl die Grafik über der Layout DIV liegt (#unternavi ).

dkdenz · 31. Dez. 2005

Da ich keinen IE installiert habe, weiss ich nun nicht, wie es aussehen soll.
Ich mutmaße mal, Dich stört es, das der Inhalt von #inhalt unten wieder nach links fliesst?
Und das die Hintergrundfarbe plötzlich aufhört?
Dann wäre zu empfehlen, keine Hohenangabe zu benutzen (100%).
2. keine Positionierung mit float, sondern absolut.
usw
Empfehlenswert wäre es, wenn Du Dein Layout zuerst für den FireFox und den Opera machst.
Das geht erstmal einfacher. Dann für den IE zusammenschrauben.
Verstehe auch nicht ganz Deine z-index-Aktionen.

scheibo · 31. Dez. 2005

dkdenz schrieb:
Dann wäre zu empfehlen, keine Hohenangabe zu benutzen (100%).

ich muss eine höhenangabe machen damit sich das Design über die ganze Seite ausbreitet, auch wenn der Inhalt z.b. nur 1 Satz wäre. Wenn ich eine höhenangabe mache sitzt der "Footer" der Seite ja nicht mehr unten (am ende der Browsers).

dkdenz schrieb:
2. keine Positionierung mit float, sondern absolut.

Eine Absolute Angabe kann ich (meines wissens) nicht nehmen da sich, wenn der Text länger ist, das DIV über die eigentliche Seite legt und somit steht der Text nicht mehr in dem Layout.

dkdenz · 01. Jan. 2006

scheibo schrieb:
ich muss eine höhenangabe machen damit sich das Design über die ganze Seite ausbreitet, auch wenn der Inhalt z.b. nur 1 Satz wäre. Wenn ich eine höhenangabe mache sitzt der "Footer" der Seite ja nicht mehr unten (am ende der Browsers).

Aber wie Du siehst, ist das mit %-Angaben problematisch.

scheibo schrieb:
Eine Absolute Angabe kann ich (meines wissens) nicht nehmen da sich, wenn der Text länger ist, das DIV über die eigentliche Seite legt und somit steht der Text nicht mehr in dem Layout.

Das ist doch jetzt auch so.
Ausserdem verstehe ich das jetzt nicht wirklich, was Du meinst,
denn eine absolute Positionierung hat ja nix mit der Länge des Layouts zu tun.
Du vermeidest so aber, das sich der rechte Inhalt nach dem float an den linken Rand des Browserfensters klatscht.

Sorry, aber das Layout ist dermaßen einfach,
das es eigentlich keine Probleme hätte geben dürfen.
Hier mal zwei Vorlagen:
http://intensivstation.ch/files/templates/temp02.html
http://intensivstation.ch/files/templates/temp02a.html
...und dann die Logik mit in's Spiel bringen.

scheibo · 01. Jan. 2006

Habe jetzt einmal versucht eines dieser Beispiele anzupassen.
Hier das Resultat: klick

Jetzt siehst du bestimmt auch was ich mit der Höhenangabe meine, die Navigation überstreckt sich nicht über die ganze Seite (bis zum Footer).
Darin sehe ich noch das Problem, und im IE wird in der Navigation nur die Buttons angezeigt und das Hintergrundbild wird nicht angezeigt.

Hier die Index:

HTML:

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
<!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">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="index1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<img src="images/header.jpg" alt="scheibo.de - Die Partycommunity" width="766" height="113" /> 
  <DIV id=menu> <img src="images/_button_startseite.jpg" alt="Startseite" width="175" height="28" /><br />
    <img src="images/_button_partydates.jpg" alt="Partydates" width="175" height="27" /><br />
    <img src="images/_button_newseinsenden.jpg" alt="News Einsenden" width="175" height="27" /><br />
    <img src="images/_button_archiv.jpg" alt="Archiv" width="175" height="27" /><br />
    <img src="images/_button_forum.jpg" alt="Forum" width="175" height="27" /><br />
    <img src="images/_button_chat.jpg" alt="Chat" width="175" height="27" /><br />
    <img src="images/_button_links.jpg" alt="Links" width="175" height="27" /><br />
    <img src="images/_button_kontakt.jpg" alt="Kontakt" width="175" height="27" /><br />
    <img src="images/_navi_down.jpg" width="175" height="8" /> </DIV>
<DIV id=inhalt>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure 
    dolor in hendrerit in vulputate velit esse molestie consequat, vel willum 
    lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto 
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
    te feugait nulla facilisi. 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
    enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in 
    hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
    facilisi.</p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
  ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit 
  in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat 
  nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
  praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
  ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit 
  in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat 
  nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit 
  praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</DIV>
  <div id="footer"><a href="http://www.creativschmiede-eichsfeld.de" target="_blank"><img src="images/footer.jpg" alt="Design by Creativschmiede Eichsfeld" width="766" height="29" border="0" /></a></div>
</div>
</body>
</html>

und die CSS dazu:

HTML:

HTML {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-TOP: 0px;
	HEIGHT: 100%
}
BODY {
	width: 100%;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	FONT-SIZE: 12px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	COLOR: #000000;
	PADDING-TOP: 0px;
	FONT-FAMILY: Verdana, Arial, SunSans-Regular, Sans-Serif;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #FFFFFF
}
#menu {
	top: 113px;
	LEFT: 0px;
	WIDTH: 175px;
	POSITION: absolute;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #45AD3A;
	background-image:  url(images/_navi_background.jpg);
	background-repeat: repeat-y;
	visibility: visible;

}
#inhalt {
	MARGIN-LEFT: 175px;
	HEIGHT: 100%;
	BACKGROUND-COLOR: #AED8AA;
}
#footer {
	clear:left;
	padding:0px;
	margin:0px;
	text-align: left;
}
#container {
	width: 766px;
	padding:0px;
	margin: 0px;
	border-right-width:1px;
	border-right-color:#000000;
	border-right-style:solid; 
}

P.S.: Ein frohes neues Jahr wünsche ich

Myribo · 01. Jan. 2006

gib dem container mit der id "container" mal die hintergrundfarbe der navi.

scheibo · 01. Jan. 2006

Myribo schrieb:
gib dem container mit der id "container" mal die hintergrundfarbe der navi.

Danke

das klappt, jetzt sieht es im Firefox und Opera schon so aus wie es sein soll, leider habe ich im IE nach so einen Rand (siehe Bild) habe aber eigentlich keine Abstände angegeben

Bitte mal im IE anschauen KLICK

Kann dem container zwar sagen das er sie Farbe annehmen soll und dann ist der Rand weg, aber irgendwo muss der ja herkommen.

Und noch ein eher Größeres Problem....wie ich schon vorher erwähnte hab ich ein Problem wenn zu wenig Text in der Seite steht.
Hat vielleicht jemand einen Tipp?

Mit Text (KLICK)
zum Vergleich
Ohne Text (KLICK)

[CSS] IE zeigt richtig an, Opera und Firefox nicht

scheibo

New member

dkdenz

New member

scheibo

New member

dkdenz

New member

scheibo

New member

Myribo

New member

scheibo

New member