HTML Darstellungsfehler mit Google Chrome

Eagle-PsyX- · 4. Februar 2011

Irgendwie habe ich seit einem Google Chrome Update ein Darstellungsfehler mit der neusten Version:
[Link-entfernt]

Ein ähnlicher Fehler tauchte im März 2010 auf, wurde von mir behoben und jetzt viele Monate später ist ein ähnlicher wieder da.
Der letzte (deplaziert Skript) {nicht von mir} hat nichts damit zu tun, meine lokale Version zeigt das ebenso an.

bacardyyyy · 4. Februar 2011

evtl haben Sie die Güte uns einen Screenshot auf einen Image-Hoster Ihres Vertrauens hoch zu laden und uns damit den selben Kenntnisstand, welchen Sie besitzen, zu gewährleisten.^^

Kurz um, um zu helfen benötige ich eine genaue Fehlerbeschreibung, am besten mit Bild.
Die Navigation geht im Opera 11.01 überhaupt nicht, in Chrome gibt es nur den Menüpunkt Startseite, in Firefox und IE ist es in Ordnung. Ist das der besagte Fehler?

Eagle-PsyX- · 4. Februar 2011

Ja. Seltsam, dass der Code (ins besondere CSS) seit März unverändert ist und damals problemlos funktionierte.

Eigentlich entspricht die Seite auch vollkommen den Standards (die HTML Fehler sind unrelevant für das Ergebnis):
W3C CSS
W3C HTML

Ergänzung:
Tatsächlich, unter Opera 11.01 fehlt die komplette Navigation.
Interessant: Google Chrome 9 und Opera 11 benutzen beide die WebKit-Engine (evtl. ähnlicher Version); Firefox (Gecko) und Internet Explorer (Trident) aber nicht...
Lokal habe ich auch eine W3C XHTML 1.0 Transitional konforme Version und der Fehler taucht auf: Bin ich schon wieder auf einen WebKit-Bug gestoßen?

Ergänzung #2:
In Safari 5.0.3 ist alles fehlerfrei. Komisch, Safari benutzt bekanntlich auch WebKit. Irgendwie ist das alles bizzar. Gerade Chrome und Opera sind nicht dafür bekannt, falsche Interpretationen anzuzeigen.

Mister Blue Sky · 4. Februar 2011

Btw: Die Fotostudio-Seite entspricht [abgesehen vom von Dir erwähntem, falsch platzierten JS-Script] nur beinahe allen Standards. Denn das verwendete Element "embed" ist zwar weit verbreitet, war aber nie ein valider HTML-Tag.

Flash valide in (X)HTML einbinden:

<object width="460" height="315"
data="movie.swf"
type="application/x-shockwave-flash">
<param name="movie" value="./Files/flash/header.swf?xml_path=/index.php?site=flash_header">
</object>

BS

Ps. <meta name="copyright" content="Kunt Spang ... Kunt ?

Eagle-PsyX- · 5. Februar 2011

Ah Danke - wohl zu schneller tippen :-)
Werde morgenfrüh da ein kleines Update machen müssen.

Aber nein, der Fehler ist auf allen Seiten. Deswegen habe ich bewusst nicht die Startseite im Validator angegeben, weil das ganze um das Darstellungsproblem der unteren Navigation geht und das auf allen Seiten auftritt.
Also auch auf den *validen* Seiten - was mich gerade verwirrt, weil ich den Interpretationsfehler nicht nachvollziehen kann.

killray · 5. Februar 2011

Ändere mal

#navigation a {
margin: 0 auto;

um in

#navigation a {
margin: 0 ;

Dann wirds zumindest in Chrome richtig angezeigt, die anderen musst mal gucken.

Mister Blue Sky · 5. Februar 2011

[Inklusive der von killray vorgeschlagenen CSS-Modifikation] wärs tatsächlich nur [Zitat:] "... ein kleines Update ..."

Ich persönlich würde aber die Block-Level Struktur anders gestalten: [also ein größeres Update ;-]

[Beispiel]

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>

<title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
*       {margin:0; padding:0;}
html, body {height:100%; font:normal 19px "courier new", sans-serif;}
p.last  {margin-bottom:95px;}
#wrap   {min-height:100%; height:auto !important; margin:0 auto -100px;
         position:relative; width:912px;}

#head   {height:150px; width:900px; margin:0 auto; 
         background:url(http://www.bilder-hochladen.net/files/f11h-p.png) no-repeat;}
#cont   {padding:16px; line-height:29px; z-index:100; text-align:center;}
#foot   {position:relative; width:900px; height:100px; margin:0 auto; 
         background:url(http://www.bilder-hochladen.net/files/f11h-q.png) no-repeat;}

#head   {border-width:0 6px 0 6px; border-color:red; border-style:solid;}
#cont   {border-width:6px; border-color:#3bef53; border-style:solid;}
#foot   {border-width:0 6px 0 6px; border-color:blue; border-style:solid;} 
/*]]>*/
</style>

</head><body>

<div id="wrap">
<div id="head"></div>

<div id="cont">

<script type="text/javascript">
//<![CDATA[
for (var i = 1; i <= 23; i++)
  document.write("<p>" + i +"<\/p>");
//]]>
</script>

<p class="last">End-Element mit definiertem margin-bottom</p>

</div></div>

<div id="foot"></div>

</body></html>

Erläuterung: [Nicht speziell für Leute "vom Fach"]

Die Seite besteht aus Header, Contenbereich und einem gepinnten Footer. Zwecks Verdeutlichung schreibt hier ein JS default 23 Absätze in den Contentbereich: for (var i = 1; i <= 23; i++)

Ändert man die Zahl dann beispielsweise auf 5, zeigt dies den Pinn-Effekt des Footers, der sich immer ans untere Ende des Browserfensters anheftet.

[Siehe auch Selektoren* #wrap {margin:0 auto -100px;} und #foot {height:100px;} * Der Selektor ist dass, was vor den geschweiften Klammern {} steht.]

----------------------------------

@ Eagle-PsyX- Ein sich -wie auf Kunts Seite :-)- befindlicher Navigationsbereich im "Footer" wird damit verlässlich in jedem Browser angezeigt.

BS

Eagle-PsyX- · 5. Februar 2011

Danke.
Werde es mir genau anschauen und hoffentlich auch fehlerfrei umsetzen ;-)

Ergänzung:
Hab es geschafft:
Und zwar durch die Ergänzung von

Code:

#navigation a {
  display: inline-table;
}

zu

Code:

#navigation a {
  display: table-cell;
}

Suche

HTML Darstellungsfehler mit Google Chrome

Eagle-PsyX-

Commander

bacardyyyy

Lt. Junior Grade

Eagle-PsyX-

Commander

Mister Blue Sky

Gast

Eagle-PsyX-

Commander

killray

Lt. Commander

Mister Blue Sky

Gast

Eagle-PsyX-

Commander

Ähnliche Themen