360x180.ch: Browservergleich meiner Website -->Fehler

SELF-Forum

Browservergleich meiner Website -->Fehler

360x180.ch Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen

ich weiss, der IE ist nicht der beste Browser.
Habe mir heute den Firefox runtergeladen, um zu schauen wie meine Seite dargestellt wird.
Und siehe da, trotz Validierung wird eine Seite vollständig falsch dargestellt. Es sieht so aus als würde der Befehl hspace ignoriert, aber auf anderen Seiten ist hspace korrekt dargestellt.
Hier die gute Seite:

http://www.360x180.ch/fernsicht.html
(wird in beiden Browsern korrekt dargestellt)

hier die schlechte Seite:

http://www.360x180.ch/slideshow/hohenklingen.html
(in Firefox falsch dargestellt)

Kann mir jemand helfen?

Falls erwünscht, stelle ich den Code hier rein.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Browservergleich meiner Website -->Fehler

    360x180.ch
    – Informationen zu den Bewertungsregeln

    ich nochmal

    habe die Seite umgeschrieben von XHTML auf HTML, leider mit dem gleichen Ergebnis.

    http://www.360x180.ch/slideshow/hohenklingen2.html

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Browservergleich meiner Website -->Fehler

      Beat Homepage des Autors
      – Informationen zu den Bewertungsregeln

      http://www.360x180.ch/slideshow/hohenklingen2.html

      Hallo
      Ich beziehe mich mal auf die angegebene Seite.

      Vielleicht würde dir etwas anderer Code generell entgegen kommen.

      Grundsätzlich handelt es sich um eine List.
      <ul>
      <li></li>
      ...
      </ul>

      Jeder Listenpunkt beinhaltet drei Punke:
      a) ein Vorschau-Panoramabild.
      b) 3symbole für Files, die mit einem Betrachter verbunden sind.
         Diese Symbole würden gerne in einem Bercih mit weissem Hintergrund stehen.
      c) Eine verbale Erläuterung.

      Den Code sehe ich so:

        
<ul id="tour">  
<li>  
  <a class=preview ><img src="" alt="info"></a>  
  <div class=viewers>  
     <a ...><img ...></a>  
     ...  
  </div>  
  <div class=description>  
    <h4>Titel</h4>  
    <p>Die Beschreibung</p>  
  </div>  
</li>  
...  
</ul>

      Nun das CSS.

      Zuerst die Liste des Listentypischen berauben.
      #tour, #tour li {margin:0; padding:0}

      Wir arbeiten mit floats.

      .preview, .viewers, .description{
         float:left;
      }

      Wir arbeiten mit festen Weiten

      .preview {width: 200px;}

      Wir formatieren die viewer

      .viewer{
        width:80px;
        background-color:#fff;
        padding:5px;
        margin: 0px 10px;
      }

      .description {
        background-color:#444;
        padding:0.5em;
        margin: 0px 10px;
      }

      Wir definieren keine Breite bei Description, weil einfach der restliche Raum aufgebraucht werden soll.

      Was passiert mit den Floats, wenn der Bildschirm schmaler ist?
      Der Beschreibungstext fällt unter die Viewer-Icons.

      Das mal als Idee:
      valign und halign spielen keine Rolle mehr im Code.

      Achtung, da sind alle Arten von Bugs mit dem MSIE im Zusammenhang mit floats.

      Einfach den Code mal antesten und schauen ob es behagt.

      mfg Beat

      --
      Woran ich arbeite:
      X-Torah
      ><o(((°>      ><o(((°>
         <°)))o><                      ><o(((°>o
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Browservergleich meiner Website -->Fehler

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber Beat,

        grundsätzlich stimme ich Dir zu. Kleine Details:

        Den Code sehe ich so:

        <ul id="tour">
        <li>
          <a class=preview ><img src="" alt="info"></a>
          <div class=viewers>
             <a ...><img ...></a>
             ...
          </div>
          <div class=description>
            <h4>Titel</h4>
            <p>Die Beschreibung</p>
          </div>
        </li>
        ...
        </ul>

          
Was spricht gegen dieses? Meiner Meinung nach ist das noch semantischer:  
~~~html
<ul id="tour">  
    <li>  
        <h4>Titel</h4>  
        <p>Die Beschreibung</p>  
        <p class="preview"><a href="..."><img src="..." alt="info" /></a></p>  
        <p class="viewers">  
            <a ...><img ... /></a>  
            <a ...><img ... /></a>  
            <a ...><img ... /></a>  
        </p>  
    </li>  
    ...  
</ul>

        Die geänderte Reihenfolge im Quelltext kann man locker mit CSS "auffangen". Ich denke aber, dass das Dokument so vor allem von Screen-Readern besser verarbeitet werden kann, ebenso steht das relevanteste der Seite immer zuerst. Und da man die <p>-Elemente mit den Klassen "preview" und "viewers" gesondert "anfassen" kann, braucht es kein <div> mehr um die Beschreibung und ihre Überschrift. Ob die Überschrift eine <h4> sein muss, oder ob es auch <h2> oder <h3> tun, muss letztendlich die Struktur des fertigen Dokuments zeigen.

        Liebe Grüße aus Ellwangen,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Browservergleich meiner Website -->Fehler

          Beat Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Natürlich lässt sich an der Semantik noch vieles rumfeilen.

          Aber das da...

          <p class="viewers">
                      <a ...><img ... /></a>
                      <a ...><img ... /></a>
                      <a ...><img ... /></a>
                  </p>

          ... finde ich irgendewie nicht angemessen, da ich von einem Paragraf doch mindestens einen vollständigen Satz erwarten würde.
          Aber wenn wir es akribisch nehmen wollen:
          [code lang=html]
          <ul class=viewers>
          <li><a class=quicktime ... ><span class=hidden>Das QT-File</span></a></li>
          ...
          </ul>
          [code]

          Wobei dann das QT icon als background-image einzubinden, und wie die Klasse hidden andeutet, der Plaintext Link im CSS mit display:none auszublenden wäre.

          Aber wie gesagt, ich bin mir nicht sicher, ob zu viel Codeklauberei hier dem Webseitenautor weiter hilft.

          mfg Beat

          --
          Woran ich arbeite:
          X-Torah
             <°)))o><                      ><o(((°>o
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Browservergleich meiner Website -->Fehler

            360x180.ch Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo
            erst mal vielen Dank für Eure Mithilfe!

            @Beat Ich glaube, Du hast mir vor ca 2 Wochen schon mal super geholfen, dadurch sind viele Sites erst validierungsfähig geworden. Das hat mich zwar viele Nächte gekostet, hat sich aber gelohnt.

            Wie ich schon damals angetönt habe, bin Panograf und kein HTML Hirsch.
            Eure Vorschläge sind bestimmt gut, nur versteh ich mal wieder Bahnhof.

            Ich weiss: Selfhtml bedeutet hilf dir selbst durch Hilfe von anderen. In meinem Fall wäre ich aber sehr angetan, wenn mir jemand einen fertigen Container mit Preview, Beschreibung mit Hintergrundfarbe und den 3 Linkicons erstellen könnte. Da auf meiner Seite eigentlich immer dasselbe untereinander kopiert wird und sich nur die Links ändern, ist es sicher sinnvoll, das Meiste irgendwie vorzuformatieren, damit sich der Quelltext nicht so aufbläht wie in meinem Fall.

            Was Ihr da draussen mit einer Hirnhälfte locker in den Texteditor haut kostet mich viel Nerven und hitzige Debatten über Zeitverschwendung mit meiner Frau...hat jemand Erbarmen mit mir? ;-)
            Dann hätte ich nämlich auch mehr Zeit für den eigentlichen Inhalt meiner Site: Die Welt panoramisieren.

            Ich bin gerne bereit, mich für optimale Lösungen erkenntlich zu zeigen.
            Alle benötigten Grafiken /Icons können dem "Schreiberling" zugesandt werden.

            360°Grüsse

            Marc

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Browservergleich meiner Website -->Fehler

              Beat Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Wie ich schon damals angetönt habe, bin Panograf und kein HTML Hirsch.

              Vollkommen klar.

              Eure Vorschläge sind bestimmt gut, nur versteh ich mal wieder Bahnhof.
              Ich weiss: Selfhtml bedeutet hilf dir selbst durch Hilfe von anderen.

              Vielleicht ist dir mit einem anchaulichen Beispielcode geholfen?

              In meinem Fall wäre ich aber sehr angetan, wenn mir jemand einen fertigen Container mit Preview, Beschreibung mit Hintergrundfarbe und den 3 Linkicons erstellen könnte. Da auf meiner Seite eigentlich immer dasselbe untereinander kopiert wird und sich nur die Links ändern, ist es sicher sinnvoll, das Meiste irgendwie vorzuformatieren, damit sich der Quelltext nicht so aufbläht wie in meinem Fall.

              Was Ihr da draussen mit einer Hirnhälfte locker in den Texteditor haut kostet mich viel Nerven und hitzige Debatten über Zeitverschwendung mit meiner Frau...hat jemand Erbarmen mit mir? ;-)

              Na das wollen wir doch nicht...

              Dann hätte ich nämlich auch mehr Zeit für den eigentlichen Inhalt meiner Site: Die Welt panoramisieren.

              Der Grund, warum es dich viel Nerven kostet, liegt in deinem Layout, das viel zu viel Code und verschachtelte Tabellen verwendet.

              Ich brauche, sofern ich beim Tabellenlayout bleibe, genau 1 Tabelle.
              Aber auch auf diese lässt sich im Grunde verzichten.

              Mit einem aufgeräumten Code verliert man den Überblick auch nicht. Das ist derzeit aber dein Hauptproblem.

              Aus meiner Warte würde ich die ganze HP neu aufbauen.
              Ich schreibe derzeit eine von deinen Seiten um, Code wird nachgereicht.

              (Bisschen Geduld).

              mfg Beat

              --
              Woran ich arbeite:
              X-Torah
                 <°)))o><                      ><o(((°>o
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Browservergleich meiner Website -->Fehler

                360x180.ch Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Uii, dann werd ich mich mal in Geduld üben und dankbar sein.

                Hechelnd, aber lieb wartend...

                Marc

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Browservergleich meiner Website -->Fehler

                  Beat Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  Uii, dann werd ich mich mal in Geduld üben und dankbar sein.

                  Hechelnd, aber lieb wartend...

                  Marc

                  Okey hier mal ein Entwurf

                    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<meta name="robots" content="INDEX,FOLLOW">  
<meta name="keywords" content="360x180, Panos, Panorama, Panoramen, QTVR, Marc Gruber ">  
<meta name="description" content="360°x 180° Panoramen">  
<title>360°x 180° Panoramen</title>  
  
<link rel="stylesheet" href="panoramen__vs-Dateien/format.css" type="text/css">  
<style type="text/css">  
/*body wurde auf 900px festgelegt, zentriert*/  
body {font-size:100.01%; padding: 0; margin:1em auto; width:900px;}  
a[href]{color:#444; font-weight:bold;}  
#header{width:900px; height:120px; border: 1px solid #ddd;}  
.hide{display:none;}  
  
/*Die Navigation mit Float (in globales Stylesheet)*/  
#mainnav {float:left; width:200px; margin: 0 1em 0 0; padding:0;  list-style-type:none;}  
#mainnav li {margin:0; padding:0;}  
#mainnav a {text-decoration:none; display:block; border:1px solid #fff; background-color:#eee;padding:0.2em 1em; border-left:0.5em solid #999;}  
#mainnav a:hover{ background-color:#ffd;}  
#mainnav a.this_page { border-left-color: #f00;}  
  
/* Der Hauptbereich*/  
#content{ overflow:auto;} /*bewirkt Kastenverhalten*/  
  
#contentnav, #contentnav li {margin: 0; padding:0;  list-style-type:none;}  
#contentnav li { margin: 0.5em 0;text-align:center; border:1px solid #ccc; border-width:1px 0; background-color:#fffff6;}  
#contentnav li h3  {font-size:1.1em; line-height:150%; background-color:#eee; padding:0; margin:0;}  
#contentnav a {text-decoration:none; }  
#contentnav a:hover {text-decoration:underline; color:#f00;}  
#contentnav p {margin:0.5em; }  
  
</style>  
</head>  
<body>  
  
<!-- Logo -->  
<!-- Die Breite des Logos ergibt die feste minimale Breite besser nicht über 900px -->  
  
<div id="header"><h1 class="hide">360*180<br>  
Panorama-Fotographie</h1><!--  
 --><img src="panoramen_vs-Dateien/strand_li.jpg" alt="" border="0" ><!--  
 --></div>  
  
  
<!--  Navigation -->  
<ul id=mainnav>  
<li><a href="http://www.360x180.ch/index.html">Home</a></li>  
<li><a href="http://www.360x180.ch/kontakt.html">Kontakt</a></li>  
<li><a class="this_page"href="http://www.360x180.ch/panoramen_vs.html">Zu den Panoramen</a></li>  
<li><a href="http://www.360x180.ch/equipment.html">Equipment</a></li>  
<li><a href="http://www.360x180.ch/software.html">Software</a></li>  
<li><a href="http://www.360x180.ch/angebote.html" >Angebote</a></li>  
<li><a href="http://www.360x180.ch/referenzen.html" >Referenzen</a></li>  
<li><a href="http://www.360x180.ch/links.html"</a></li>  
</ul>  
  
  
<div id="content" >  
<!--  Inhalt -->  
  
<h2> Panorama - Kategorien </h2>  
<ul id="contentnav">  
  
<li><h3><a href="http://www.360x180.ch/wasser.html">Wasser</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/stadt.html">Stadt</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/land.html">Land</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/fernsicht.html">Fernsicht, Schnee &amp; Berge</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/nachts.html">Nachts</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/architektur.html">Architektur</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/industrie.html">Industrie und PS</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/hilti.html">Hilti</a></h3>  
<p>Etwas beschreibender Text</p></li>  
  
<li><h3><a href="http://www.360x180.ch/member/member.html">Member Area</a></h3>  
<p>Etwas beschreibender Text</p></li>  
</ul>  
  
<!-- ende inhalt-->  
</div>  
  
</body>  
</html>

                  Gäbe im Detail noch einiges auszuarbeiten.

                  mfg Beat

                  --
                  Woran ich arbeite:
                  X-Torah
                  ><o(((°>        ><o(((°>
                     <°)))o><                      ><o(((°>o
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Browservergleich meiner Website -->Fehler

                    Beat Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    <li><a href="http://www.360x180.ch/links.html"</a></li>

                    Korrektur

                    <li><a href="http://www.360x180.ch/links.html">Links</a></li>

                    mfg Beat

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Browservergleich meiner Website -->Fehler

                      360x180.ch Homepage des Autors
                      – Informationen zu den Bewertungsregeln

                      Oh, das schaut schon mal gar nicht schlecht aus!
                      Firfox stellt es korrekt dar, dafür spinnt jetzt der IE...

                      Hab das Ganze leicht ergänzt und hochgeladen:

                      (Headerbild, Link zu format.css (müsste dann auch überarbeitet werden)

                      siehe unter
                      http://www.360x180.ch/panoramen2_vs.html

                      Hab Dank für das bis jetzt Geleistete.

                      Muss für heute ins Bett, bin müüüüde.

                      Gruss
                      Marc

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln