Stefan Menzel: Mozilla Firefox zeigt Website nicht richtig an

Hallo Zusammen !

Bitte schaut Euch mal meine Webseite (www.menzel-sound.de) mit Firefox an. Da wird der Content ganz nach rechts verschoben. Leider bekomme ich das Problem trotz nächtelangem Probieren nicht hin. Nun weiß ich nicht mehr weiter oder ich sehe den Wald vor lauter Bäumen nicht mehr.

Das u.g. CSS funktioniert in IE optimal und Opera akzeptabel. Nur im Firefox nicht.
Für den IE verwende ich eine Browserweiche mit verweis auf ein CSS die das IE Expanding vermeidet.

Kann mir jemand einen entscheidenden Tip geben wo der Fehler liegt ???

Gruß
Stefan

* {
margin : 0;
padding : 0;
}
body {
background : #ddd;
background-image : url(/images/Silvermoon_Night_1024.jpg);
background-attachment : fixed;
background-repeat : repeat-y;
background-position : top center;
}
#page_margins {
min-width : 740px;
max-width : 80em;
margin-left : auto;
margin-right : auto;
margin-top : 0;
padding : 0;
}
#page {
background : #bfd0c9;
filter: alpha(opacity=80);
-moz-opacity: 0.7;
opacity: 0.8;
width : 92%;
clear : both;
min-height : 601px;
}
#header {
background-color : #336;
color : #fff;
padding : 0;
}
#tovnav {
color : #fff;
background : transparent;
}
#nav_main ul {
margin-left : 10px;
}
#footer {
background-color : #ac9d9d;
color : #fff;
padding : 15px;
width : 92%;
text-align : left;
}
#main {
background : #bfd0c9;
padding : 10px 0 10px 0;
}
#col1 {
width : 20%;
float : left;
}
#col1_content {
padding-left : 10px;
padding-right : 10px;
/*float : left;*/
}
#col2 {
width : 25%;
}
#col2_content {
padding-left : 10px;
padding-right : 20px;
}
#col3 {
margin-left : 26.5%;
margin-right : 0.5%;

}

#col3_content {
padding-left : 5px;
padding-right : 5px;
width : auto;

}

body {
font-size : 81.25%;
}
h1, h2, h3, h4, h5, h6 {
font-weight : bold;
color : #000;
margin : 0 0 0.25em 0;
}
h6 {
font-style : italic;
}
p, ul, dd, dt {
line-height : 1.5em;
}
p {
line-height : 1.5em;
margin : 0 0 1em 0;
}
hr {
color : #fff;
background : transparent;
margin : 0 0 0.5em 0;
padding : 0 0 0.5em 0;
border : 0;
border-bottom : 1px solid #000;
}
ul, ol, dl {
margin : 0 0 1em 1em;
}
li {
margin-left : 1.5em;
line-height : 1.5em;
}
dt {
font-weight : bold;
}
dd {
margin : 0 0 1em 2em;
}
cite, blockquote {
font-style : italic;
overflow : visible;
}
blockquote {
margin : 0 0 1em 1.5em;
}
strong, b {
font-weight : bold;
}
em, i {
font-style : italic;
}
pre, code {
font-family : monospace;
font-size : 1.1em;
}
address {
font-style : normal;
line-height : 1.5em;
margin : 0 0 1em 0;
}
acronym, abbr {
letter-spacing : 0.07em;
border-bottom : 1px dashed #c00;
cursor : help;
}
table {
border-collapse : collapse;
margin-bottom : 0.5em;
}
table.full {
width : 100%;
}
.float_left {
float : left;
display : inline;
margin-right : 1em;
margin-bottom : 0.15em;
}
.float_right {
float : right;
display : inline;
margin-left : 1em;
margin-bottom : 0.15em;
}
.center {
text-align : center;
margin-left : auto;
}
.infobox {
padding : 1em;
border : 2px solid #bbc;
background : #eef;
}
body {
color : #444;
font-family : 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
}
h1 {
color : #fff;
}
h2 {
color : #666;
}
h3 {
color : #999;
}
a {
color : #900;
text-decoration : none;
}
a:hover {
background-color : #fee;
text-decoration : underline;
}
a:focus {
background-color : #fee;
text-decoration : underline;
}
#topnav a {
color : #fff;
background : transparent;
text-decoration : none;
}
#topnav a:hover {
text-decoration : underline;
background-color : transparent;
}
#topnav a:focus {
text-decoration : underline;
background-color : transparent;
}
#footer a {
color : #fa4;
}
#footer a:hover {
color : #fff;
background-color : transparent;
text-decoration : underline;
}
#footer a:focus {
color : #fff;
background-color : transparent;
text-decoration : underline;
}
.skip {
position : absolute;
left : -1000em;
width : 20em;
}
div.colbox1 {
position : relative;
font-family : "Arial Times New Roman sans-serif";
border-right : 2px solid #800040;
border-top : 2px solid #800040;
border-left : 2px solid #800040;
border-bottom : 2px solid #800040;
padding : 2px 2px 2px 2px;
margin : 5px 5px 5px 5px;
-moz-border-radius : 12px;
width : 240px;
}
p.colbox_content1 {
font-family : "Arial Times New Roman sans-serif";
font-size : 1.4em;
font-weight : bolder;
text-align : center;
text-decoration : underline;
color : #000000;
padding : 5px 5px 5px 5px;
}
p.colbox_content2 {
font-family : "Arial Times New Roman sans-serif";
font-size : 0.9em;
font-weight : normal;
text-align : left;
padding : 5px 5px 5px 5px;
}
.rechtbox {
border-bottom : 1px solid #ccc;
border-left : 1px solid #ccc;
min-height : 250px;
height : auto !important;
height : 200px;
padding : 0 0 0 5px;
text-align : left;
border-right : 1px solid #ccc;
border-top : 1px solid #ccc;
background-color : #f7ef99;
width : 100%;
margin-bottom : 15px;
margin-top : 15px;
padding : 5px;
font-family : "Arial Times New Roman sans-serif";
font-size : 14px;
width : 100%;
font-weight : normal;
filter: alpha(opacity=70);
-moz-opacity: 0.9;
opacity: 0.9;
}
p.txt {
font-family : "Arial Times New Roman sans-serif";
font-size : 14px;
font-weight : normal;
}
p.txtr {
font-family : "Arial Times New Roman sans-serif";
font-size : 14px;
font-weight : normal;
text-align : right;
}
p.txtl {
font-family : "Arial Times New Roman sans-serif";
font-size : 14px;
font-weight : normal;
text-align : left;
}
.guitar {
border-bottom : 0 solid #ccc;
border-left : 0 solid #ccc;
min-height : 320px;
height : auto !important;
height : 200px;
padding : 0 0 0 5px;
text-align : left;
border-right : 0 solid #ccc;
border-top : 0 solid #ccc;
background-color : transparent;
width : 100%;
margin-bottom : 15px;
margin-top : 15px;
padding : 5px;
font-family : "Arial Times New Roman sans-serif";
font-size : 14px;
width : 78.8%;
font-weight : normal;
}
.bildbox {
text-align : left;
padding : 5px;
float : left;
}
.medibox {
border-left : dotted;
margin-left : 5px;
margin-right : 5px;
margin-top : 10px;
margin-bottom : 10px;
padding : 5px;
background-color : #abd7eb;
width : 78.8%;
font-size : 14px;
clear : both;
text-align : left;
filter: alpha(opacity=70);
-moz-opacity: 0.9;
opacity: 0.9;
}
.txtbox2 {
border-bottom : 1px solid #ccc;
border-left : 1px solid #ccc;
min-height : 250px;
height : auto !important;
height : 200px;
padding : 0 0 0 5px;
text-align : left;
border-right : 1px solid #ccc;
border-top : 1px solid #ccc;
background-color : #fbfdb0;
width : 78.8%;
margin-bottom : 15px;
margin-top : 15px;
padding : 5px;
font-family : "Arial Times New Roman sans-serif";
font-size : 14px;
width : 78.8%;
font-weight : normal;
filter: alpha(opacity=70);
-moz-opacity: 0.9;
opacity: 0.9;
}
.bildbox2 {
text-align : left;
padding : 5px;
float : left;
}
.medibox2 {
border-left : dotted;
margin-left : 5px;
margin-right : 5px;
padding : 5px;
width : 78.8%;
filter: alpha(opacity=70);
-moz-opacity: 0.9;
opacity: 0.9;
}
#header {
position : relative;
}
#tovnav {
color : #fff;
background : transparent;
}
#nav_main ul {
margin-left : 15px;
list-style-type : none;
display : inline;
}
#topnav {
position : absolute;
top : 10px;
right : 10px;
color : #fff;
background : transparent;
text-align : right;
}
#nav {
clear : both;
width : auto;
}
@media all {
#nav_main {
width : 100%;
float : left;
background : #b8b8b8 url("/images/background.gif") repeat-x center right;
border-top : 1px solid #333;
border-bottom : 1px solid #333;
line-height : 0;
}
#nav_main ul {
float : left;
display : inline;
margin : 0;
padding : 0;
margin-left : 35px;
border-left : 1px solid #aaa;
border-right : 1px solid #fff;
}
#nav_main ul li {
float : left;
display : inline;
margin : 0;
padding : 0;
font-size : 0.95em;
line-height : 1em;
list-style-type : none;
border-left : 1px solid #fff;
border-right : 1px solid #aaa;
}
#nav_main ul li a {
display : block;
width : auto;
font-size : 0.95em;
font-weight : bold;
background : transparent;
text-decoration : none;
color : #000;
margin : 0;
padding : 0.5em 0.8em 0.5em 0.8em;
}
#nav_main ul li a:hover {
background : #eee;
color : #333;
text-decoration : none;
}
#nav_main ul li#current {
border-left : 1px solid #444;
border-right : 1px solid #888;
background : transparent url("../images/background_active.gif") repeat-x center right;
}
#nav_main ul li#current a, #nav_main ul li#current a:hover {
color : #fff;
background : transparent;
text-decoration : none;
}
}

  1. Hallo Stefan,

    Bitte schaut Euch mal meine Webseite (www.menzel-sound.de) mit Firefox an. Da wird der Content ganz nach rechts verschoben. Leider bekomme ich das Problem trotz nächtelangem Probieren nicht hin. Nun weiß ich nicht mehr weiter oder ich sehe den Wald vor lauter Bäumen nicht mehr.

    Das u.g. CSS funktioniert in IE optimal und Opera akzeptabel. Nur im Firefox nicht.

    ich vermute, das wirst du nicht gerne hören, aber hast Du mal versucht, Deinen HTML-Code valide zu machen? Es fehlt ein Doctype und es werden zahlreiche Fehler angezeigt. Solange ist es praktisch unmöglich, irgendetwas über Darstellungsprobleme zu sagen...

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
    1. Hallo Stefan,

      Bitte schaut Euch mal meine Webseite (www.menzel-sound.de) mit Firefox an. Da wird der Content ganz nach rechts verschoben. Leider bekomme ich das Problem trotz nächtelangem Probieren nicht hin. Nun weiß ich nicht mehr weiter oder ich sehe den Wald vor lauter Bäumen nicht mehr.

      Das u.g. CSS funktioniert in IE optimal und Opera akzeptabel. Nur im Firefox nicht.

      ich vermute, das wirst du nicht gerne hören, aber hast Du mal versucht, Deinen HTML-Code valide zu machen? Es fehlt ein Doctype und es werden zahlreiche Fehler angezeigt. Solange ist es praktisch unmöglich, irgendetwas über Darstellungsprobleme zu sagen...

      Gruß aus Köln-Ehrenfeld,

      Elya

      Hallo Elya,

      Du hast Recht. Allerdings vergaß ich zu erwähnen, das die Indexseite von Joomla generiert wurde. Da ist dann wohl etwas weggefallen.
      Danke, aber für diesen wertvollen Tip. Ich schrieb ja bereits: Wahrscheinlich sehe ich den Wald vor lauter Bäumen nicht mehr.

      Lieber Gruß aus Itzehoe
      Stefan

      1. Hallo Stefan,
        ich kann Dein Dilemma verstehen. Viele hier im Forum sind richtige Cracks, und wenn man dann aus Hobby eine Homepage für seine Freizeitaktivitäten bastelt und etwas nicht passt, findet man hier meist "unbequeme Wahrheiten" wie die Sache mit dem Validator. Nur leider haben die Cracks hier meistens Recht, in Deinem Fall leider auf jeden Fall.

        Für einen Laien ist es nicht leicht, die Übersicht zu behalten wenn es um Doctypes und Co geht. Deshalb, so meine Empfehlung, wenn Du Dir die Mühe gemacht hast mit Joomla zu arbeiten bzw. Dich einzuarbeiten, investiere auch ein bißchen Zeit in Grundlagen.

        Mit einem CSS-Gerüst (ohne Tabellen) von z.B.http://www.intensivstation.ch hat man schon eine schöne, valide und gute Grundstruktur und muss oft nur den Inhalt ändern. Auch wenn das kein CMS ist, man das aber bei m.E. bei einer solchen Seite wie Deiner auch nicht unbedingt benötigt.
        Ferner würde ich die gängigen Browser installieren und während Deiner Tätigkeiten immer wieder wichtige Änderungen auf allen Browsern testen. Das erspart einem den großen Schreck am Ende :-).

        Gruß

  2. Das u.g. CSS funktioniert in IE optimal

    Hallo Stefan,

    das kann ich nicht bestätigen. Ich sehe im IE7 nur noch Durcheinander,
    sobald ich das Browserfenster verkleinere.
    Die Ursache scheint mir weniger im css zu liegen (allerdings hab ich
    mich nicht durch dieses Ungetüm hindurchgequält), sondern in
    zahlreichen html-Fehlern http://validator.w3.org/.

    Best wishes, imho_tep

    --
    HAL 9000: Ich fürchte, wir haben ein Problem, Dave.
    1. Das u.g. CSS funktioniert in IE optimal

      Hallo Stefan,

      das kann ich nicht bestätigen. Ich sehe im IE7 nur noch Durcheinander,
      sobald ich das Browserfenster verkleinere.
      Die Ursache scheint mir weniger im css zu liegen (allerdings hab ich
      mich nicht durch dieses Ungetüm hindurchgequält), sondern in
      zahlreichen html-Fehlern http://validator.w3.org/.

      Best wishes, imho_tep

      Hallo imho_tep,

      ja das ist mir bekannt. Das Layout läßt sich nicht komplett minimieren. Aber in normaler Größe ist sie so wie es gedacht war. Mir geht eigentlich um die Darstellung im Firefox.

      Lieber Gruß Stefan

      1. Moin

        ja das ist mir bekannt. Das Layout läßt sich nicht komplett minimieren. Aber in normaler Größe ist sie so wie es gedacht war.

        es gibt keine _normale_ Größe, insofern solltest du hier ein bisschen umdenken.

        Gruß
        rfb

        --
        Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
        (Galileo Galilei)
      2. ja das ist mir bekannt. Das Layout läßt sich nicht komplett minimieren. Aber in normaler Größe ist sie so wie es gedacht war. Mir geht eigentlich um die Darstellung im Firefox.

        Was ist "normale Größe"?
        heutzutage wo viele Computer und deren Monitore immer kleiner werden und gleichzeitig die Monitore bei Desktopgeräte immer billiger, musst du mit allen Bildschirmgrößen von 13-22 Zoll rechnen

        Bezüglich der Darstellung, wird dir kaum einer helfen können, dein Code ist grauenhaft!
        Neben einem, heutzutage veraltetem, Tabellenlayout, ist es gleichzeitig noch ein DIV Suppe, d.h. du baust Fehler von 1998 und die von 2005 gleichzeitig in deine Struktur.
        Technisch, bist du ja schon darauf hingewiesen worden, dass der Code gravierende Fehler enthält, in der Quellcodeansicht im FF kann man diese schon erkennen da diese teilweise rot markiert sind

        Wenn sowas wirklich Joomla produziert, ist es unbrauchbar.

        Struppi.

  3. Moin

    Das u.g. CSS funktioniert in ... Opera akzeptabel.

    kann ich nicht bestätigen, die roten Rahmen, die über den Text ragen, empfinde ich als inakzeptabel.
    Außerdem ist der Seitenaufbau quälend langsam ebenso wie das Scrolling (und dies bei deaktivierten Bildern).

    Gruß
    rfb

    --
    Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
    (Galileo Galilei)