Darstellungsprobleme seit 2.0.0.13

Cobi

Hallo
Seit ich meinen Firefox auf Version 2.0.0.13 aktualisiert habe, verschluckt er ein Foto in der Homepage die ich gerade schreibe.
Und zwar das Foto, das als banner klassifiziert eingebunden wird.

Ein Update auf Version 2.0.0.14 hat das Problem auch nicht gelöst. Bevor ich nun einen Fehler in Firefox vermute, vielleicht liegt es ja am Code meiner Homepage.

HTML

<DOCTYPE>
<html>
<head>
  <title>Webauftritt</title>
<if>
 <style> 
  <link>
 </style>
<endif>
<if>
 <link>
<endif>
  <link>
  <link>
  <link>
  <link>
  <meta>
  <link>
  <link>
<script></script>
</head>


<body>


<div>
<div>
<div><a href="index.html"><img></a></div>


<div>
<a href="index.html"><img></a>
</div>
</div>




<end>
<div>


<strong>Startseite</strong>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="sitemap.html">Sitemap</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="impressum.html">Impressum</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<div>
<a href="javascript:cssSetzen('print.css')">Druckversion</a>&nbsp;&nbsp;
</div>
<div>
<a href="javascript:cssSetzen('standard.css')">Normalansicht</a>&nbsp;&nbsp;
</div>
</div>


<end>
<div>
<ul>
  <li><a href="index.html">Rubrik 1</a>
    <ul>
      <li><a href="seite1.html">Unterrubrik 1</a></li>
      <li><a href="seite2.html">Unterrubrik 2</a></li>
      <li><a href="seite3.html">Unterrubrik 3</a></li>
      <li><a href="seite4.html">Unterrubrik 4</a></li>
      <li><a href="seite5.html">Unterrubrik 5</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="rubrik2.html">Rubrik 2</a>
    <ul>
      <li><a href="seite6.html">Unterrubrik 6</a></li>
      <li><a href="seite7.html">Unterrubrik 7</a></li>
      <li><a href="seite8.html">Unterrubrik 8</a></li>
    </ul>
  </li>
</ul>
<ul>
  <li><a href="rubrik3.html">Rubrik 3</a></li>
</ul>
<ul>
<li><a href="rubrik3.html">Rubrik 4</a></li>
</ul>
<ul>
  <li><a href="rubrik3.html">Rubrik 5</a></li>
</ul>
<br>


<p>
  <a href="http://validator.w3.org/check?uri=referer">
    <img>
  </a>
</p>
<p>
  <a href="http://jigsaw.w3.org/css-validator/">
    <img>
  </a>
</p>


</div>




<end>


<div>


<h1>
Überschrift
<br>
</h1>




<p>
Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. Hier kommt der ganze Text rein. 
</p>
</div>


<end>


<div>
<big><strong><a href="seite11.html">Hier werden schöne Grüße stehen.</a>
</strong></big>


</div>
<end>


</div>


</body>
</html>

Alles anzeigen

Code

body {
	background-color: #ffe6a2;
	font-size: 0.8em;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#564b47;
	padding:0;
	margin:0;
}
a {color: #db5184;}
a:visited {color:#db5184;}
a:hover {color: #000000;}
a:active { color:#000000;}




h1 {
	font-size: 2em; 
	font-weight: normal;
 }


h2 {
	font-size: 1.7em;
	font-weight: normal;
}




/* ----------container zentriert das layout-------------- */
#container {
	width: 760px;
	margin: 0 auto;
	padding: 0;
	z-index: 1;
	background-color: #fffddd;
	padding-bottom: 10px;
}


/* ----------banner for logo-------------- */
#logo   {
	left: 6px;
	bottom: 10px;
	margin: 0;
	padding: 0;
	background-color: #ffe6a2;
}
#logo   p{
	margin-left: 20em;
	padding: 3px;
}
#banner {
	left: 6px;
	bottom: 10px;
	margin: 0;
	padding: 0;
	background-color: #ffe6a2;
}
#banner p{
	margin-left: 20em;
	padding: 3px;
}


/* -----------------Kopfnavigation--------------------- */
#mainnavi {
	margin: 0;
	padding: 15px;
	background-color: #458093;
	font-size: 1.3em;
	text-align: right
}


#mainnavi p{
	margin-left: 20em;
	padding: 0 25px;
	display: inline
}


#normal	{
	display: inline
}


#druck	{
	display: none
}




/* -----------------Inhalt--------------------- */
#content {
	min-height:600px;
	background-color: #fffddd;
	padding: 0;
	margin: 0 0 0 16em;
	text-align: justify
}


p, pre {
	padding: 0 20px 15px 25px;
	margin:0;
}
pre, code {
	font-size: 1.2em;
}


h1 {
	padding: 15px 25px;
	margin:0;
	text-align: left
}
h2 {
	padding: 5px 25px;
	margin:0;
	text-align: left
}


.gross {
	width: 5.71em;
	height: 1.07em;}


/* --------------linke Navigation------------- */
#left {
	float: left;
	width: 16em;
	margin: 0;
	padding: 15px 0 0 0;
}
#left ul{
	list-style-type: none ;
	padding: 0 0 0 25px;
	margin: 0;
}
#left ul.borderbottom{
	border-bottom:1px solid #ffe6a2;
	padding: 15px 0 10px 25px;
}


#left li a {
	font-size: 1.3em;
	text-decoration:none; 
}
#left  li li a { 
	font-size: 1em; 
}
#left li{
	margin: 0;
	padding: 0 0 4px 0;
}
#left li li{
	margin: 0;
	padding: 0 0 3px 0;
}
#left li a.selected {
	margin: 0;
	padding: 0 0 0 25px;
	color:#564b47;
}


#left li li a.selected {
	margin: 0;
	padding: 0;
}




/* -----------Fußzeile--------------------------- */
#footer {
	clear: left;
	background-color: #458093;
	padding: 5px;
	margin: 0;
	text-align: center
	}

Alles anzeigen

Und hier mal zum angucken Online:
http://www.cobihome.de/
http://www.cobihome.de/

Aber eigentlich sollte es so aussehen:
http://http//www.cobihome.de/screen_ergebnis.png
http://www.cobihome.de/screen_ergebnis.png

Ebukadneza

Wo soll denn das Foto sein?! Sieht ansonsten ganz gut aus hier.

PIGSgrame

[Beitrag wegen Irrtum entfernt, siehe meinen Edit unten]

Road-Runner

Das liegt am <div id="banner"> im Quelltext. banner wird bei mir von Adblock Plus geblockt. Wenn ich dieses div z.B. in bild umbenenne, wird das Banner angezeigt.

Ich habe die Seite per Scrapbook herunter geladen und mit der lokal gespeicherten Seite obiges getestet.

PIGSgrame

Zitat von Road-Runner

Das liegt am <div> im Quelltext. banner wird bei mir von Adblock Plus geblockt. Wenn ich dieses div z.B. in bild umbenenne, wird das Banner angezeigt.

Ich habe es mit Firebug getestet und komme zu dem gleichen Ergebnis: Der DIV wird blockiert, weil die ID "banner" ist. Aber warum ist das so? Der DIV wird bei mir auch dann blockiert, wenn ich Adblock Plus deaktiviere. Sonstige Software die etwas blockieren könnte, habe ich nicht installiert.

Cobi: Auch wenn ich den Grund dafür gerade nicht verstehe, gib dem DIV einfach eine andere ID, dann klappt es.

//edit: Das kann ja wohl nicht sein! Ich habe es jetzt mit einem neuen Profil ohne Adblock Plus probiert und das Ergebnis ist das gleiche. Der Firefox scheint neuerdings tatsächlich ungefragt DIVs mit der ID "banner" zu blocken, und zwar ohne eine Möglichkeit, das zu ändern. Ich hoffe doch sehr, dass es sich hierbei um ein Codeüberbleibsel handel und dieses völlig inakzeptable Verhalten nicht beabsichtigt ist!
Mal sehen, ob sich im Bugzilla dazu schon etwas findet.

//edit2: Ich verwende übrigens keine sonstige Software, die Webinhalte blockiert. Eine 3.0b5 mit frischem Profil zeigt bei mir das gleiche Verhalten. Kann es außer Road-Runner noch jemand bestätigen? Ich habe nämlich im Bugzilla nichts gefunden.

.Ulli

Vorschlag:

Zitat von mobile.css ab Zeile 59

#banner {
left: 6px;
bottom: 10px;
margin: 0;
padding: 0;
background-color: #fffddd;
display: none
}

Alles anzeigen

Firefox macht das was Du ihm sagst.

PIGSgrame

Laut Firebug wird aber das Stylesheet standard.css benutzt, dort steht das display:none nicht.

.Ulli

Mein Firefox beliebt anderer Meinung zu sein
[Blockierte Grafik: http://img3.imagebanana.com/img/vgyvze8/thumb/BildschirmfotoWebauftrittMozillaFire.png]

Road-Runner

Wenn ich dieses display:none aus der css-Datei entferne, wird alles korrekt angezeigt.

Adblock Plus spielt übrigens nicht mit, da die Seite mit diesem Eintrag in der CSS-Datei auch in einem Profil ohne jegliche Erweiterung nicht korrekt angezeigt wird.

PIGSgrame

Ja, bei mir funktioniert es dann auch. Ich habe das Stylesheet mal dem W3C-Validator übergeben und er meint, dass

Code

screen and (max-device-width: 480px)

kein zulässiges Medium ist. Anscheinend lädt der Firefox bei einem unbekannten Medium das Stylesheet in jedem Fall. Weil es als letztes in der Liste steht, überschreibt es dann natürlich auch alle gegenteiligen Festlegungen der vorherigen Stylesheets.

Sorry für den Wirbel meinerseits, ist wol nicht ganz mein Tag heute... :oops:

Cobi

Tja, den Adblock Plus habe ich nicht, sondern nur das Adblock Filterset G. deswegen lag es nicht daran. Aber Danke für den Hinweis, das Bild wird einen anderen Namen bekommen, damit es auch User mit dem Adblock Plus sehen können.

Es war wirklich das "screen" welches auf mobile.css verweist. Firefox hat deswegen das falsche css geladen.

Und falls das letzendliche Ergebnis jemanden interessiert, die Seite wird irgendwann in der kommenden Woche Online gehen, dann verweise ich an dieser Stelle gerne noch mal darauf.

Vielen Dank an alle, die mir mit meinem Problem geholfen haben.

Road-Runner

Adblock hat nichts damit zu tun. Wenn das richtige css geladen wird, wird das Bild auch angezeigt, wenn es im DIV id="banner" liegt.

Der Name des Bildes ist ja nicht banner, sondern 600px.jpg (es sei denn, Du hättest den Namen schon geändert), demnach kann ein Filter banner in Adblock Plus das Bild auch nicht blocken.

Dass die DIV id:"banner" geblockt wurde, lag am erwähnten Problem mit screen, und dem Eintrag display:none in der mobile-css, die von Firefox genommen wurde.