Unterschiedliche Browser interpretieren margin anders

[SaFl]

Moin liebe Gemeinde,

ich habe ein kleines, großes Problem. Ich habe eine Website, in dem ich ein paar Bilder absolute positionieren will. Im Firefox funktioniert das auch alles, nur in allen anderen Browsern nicht. Beim Versuch, dieses Problem zu beheben, ist mir aufgefallen, dass jeder Browser meine Positionierung anders interpretiert.

Die Problemseite: PixCam

Ich habe nur mal das Bild in in die Nav mit aufgenommen und nur margin-top eingestellt. Der Firefox setzt das Bild rechts neben die nav, der Internetexplorer mitten rein.





Bild 1: Internet Explorer

Bild 2: Firefox

        <ul><img src='content/head_people/andre1.png' style='position: absolute;margin: -90px 0 0 0;' />
            <li><a href='index.php'>HOME</a></li>
            <li><a href='index.php?menu=about'>&Uuml;BER UNS</a></li>
            <li><a href='index.php?menu=service'>SERVICE/PREISE</a></li>
            <li><a href='gallery/index.html' Title='JavaScript ist erforderlich!'>GALLERIE</a></li>
            <li><a href='index.php?menu=contact'>KONTAKT</a></li>
        </ul>

So wie es eigentlich gedacht war:

<div id='navi_top'>
    <div id='logo'><img src='logo2.png' alt='logo' /><br /><span style="font-family: 'Merienda', cursive; font-size: 11px;" >Fotografie aus dem Norden</span></div>
    <div id='nav'>
    <?php 
        if (isset($_GET['menu'])) {
          if ($_GET['menu'] == 'service') {
           echo "<img src='content/head_people/andre2.png' style='margin: -75px 0 0 230px; position: absolute;' />";
           echo "<img src='content/head_people/thomas3.png' style='margin: -132px 0 0 -390px; position: absolute;' />";}
          if ($_GET['menu'] == 'contact') {
           echo "<img src='content/head_people/andre4.png' style='margin: -65px 0 0 230px; position: absolute;' />";
           echo "<img src='content/head_people/thomas1.png' style='margin: -80px 0 0 -390px; position: absolute;' />";}
        }
        if (!isset($_GET['menu'])) {
         echo "<img src='content/head_people/andre1.png' style='margin: -90px 0 0 230px; position: absolute;' />";
         echo "<img src='content/head_people/thomas2.png' style='margin: -118px 0 0 -300px; position: absolute;' />";}        
    ?>
        <ul>
            <li><a href='index.php'>HOME</a></li>
            <li><a href='index.php?menu=about'>&Uuml;BER UNS</a></li>
            <li><a href='index.php?menu=service'>SERVICE/PREISE</a></li>
            <li><a href='gallery/index.html' Title='JavaScript ist erforderlich!'>GALLERIE</a></li>
            <li><a href='index.php?menu=contact'>KONTAKT</a></li>
        </ul>
    </div>
    </div>

Hat einer eine Idee, wie ich das ganze umstellen kann, sodass in den gängigsten Browsern die Margins richtig bewertet werden?

So sollte es aussehen:

 

[SaFl]

So, ich habe es bisher hinbekommen, sodass zumindest der InternetExpolerer nun alles richtig zeigt, nur lt. browesershots.org sind das auch fast die einzigen, die es nun richtig machen.

    <div id='logo'><img src='logo2.png' alt='logo' /><br /><span style="font-family: 'Merienda', cursive; font-size: 11px;" >Fotografie aus dem Norden</span></div>
    <div id='nav'>
        <ul>
            <li>
            <?php
                if (isset($_GET['menu'])) {
                    if ($_GET['menu'] == 'service') {
                        echo "<img src='content/head_people/thomas3.png' style='margin: -132px 0 0 -180px; position: absolute;' />";
                    }
                    if ($_GET['menu'] == 'contact') {
                        echo "<img src='content/head_people/thomas1.png' style='margin: -80px 0 0 -180px; position: absolute;' />";
                    }
                } else {
                    echo "<img src='content/head_people/thomas2.png' style='margin: -118px 0 0 -100px; position: absolute;' />";
                }
            ?>
            </li>
            <li><a href='index.php'>HOME</a></li>
            <li><a href='index.php?menu=about'>&Uuml;BER UNS</a></li>
            <li><a href='index.php?menu=service'>SERVICE/PREISE</a></li>
            <li><a href='gallery/index.html' Title='JavaScript ist erforderlich!'>GALLERIE</a></li>
            <li><a href='index.php?menu=contact'>KONTAKT</a></li>
        </ul>
        <?php
            if (isset($_GET['menu'])) {
                if ($_GET['menu'] == 'service') {
                    echo "<img src='content/head_people/andre2.png' style='margin: -75px 0 0 0; position: absolute;' />";
                }
                if ($_GET['menu'] == 'contact') {
                    echo "<img src='content/head_people/andre4.png' style='margin: -65px 0 0 0; position: absolute;' />";
                }
            } else {
                echo "<img src='content/head_people/andre1.png' style='margin: -90px 0 0 0; position: absolute;' />";
            }
        ?>
    </div>
    </div>

 

[SaFl]

So, nun scheint es in allen gängigen Browsern zu funktionieren!

    <div id='logo'><img src='logo2.png' alt='logo' /><br /><span style="font-family: 'Merienda', cursive; font-size: 11px;" >Fotografie aus dem Norden</span></div>
    <div id='nav'>
        <ul>
            <li>
            <?php
                if (isset($_GET['menu'])) {
                    if ($_GET['menu'] == 'service') {
                        echo "<img src='content/head_people/thomas3.png' style='margin: -132px 0 0 -180px; position: absolute;' />";
                    }
                    if ($_GET['menu'] == 'contact') {
                        echo "<img src='content/head_people/thomas1.png' style='margin: -80px 0 0 -180px; position: absolute;' />";
                    }
                } else {
                    echo "<img src='content/head_people/thomas2.png' style='margin: -118px 0 0 -100px; position: absolute;' />";
                }
            ?>
            </li>
            <li><a href='index.php'>HOME</a></li>
            <li><a href='index.php?menu=about'>&Uuml;BER UNS</a></li>
            <li><a href='index.php?menu=service'>SERVICE/PREISE</a></li>
            <li><a href='gallery/index.html' Title='JavaScript ist erforderlich!'>GALLERIE</a></li>
            <li><a href='index.php?menu=contact'>KONTAKT</a></li>
        
        <?php
            if (isset($_GET['menu'])) {
                if ($_GET['menu'] == 'service') {
                    echo "<img src='content/head_people/andre2.png' style='margin: -75px 0 0 0; position: absolute;' />";
                }
                if ($_GET['menu'] == 'contact') {
                    echo "<img src='content/head_people/andre4.png' style='margin: -65px 0 0 0; position: absolute;' />";
                }
            } else {
                echo "<img src='content/head_people/andre1.png' style='margin: -90px 0 0 0; position: absolute;  float:left;' />";
            }
        ?></ul>
    </div>
    </div>

 

[threadi]

Wenn Du wieder Quellcode postest wäre der erzeugte HTML- und CSS-Code relevant für eine Beurteilung. Zum Glück hast Du noch einen Link auf die betreffende Seite gesetzt. Allerdings stimmt auch dieser Link nicht. Deine Seite ist eigentlich unter
PixCam - Fotografie aus dem Norden
zu finden - alles andere ist ein unnötiges Frameset, welches bei der Analyse hier nicht hilft.

Dein Quellcode enthält aktuell auch immernoch HTML-Fehler, die Du beheben solltest:
Markup Validation of http://web224.srv13.sysproserver.de/pixcam/index.php - W3C Markup Validator

Erst wenn das valide ist, solltest Du dir über mögliche Fehldarstellungen Gedanken machen. Momentan ist es eher "Glück", wenn die Browser überhaupt das anzeigen was Du erhoffst.

 

[Tronjer]

Es ist nicht zuletzt deshalb Glück, weil der TE hier mittels position:absolute Elemente pixelgenau im Browserfenster festnageln will.