pwNd: 'a href ' Tag verursacht Problem im FF

Hi,
ich habe ein problem mit der browserdarstellung im FF.
Sobald ich in meiner navigation, den bildern einen 'a href" tag verpasse, werden die grafiken nicht mehr richtig angezeigt.
jede grafik liegt in einem eigenen div und sobald ich den tag anwende werden die grafiken um geschätzte 50% nach oben geschoben und sind dann auch nur noch bis zur hälfte sichtbar.

...

<div id="menu_navi">
    <div id="img_index"><a href="index.htm"><img src="bilder/roll_over/rov_home.jpg" alt="Home" width="200" height="33" id="Image4" title="Home" /></a></div>
    <div id="img_wellness"><a href="massagen.htm"><img src="bilder/btn_massagen.jpg" alt="Sport und Wellnessmassagen" width="200" height="29" id="Image5" title="Sport und Wellnessmassagen" onmouseover="MM_swapImage('Image5','','bilder/roll_over/rov_massagen.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_dorn"><a href="dorn.htm"><img src="bilder/btn_dorntherapie.jpg" alt="Dorntherapie" width="200" height="31" id="Image6" title="Dorntherapie" onmouseover="MM_swapImage('Image6','','bilder/roll_over/rov_dorntherapie.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_pilates"><a href="pilates.htm"><img src="bilder/btn_pilates.jpg" alt="Pilates" width="200" height="30" id="Image7" title="Pilates" onmouseover="MM_swapImage('Image7','','bilder/roll_over/rov_pilates.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_personal"><a href="personal.htm"><img src="bilder/btn_personaltraining.jpg" alt="Personaltraining" width="200" height="30" id="Image8" title="Personaltraining" onmouseover="MM_swapImage('Image8','','bilder/roll_over/rov_personal.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_gesundheit"><a href="gesundheit.htm"><img src="bilder/btn_betrgesundheit.jpg" alt="Betriebliche Gesundheitsförderung" width="200" height="30" id="Image9" title="Betriebliche Gesundheitsförderung" onmouseover="MM_swapImage('Image9','','bilder/roll_over/rov_betrgesundheit.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_portfolio"><a href="portfolio.htm"><img src="bilder/btn_portfolio.jpg" alt="Portfolio" width="200" height="31" id="Image10" title="Portfolio" onmouseover="MM_swapImage('Image10','','bilder/roll_over/rov_portfolio.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_team"><a href="team.htm"><img src="bilder/btn_team.jpg" alt="Team" width="200" height="29" id="Image11" title="Team" onmouseover="MM_swapImage('Image11','','bilder/roll_over/rov_team.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
    <div id="img_kontakt"><a href="kontakt.htm"><img src="bilder/btn_kontakt.jpg" alt="Kontakt" width="200" id="Image12" title="Kontakt" onmouseover="MM_swapImage('Image12','','bilder/roll_over/rov_kontakt.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
  </div>

...

im IE wird alles richtig angezeigt, auch mit a href tags.
im FF wird es ohne tags richtig angezeigt.

wo liegt mein fehler?

  1. Hallo,

    weniger quelltext zum testen, schauen, ob du stylesheets eingebunden hast. welche version ie? i.d.r. machts der ff "richtig"(er als der ie, zumindest dessen versionen kleiner 8)

    Gruß

    jobo

    1. Natürlich hab ich die stylesheets eingebunden, sonst würde es im IE wohl kaum gehn. Außerdem gehts auch im FF nur nich MIT den 'a href-tags'

      die info dass es "i.d.r." der ff "richtig" macht hilft mir jez reichlich wenig.
      der IE macht es richtig. der FF falsch.
      außerdem macht der ff nach meinen erfahrungen mehr probleme, aber das sei jetzt nebensache.

      danke für weitere, hilfreiche posts.

      1. Hi,

        die info dass es "i.d.r." der ff "richtig" macht hilft mir jez reichlich wenig.

        Vielleicht hilft das mehr: </hilfe/charta.htm#tipps-fuer-fragende>

        der IE macht es richtig. der FF falsch.

        Was jobo meinte, dürfte wohl der Umstand sein, dass Anfänger oft daraus, dass der IE etwas so anzeigt, wie sie es sich vorgestellt haben, den Schluss ziehen, das sei "richtig" - was es oftmals aber eben gerade nicht ist.

        außerdem macht der ff nach meinen erfahrungen mehr probleme

        Dieser Eindruck ändert sich meistens dann, wenn sich wirklich Erfahrung einstellt, und zwar im korrekten (und sinnvollen) Umgang mit HTML und CSS.

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
        1. Hi,

          »» die info dass es "i.d.r." der ff "richtig" macht hilft mir jez reichlich wenig.

          Vielleicht hilft das mehr: </hilfe/charta.htm#tipps-fuer-fragende>

          »» der IE macht es richtig. der FF falsch.

          Was jobo meinte, dürfte wohl der Umstand sein, dass Anfänger oft daraus, dass der IE etwas so anzeigt, wie sie es sich vorgestellt haben, den Schluss ziehen, das sei "richtig" - was es oftmals aber eben gerade nicht ist.

          »» außerdem macht der ff nach meinen erfahrungen mehr probleme

          Dieser Eindruck ändert sich meistens dann, wenn sich wirklich Erfahrung einstellt, und zwar im korrekten (und sinnvollen) Umgang mit HTML und CSS.

          MfG ChrisB

          hehe jetzt muss ich lachen.
          zum glück bin ich kein anfänger und einfach nur auf der suche nach ner antwort auf mein problem.
          aber leider sind im moment wohl keine user im forum aktiv, die mir weiterhelfen könnten.
          auf posts wie die vorhergehenden kann dieses forum wohl verzichten.

          ich würd mich immer noch über hilfreiche posts freuen.

          1. Moin!

            hehe jetzt muss ich lachen.
            zum glück bin ich kein anfänger und einfach nur auf der suche nach ner antwort auf mein problem.
            aber leider sind im moment wohl keine user im forum aktiv, die mir weiterhelfen könnten.
            auf posts wie die vorhergehenden kann dieses forum wohl verzichten.

            ich würd mich immer noch über hilfreiche posts freuen.

            Ich hab deinen HTML-Ausschnit mal auf eine Testseite getan und im FF geöffnet. Bei mir wird alles so angezeigt, wie es im HTML drinsteht. Ich kann dein Problem nicht nachvollziehen.

            Das könnte aber auch daran liegen, dass ich dein CSS nicht habe. Und deshalb auch der Hinweis auf "Tipps für Fragende" von ChrisB.

            - Sven Rautenberg

          2. Hi,

            bitte zitiere vernüftig, und vermeide TOFU.

            hehe jetzt muss ich lachen.
            zum glück bin ich kein anfänger

            Sowohl dein gezeigter Code als auch Art und Ausdrucksweise deiner Fragestellung vermitteln mir einen anderen Eindruck.

            und einfach nur auf der suche nach ner antwort auf mein problem.
            aber leider sind im moment wohl keine user im forum aktiv, die mir weiterhelfen könnten.

            Oh doch, jede Menge.

            ich würd mich immer noch über hilfreiche posts freuen.

            Eine Beschreibung der Voraussetzungen dafür habe ich dir verlinkt.

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
          3. @@pwNd:

            nuqneH

            auf posts wie die vorhergehenden kann dieses forum wohl verzichten.

            Worauf dieses Forum verzichten kann sind Leute, die Antworten nicht verstehen (wollen), aber anstatt ihren Kenntnisstand zu erweiten sich einfach nur auskotzen.

            Qapla'

            PS: Auf Vollquottel kann diese Forum auch verzichten.

            --
            Bildung lässt sich nicht downloaden. (Günther Jauch)
      2. Hallo,

        Natürlich hab ich die stylesheets eingebunden, sonst würde es im IE wohl kaum gehn. Außerdem gehts auch im FF nur nich MIT den 'a href-tags'

        verstehe ich nicht. frage ist doch, was du für stylevorgaben mit dem Ankerelement <a> verknüpft hast unter anderem.

        die info dass es "i.d.r." der ff "richtig" macht hilft mir jez reichlich wenig.

        das missverstehst du. dein code ist u.u. falsch. dass der ie ihn wie gewünscht anzeigt, muss nicht heißen, dass der code richtig ist. "richtig" heißt hier "normkonform" (w3c)

        der IE macht es richtig. der FF falsch.
        außerdem macht der ff nach meinen erfahrungen mehr probleme, aber das sei jetzt nebensache.

        Naja, das kommt drauf an. Wenn du o.g. missverstehst, dann ist das vieleicht keine Nebensache. Schau dir die Entwicklung vom IE6 über IE7 zu IE8 an. Der IE8 macht jetzt im Grunde das, was Opera und FF schon lange gemacht haben, nämlich HTML und CSS normkonform darstellen.

        Gruß

        jobo

        1. Hi,

          "richtig" heißt hier "normkonform" (w3c)

          Und auch das heisst nur syntaktisch richtig, aber damit noch lange nicht sinnvoll.

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
  2. Sogenannte ersetzte Inline-Elemente wie <img> liegen auf der Grundlinie der CSS-Zeilenbox. Ich vermute, daher kommt die Verschiebung, die du feststellst.

    Du kannst die Bilder in der Zeilenbox mit vertical-align positionieren. Standard ist baseline (die besagte Grundlinie), mit vertical-align:bottom für die img-Elemente liegt die Grafik ganz unten.

    #menu_navi img {
       vertical-align: bottom;
    }

    Alternativ könntest du dem img-Element (und bei der Gelegenheit auch den a-Elementen) display:block geben, dadurch gibts gar keine Zeilenbox mehr, weil es sich dann um Blockelemente handelt:

    #menu_navi a, #menu_navi img {
       display: block;
    }

    Ferner würde ich dir raten:

    • Setze zumindest die alt-Attribute bei den Bildern korrekt. Das ist ganz wichtig für die Zugänglichkeit deiner Site.
    • Noch besser: Verwende sauberes Markup und lagere die Bilder sowie die Highlight-Logik aus. So würde ich das HTML bauen:

    <ul id="navi">
    <li id="navi-home"><a href="...">Home</a></li>
    ...
    </ul>

    Der Rest lässt sich viel übersichtlicher mit CSS umsetzen. Stichwörter: CSS Image Replacement und CSS Sprites.

    Mathias