Bilder werden im Firefox nicht angezeigt im
0 
Felix Riesterer
2
Bilder werden im Firefox nicht angezeigt im
Hallo zusammen! ich habe eine Webseite erstellt habe aber jetzt noch ein kleines Problem mit dem Firefox... und zwar wird folgende Seite im IE richtig angezeigt aber im Firefox nicht... Desweiteren funktioniert im Firefox margin-left: 50px; irgend wie auch nicht richtig.
http://www.back2the-roots.de/csm/index.php?mod=board
.......................................HTM-Datei
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="BackIIrootsboard.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" href="../uploads/rss/news.xml" />
</head>
<body>
<div id="wrapper0">
<div id="wrapper">
<div id="wrapperIIIII">
<div id="header"></div>
<div id="boarder_logi_left"></div>
<div id="subnav"><p style="margin-top:10px">
<p style="text-align: left; margin-left: 30px;"><a href="http://www.back2the-roots.de">Home</a><br></p>
</p></div>
<div id="boarder_logi_right"></div>
<div id="boarder_small_left_bottom"></div>
<div id="boarder_outsource_bottom"></div>
<div id="boarder_small_right_bottom"></div>
<div id="boarder_small_left_top"></div>
<div id="boarder_outsource_top"></div>
<div id="boarder_small_right_top"></div>
<div id="contentfloatholder">
<div id="boarder_float_left"></div>
<div id="content_forum">
<div class="navhead2">Forum</div>
<p style="margin-top:10px; margin-left:50px;">{func:show}</p>
</div>
<div id="boarder_float_right"></div>
</div>
<div id="footer_forum"><p style="margin-top:10px; font-weight:bold; ; color:#000000">{clansphere:navtime} - Load: {func:parse}ms - Queries: {func:queries}</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
........................................CSS-datei
* {margin: 0; padding: 0; border: 0;}
#green {color:#F4D711; }
body {
background-color:#242424;
color:#000;
font-family:Tahoma,Verdana,Helvetica,sans-serif;
font-size:10px;
text-align:center;
}
a:link, a:visited {
background-color: inherit;
color: #DEDFE3;
text-decoration: none;
font-weight:bold;
}
a:active, a:hover {
background-color: inherit;
color:#F4D711;
text-decoration: underline;
font-weight:bold;
}
div,span {
background-color:: inherit;
color:#C6C2C2;
font-family:Verdana,Helvetica,sans-serif;
}
td {
background-color: inherit;
color:#C6C2C2;
font-size:8pt;
vertical-align:top;
}
.navhead,.navhead2 {
margin: 0px;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/leaver.jpg) repeat-x;
font-size:10px;
font-weight: bold;
padding: 4px 10px;
text-align:left;
line-height: 9px;
color:#FFFFFF;
}
.navhead:first-letter,.navhead2:first-letter {
background-color: inherit;
color:#00FF00;
}
.navbodyb,.navbody2b {
margin: 0px;
list-style:none;
font-size:10px;
font-weight: bold;
padding: 0px 6px 0px 30px;
text-align:left;
line-height:22px;
}
/* wrapper holds left faux column tab */
/* nn6/7 will put content out of scrollable reach if auto is used unless the min-width is on body */
#wrapper {
width: 950px;
margin: 0px auto;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/boarder_left.jpg) repeat-y 0px 761px;
}
#wrapperI {
width: 950px;
margin: 0px auto;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/boarder_right.jpg) repeat-y 171px 779px;
}
#wrapperII {
width: 950px;
margin: 0px auto;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/boarder_left.jpg) repeat-y 180px 770px;
}
#wrapperIII {
width: 950px;
margin: 0px auto;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/boarder_right.jpg) repeat-y 773px 177px;
}#wrapperIIII {
width: 950px;
margin: 0px auto;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/boarder_left.jpg) repeat-y 782px 168px;
}#wrapperIIIII {
width: 950px;
margin: 0px auto;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/boarder_right.jpg) repeat-y 941px 0px;
}
#wrapper0 {
width: 950px;
margin: 0px auto;
background-color:#000000;
}
/*************** Faux Columns END *******************/
#header, #footer {
color: #000;
clear: both;
}
#header {
height:212px;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/header.jpg) no-repeat;
}
#subnav {
float: left;
height: 32px;
width: 932px;
background-color:#010D07;
}
#meets {
float: right;
width: 752px;
height: 70px;
background-color:#010D07;
}
#navigation {
width: 162px;
height: 384px;
float: left;
background-color: #000000;
}
#shoutbox {
float: left;
width: 162px;
min-height: 300px;
height:auto !important;
height: 300px;
background-color:#000000;
overflow: visible;
}
#counter{
float: left;
background-color:#000000;
width:162px;
height:120px;
}
#online {
float: left;
width: 162px;
min-height: 200px;
height:auto !important;
height: 200px;
background-color:#000000;
overflow: visible;
}
#last_news {
float: left;
width: 283px;
height: 150px;
background-color: #000000;
}
#last_topics {
float: left;
width: 283px;
height: 150px;
background-color: #000000;
}
#content {
text-align: left;
float: left;
width: 580px;
max-width: 580px;
background-color:#000000;
min-height: 450px;
height:auto !important;
height:450px;
overflow: visible;
}
#content_forum {
text-align: left;
float: left;
width: 932px;
max-width: 932px;
background-color:#000000;
min-height: 450px;
height:auto !important;
height:450px;
overflow: visible;
}
#calendar {
float: left;
width: 150px;
height: 150px;
background-color: #000000;
}
#right_field {
float: left;
width: 150px;
background-color: #000000;
min-height: 150px;
height:auto !important;
height: 150px;
overflow: visible;
}
#footer {background: #ccc; padding: 1px 0;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/footer.jpg) no-repeat;
height: 67px;
}
#footer_forum {background: #ccc; padding: 1px 0;
background: url(http://www.back2the-roots.de/csm/templates/Bt2r/Images/footer_forum.jpg) no-repeat;
height: 67px;
}
#contentfloatholder {/* right faux column tab */
background: url(sidebar.gif) repeat-y 100% 0;
float: left;
width: 100%;
}
#contentfloatholder:after {
/* this is for NN6 to clear floats */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
#center {
float:left;
width:602px;
}
#left {
float:left;
width: 180px;
}
#right {
float:right;
width: 168px;
margin: 0;
}
#right_content {
float:right;
width: 770px;
margin: 0;
}
/************* IE Mac CSS Only works for Win too **************/
* html div#centerwrap {margin: 0 -100% 0 0;}
* html div#left {margin: 0;}
div h3, div p {
margin: 1em 0;
}
/********** boarder ************************/
(hier kommen die ganzen rahmen) weggelassen da vom text zu lang...
-
Lieber Streuner,
http://www.back2the-roots.de/csm/index.php?mod=board
<link href="BackIIrootsboard.css" rel="stylesheet" type="text/css" />
das Stylesheet existiert nicht, zumindest nicht an der verlinkten Stelle (http://www.back2the-roots.de/csm/BackIIrootsboard.css).
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
und zwar wird folgende Seite im IE richtig angezeigt aber im Firefox nicht...
Erster Einwand: Was Du meinst, ist, dass die Seite im IE so angezeigt wird, wie Du möchtest (!), aber Firefox macht es anders. Üblicherweise ist es bei solchen Fragen nämlich [anderer Browser], der es richtig anzeigt, während der IE, insbesondere die Versionen vor 7, sich irgendwas zusammenmurkst, das nicht den Vorgaben entspricht.
Desweiteren funktioniert im Firefox margin-left: 50px; irgend wie auch nicht richtig.
Zweiter Einwand: "Geht nicht", "funktioniert nicht" und "funzt nicht" sind keine brauchbaren Fehlerbeschreibungen. Bitte gib Dir doch ein bißchen mehr Mühe anstatt in zwei Zeilen nur zu sagen, dass Du "irgendwie" ein Problem hast, dazu tonnenweise Code abzuladen und dann von den Helfern zu erwarten, dass sie sich zurechtfinden. Du hast nicht einmal gesagt, welches Element betroffen ist, geschweige denn den Code auf die problematischen Elemente abgespeckt.
Die nicht angezeigte Grafik im Seitenfuss: Du hast #contentfloatholder mit float:left versehen. Elemente mit gesetzter float-Eigenschaft fallen aus dem normalen Layout weitestgehend raus. Konkret beginnen nachfolgende Elemente an derselben Position, an der das float-Element steht, die Elemente liegen übereinander und lediglich die Zeilen der nachfolgenden Elemente verschieben sich, um Platz für das float-Element zu machen. Die Grafik ist deshalb zwar da, aber nicht dort, wo Du sie vermutest; sie steckt weiter oben hinter #contentfloatholder.
Dein Problem hat seine Ursache, wie eingangs schon vermutet, in einem Fehler des IE (auch wenn das fehlerhafte Ergebnis Dir zusagt, es bleibt ein Fehler).Ich vermute einfach mal, bei der margin-Geschichte handelt es sich ebenfalls um einen Fehler des IE (er setzt die Elementmaße aus margin, border, padding und width falsch zusammen), habe aber jetzt keine Lust, mich durch das Durcheinander zu wühlen, das Du da fabriziert hast. Und da steckt meiner Meinung nach Dein eigentliches Problem:
Du hast eine <div>-Wüste schönsten Ausmaßes produziert und setzt insbesondere <div>-Elemente so ein, wie es Anno Dazumal beim Tabellenlayout mit <td>-Elementen gemacht wurde, als Platzhalter für Grafiken und anderes (und Tabellenlayout benutzt Du hier und da auch noch, hast Dich also noch nicht einmal für eine Layouttechnik entschieden). Diese Vorgehensweise ist nicht im Sinne des Erfinders; CSS ist kein 1:1-Ersatz für das Tabellenlayout, sondern hat seine eigene Philosophie.
Mein Rat: Kipp den ganzen Kram über Bord und bleibe entweder beim Tabellenlayout oder befasse Dich mit HTML und CSS. Mit diesem Mischmasch, nix Halbes und nix Ganzes, tust Du niemandem einen Gefallen und hast selbst nur Ärger - wie ja hier bereits zu sehen.-
und zwar wird folgende Seite im IE richtig angezeigt aber im Firefox nicht...
Erster Einwand: Was Du meinst, ist, dass die Seite im IE so angezeigt wird, wie Du möchtest (!), aber Firefox macht es anders. Üblicherweise ist es bei solchen Fragen nämlich [anderer Browser], der es richtig anzeigt, während der IE, insbesondere die Versionen vor 7, sich irgendwas zusammenmurkst, das nicht den Vorgaben entspricht.
Desweiteren funktioniert im Firefox margin-left: 50px; irgend wie auch nicht richtig.
Zweiter Einwand: "Geht nicht", "funktioniert nicht" und "funzt nicht" sind keine brauchbaren Fehlerbeschreibungen. Bitte gib Dir doch ein bißchen mehr Mühe anstatt in zwei Zeilen nur zu sagen, dass Du "irgendwie" ein Problem hast, dazu tonnenweise Code abzuladen und dann von den Helfern zu erwarten, dass sie sich zurechtfinden. Du hast nicht einmal gesagt, welches Element betroffen ist, geschweige denn den Code auf die problematischen Elemente abgespeckt.
Die nicht angezeigte Grafik im Seitenfuss: Du hast #contentfloatholder mit float:left versehen. Elemente mit gesetzter float-Eigenschaft fallen aus dem normalen Layout weitestgehend raus. Konkret beginnen nachfolgende Elemente an derselben Position, an der das float-Element steht, die Elemente liegen übereinander und lediglich die Zeilen der nachfolgenden Elemente verschieben sich, um Platz für das float-Element zu machen. Die Grafik ist deshalb zwar da, aber nicht dort, wo Du sie vermutest; sie steckt weiter oben hinter #contentfloatholder.
Dein Problem hat seine Ursache, wie eingangs schon vermutet, in einem Fehler des IE (auch wenn das fehlerhafte Ergebnis Dir zusagt, es bleibt ein Fehler).Ich vermute einfach mal, bei der margin-Geschichte handelt es sich ebenfalls um einen Fehler des IE (er setzt die Elementmaße aus margin, border, padding und width falsch zusammen), habe aber jetzt keine Lust, mich durch das Durcheinander zu wühlen, das Du da fabriziert hast. Und da steckt meiner Meinung nach Dein eigentliches Problem:
Du hast eine <div>-Wüste schönsten Ausmaßes produziert und setzt insbesondere <div>-Elemente so ein, wie es Anno Dazumal beim Tabellenlayout mit <td>-Elementen gemacht wurde, als Platzhalter für Grafiken und anderes (und Tabellenlayout benutzt Du hier und da auch noch, hast Dich also noch nicht einmal für eine Layouttechnik entschieden). Diese Vorgehensweise ist nicht im Sinne des Erfinders; CSS ist kein 1:1-Ersatz für das Tabellenlayout, sondern hat seine eigene Philosophie.
Mein Rat: Kipp den ganzen Kram über Bord und bleibe entweder beim Tabellenlayout oder befasse Dich mit HTML und CSS. Mit diesem Mischmasch, nix Halbes und nix Ganzes, tust Du niemandem einen Gefallen und hast selbst nur Ärger - wie ja hier bereits zu sehen.Also gut.. muss sagen ich bin noch nen ziemlicher neuling was das ganze angeht.... (sieht man vielleicht an meinem kuddelmuddel... na ja ich war eigentlich soweit schon richtig froh das dass was ich mir so vorgestellt hatte lief... kein ding ich werde in meinem nächsten Urlaub das ganze nochmals von vorne angehen und mich ein bisschen mehr einlesen vorher . Aber nichts desto Trotz ! Danke für deine Mühe!
-