Matthias Jütte: 1 pixel unterschied zw. opera und ie - warum???

hallo zusammen!

ich benutze folgende tabelle für mein seitenlayout:

<HTML>
<HEAD>
<TITLE>hp</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles/home.css" type="text/css">
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<div align="center">

<TABLE WIDTH=780 HEIGHT=550 BORDER=0 CELLPADDING=0 CELLSPACING=0 rules"all">
    <TR>
        <TD WIDTH="780" HEIGHT="104" COLSPAN="2" style="background-image:url(bilder/index_01.gif); background-repeat:no-repeat;">
        </TD>
    </TR>
    <TR>
        <TD width="119" height="446">
            <iframe frameborder="0" hspace="0" vspace="0" width="100%" height="100%" name="left" src="navigation.php"  scrolling="no"></iframe>
        </TD>
        <TD width="661" height="446">
            <iframe frameborder="0" hspace="0" vspace="0" width="100%" height="100%" name="main" src="home.html"></iframe>
        </TD>
    </TR>
</TABLE>

</div>

</BODY>
</HTML>

in "left" wird per php eine linkliste aus einer db heraus generiert, in "main" werden die seiteninhalte präsentiert.

an genau der y-koordinate, wo die beiden zellen, die die iframes enthalten, aufeinander treffen, läuft aus dem oberen bild ein schatten hinunter. dieser soll auch über den restlichen (senkrechten) verlauf der seite fortgesetzt werden, so daß ich im iframe in "main" im hintergund eine y-repeat eines 1 pixel hohen bildes anwende, die eben diesen effekt generiert.

die navigationsleiste in "left" hat lediglich eine einfache hintergrundfarbe.

so lange ich in meinem opera-browser (v. 7.01) geblieben bin, war alles wunderbar. als ich zur kontrolle jedoch in den ie wechselte (v. 6.0) wurde für einen weiteren pixel in y-richtung die hintergundfarbe von "left" angezeigt. gleichzeitig verschob sich der in "main" generierte schatten ebenfalls um einen pixel.

woran kann sowas liegen und was tue ich dagegen?

tia,

Matthias

  1. Hi Matthias!

    woran kann sowas liegen und was tue ich dagegen?

    Pixelgenaues Design ist immer so eine Sache..., aber da du doch eh mit absoluten Werten arbeitest - hast du's schon mal mit absoluten Werten für width & height für die beiden Iframes probiert?

    Gruß Gunther

    1. Gunther,

      habe es mit der angabe mit pixeln versucht und es scheint die lösung zu sein. hatte das auch schonmal angedacht, allerdings nicht konsequent genug, da ich nur für den ersten frame die pixel angegeben hatte.

      1. Gunther,

        habe es mit der angabe mit pixeln versucht und es scheint die lösung zu sein. hatte das auch schonmal angedacht, allerdings nicht konsequent genug, da ich nur für den ersten frame die pixel angegeben hatte.

        Doctype und dtd angabe ...damit meinte mein vorgänger glaube ich
        folgendes:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http://www.w3.org/TR/html4/loose.dtd">

        mfg NAG

  2. Moin!

    ich benutze folgende tabelle für mein seitenlayout:

    <link rel="stylesheet" href="styles/home.css" type="text/css">

    Jetzt hast du schon Quelltext gepostet, aber der entscheidende fehlt immer noch, nämlich der vom CSS.

    Ein Pixel Abweichung deutet fast darauf hin, dass du in den IE-BoxModel-Bug gerannt bist. Wenn du Padding und Border zusammen mit festen width-Angaben verwendest, ist das der Fall.

    Beim IE6 kann man den durch Angabe eines DOCTYPEs mit DTD-URL beheben. Mach das mal!

    Wenn das tatsächlich hilft, hast du "nur" das Problem, für alte IEs (5.5 und älter) einen Workaround hinzufummeln.

    - Sven Rautenberg

    --
    Signatur oder nicht Signatur - das ist hier die Frage!
    1. Jetzt hast du schon Quelltext gepostet, aber der entscheidende fehlt immer noch, nämlich der vom CSS.

      sorry, im eifer des gefechts vergessen...

      Ein Pixel Abweichung deutet fast darauf hin, dass du in den IE-BoxModel-Bug gerannt bist. Wenn du Padding und Border zusammen mit festen width-Angaben verwendest, ist das der Fall.

      ungefähr so?:

      table {
          border: 1px ridge Black;
          padding: 0;
         }

      die lösung von gunther scheint zu funktionieren, und da die zeit etwas drängt, und mir der begriff dtd-url auch nicht viel sagt, versuche ich es erstmal damit.

      trotzdem danke für die idee!