Mozilla Firefox zeigt Website nicht richtig an

[Stefan Menzel]

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;
}
}

[Elya]

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

[Stefan Menzel]

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

[Robsen]

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ß

[imho_tep]

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

[Stefan Menzel]

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

[rfb]

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

[Struppi]

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.

[rfb]

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