Zur Navigation

Webseiten werden auf dem PC nicht richtig dargestellt

1 krieger98

Einige Webseiten werden in meinem Editor Expression Web 4 in der Entwurf-Ansicht aber auch in der Betrachtung mit Firefox oder Chrome nicht richtig dargestellt.
Es betrifft alle Seiten wo die folgende CSS-Datei eingebunden ist : <link href="css/responsive-3.css" rel="stylesheet">.
Die BOX "<div id="main-box"> wird unter <div id="boxes"> geschoben und die Box geht über die volle Breite.
Auf dem Server (bei 1und1) werden die Seiten jedoch richtig angezeigt. Beispiel: http://www.fahrrad-workshop-sprockhoevel.de/
Ich habe mal eine Bildschirm-Aufnahme davon gemacht wie das auf dem PC aussieht: http://s201291267.online.de/test.htm
Woran könnte das liegen ?

12.04.2016 20:28

2 Jörg Kruse

Auch die Abstände unter den Borders sind z.T. größer.

Woran könnte das liegen ?

Bist du sicher, dass CSS, HTML etc. wirklich komplett identisch sind mit der Version auf dem Server? Ich würde alle relevanten lokalen Dateien (HTML, CSS, JavaScript, Bilder, ...) mal in einen Testordner auf dem Server hochladen, und schauen, ob das Problem dort auch auftritt. Wenn ja, kann man das Problem dort analysieren.

Ansonsten könntest du mit dem Firefox-Addon Firebug schauen, woher die Abstände kommen (Rechtsklick auf den problematischen Bereich und dann "Element mit Firebug untersuchen").

13.04.2016 09:18 | geändert: 13.04.2016 09:20

3 krieger98

Zitat von Jörg
Auch die Abstände unter den Borders sind z.T. größer.

Woran könnte das liegen ?

Bist du sicher, dass CSS, HTML etc. wirklich komplett identisch sind mit der Version auf dem Server? Ich würde alle relevanten lokalen Dateien (HTML, CSS, JavaScript, Bilder, ...) mal in einen Testordner auf dem Server hochladen, und schauen, ob das Problem dort auch auftritt. Wenn ja, kann man das Problem dort analysieren.

Ansonsten könntest du mit dem Firefox-Addon Firebug schauen, woher die Abstände kommen (Rechtsklick auf den problematischen Bereich und dann "Element mit Firebug untersuchen").
Ich habe die Dateien schon in einem Test-Ordner hochgeladen dort ist alles Ok. Diese Problematik war schon immer seit der Erstellung der Muster-Dateien . Es betriift alle Seiten wo die "responsive-3.css" und "responsive-2.css" eingefügt sind alles andere ist OK.

13.04.2016 11:53

4 Jörg Kruse

Dann würde ich wie gesagt den Firebug installieren, falls noch nicht getan, um den betreffenden Bereich zu analysieren:

- mit Rechtsklick auf den Bereich und dann "mit Firebug analysieren" auswählen
- oben den Reiter "HTML" auswählen
- links das betreffende HTML-Element auswählen (z.B. <div id="main-box">)
- rechts den Reiter "Styles" auswählen
- die dort aufgeführten CSS-Definitionen kopieren

Das machst du mit der Seite auf dem Server und mit der Seite auf dem lokalen Rechner und vergleichst dann die CSS-Definitionen. Die Unterschiede geben einem einen Hinweis darauf, warum die Seite unterschiedlich angezeigt wird.

13.04.2016 14:22 | geändert: 13.04.2016 14:23

1 Forenmitglied fand diesen Beitrag gut

5 krieger98

Ich habe das Ganze mal mit Firebug analysiert und konnte keinen Unterschied feststellen:
Ansicht auf dem Server:
#main-box {
background: #dcdcdc none repeat scroll 0 0;
border: 1px solid #333;
border-radius: 6px;
height: 450px;
margin-left: 230px;
padding: 5px;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana,Tahoma,Geneva,sans-serif;
font-size: 12px;
}
----------------------------------------------
Ansicht auf dem PC:
#main-box {
background: #dcdcdc none repeat scroll 0 0;
border: 1px solid #333;
border-radius: 6px;
height: 450px;
margin-left: 230px;
padding: 5px;
}
body {
font-family: Verdana,Tahoma,Geneva,sans-serif;
font-size: 12px;
}
---------------------------------------------------
Ansicht auf dem Server:
.nav-box a {
font-size: 11px;
width: 210px;
}
.nav-box a {
display: block;
float: left;
width: 170px;
}
a {
color: #009;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
.nav-box li {
line-height: 140%;
}
.nav-box ul {
list-style-type: none;
}
.nav-box {
font-size: 12px;
font-weight: bold;
}
body {
font-family: Verdana,Tahoma,Geneva,sans-serif;
font-size: 12px;
}
---------------------------------------------------------
Ansicht auf dem PC:

.nav-box a {
font-size: 11px;
width: 210px;
}
.nav-box a {
display: block;
float: left;
width: 170px;
}
a {
color: #009;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
.nav-box li {
line-height: 140%;
}
.nav-box ul {
list-style-type: none;
}
.nav-box {
font-size: 12px;
font-weight: bold;
}
body {
font-family: Verdana,Tahoma,Geneva,sans-serif;
font-size: 12px;
}
-------------------------------------------------

13.04.2016 18:24

6 Jörg Kruse

Dieser Abschnitt fehlt bei der Ansicht auf dem PC:

* {
margin: 0;
padding: 0;
}

... ist aber vorhanden in der lokalen responsive.css?

13.04.2016 18:39

7 krieger98

Zitat von Jörg
Dieser Abschnitt fehlt bei der Ansicht auf dem PC:

* {
margin: 0;
padding: 0;
}

... ist aber vorhanden in der lokalen responsive.css?

Ich komme da einfach nicht weiter und kann den Fehler nicht finden.
Habe aber jetzt festgestellt, dass bei den ersten Musterseiten vom April 2015 die Darstellung auf dem PC noch Ok war. Dann wurden Ergänzungen und Änderungen durchgeführt und bei den folgenden Musterseiten war die Darstellung auf dem PC wie oben geschildert. Werde die Musterseiten von April 2015 jetzt mal nehmen und die durchgeführten Ergänzungen nachtragen und mal schauen was passiert..

14.04.2016 17:49

8 krieger98

Ich habe den Fehler jetzt gefunden es liegt daran:
<?php
ob_start("ob_gzhandler");
header("Content-type: text/css");
?>
Wenn ich das auf dem PC rausnehme wird es richtig dargestellt.

14.04.2016 18:09

9 Jörg Kruse

Ja, wenn du auf dem PC keinen Webserver laufen hast, wird der PHP-Code nicht aus der CSS-Datei entfernt. Der Browser versucht alles bis zum ersten "{" als Selektor zu interpretieren. Deswegen wurde der erste Definitionsblock in der responsive.css nicht mehr für "*" (d.h. für alle HTML-Elemente) berücksichtigt, sondern für einen nicht existenten Selektor '<?php ob_start("ob_gzhandler"); header("Content-type: text/css"); ?> *'

14.04.2016 18:26 | geändert: 14.04.2016 18:27

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]