ne HTML-Frage bzw. was versteht Opera, was IE nich versteht?

  • Nicklas Nicklas
    Jedi-Meister
    0 x
    441 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 12:38

    Hi zusammen... kleine Frage:

    ich habe ine Template geschrieben und es in typo3 übernommen, soweit so gut. In Opera funkt es genau wie ich es will, allerdings meint mein Freund der Internet Explorer, dass es anders aussehen soll.
    Mein Problem ist jetzt, dass ich nicht weiß, welchen Teil der IE nicht versteht. Könntet ihr mir das sagen?

    die Seite könnt ihr unter http://p9080.typo3server.info sehen. Problem ist z.b. unter "Filme" verrutscht die navi und der rechte Strich passt nicht ganz, ist nach links verschoben.
    Der Quelltext ist noch nicht ganz sauber, also nicht wundern, wenn da einiges noch nicht so sauber ist:

    Quelltext HTML:
    [code:1:b1429e62ab]<!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">
    <title>Unbenanntes Dokument</title>
    <LINK rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
    <table width="950" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td colspan="5" class="banner"></td>
    <td width="1"></td>
    </tr>
    <tr>
    <td colspan="2" class="sterne"></td>
    <td width="20" rowspan="3" valign="top"></td>
    <td width="677" rowspan="2" valign="top">
    <table width="677" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="content_top"></td>
    </tr>
    <tr>
    <td class="content">test<br>test<br>test<br>test<br></td>
    </tr>
    <tr>
    <td class="content_bot"></td>
    </tr>
    </table>
    </td>
    <td rowspan="3" class="rand_rechts"></td>
    <td></td>
    </tr>
    <tr>
    <td class="rand_links" rowspan="2"></td>
    <td width="187" rowspan="2" valign="top">
    <table width="187" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="nav_top"></td>
    </tr>
    <tr>
    <td class="nav">
    <div class="menu1-level1-no"><a href="#">level1</a></div>
    <div class="menu1-level1-act"><a href="#">level1</a></div>
    <div class="menu1-level2-no"><a href="#">level2</a></div>
    <div class="menu1-level2-act"><a href="#">level2</a></div>
    </td>
    </tr>
    <tr>
    <td class="nav_bot"></td>
    </tr>
    </table></td>
    <td></td>
    </tr>
    <tr>
    <td height="19" valign="top"></td>
    <td></td>
    </tr>
    <tr>
    <td class="unten_links"></td>
    <td class="unten_mitte" colspan="3"></td>
    <td class="unten_rechts"></td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>[/code:1:b1429e62ab]

    meine CSS:
    [code:1:b1429e62ab]body {
    background-color:#D5D5D5;
    }

    td.banner {
    height:153px;
    vertical-align:top;
    background:url(images/banner.gif);
    }

    td.sterne {
    height:102px;
    background:url(images/sterne.gif) no-repeat;
    }

    td.content_top {
    height:31px;
    background:url(images/content_top.gif) no-repeat;
    width:677px;
    vertical-align:top;
    }

    td.content {
    background:url(images/content_bg.gif) repeat;
    width:677px;
    vertical-align:top;
    font-family:verdana;
    font-size:10px;
    padding-left:10px;
    }

    td.content_bot {
    background:url(images/content_bot.gif) no-repeat;
    height:10px;
    vertical-align:top;
    }

    td.rand_rechts {
    background:url(images/rand_rechts.gif) repeat;
    width:45px;
    vertical-align:top;
    }

    td.rand_links {
    background:url(images/rand_links.gif) repeat;
    width:30px;
    vertical-align:top;
    }

    td.nav_top {
    background:url(images/nav_top.gif) no-repeat;
    height:19px;
    width:187px;
    vertical-align:top;
    }

    td.nav {
    background:url(images/nav_bg.gif) repeat;
    width:187px;
    vertical-align:top;
    font-family:verdana;
    font-size:10px;
    padding-left:10px;
    }

    td.nav_bot {
    height:8px;
    background:url(images/nav_bot.gif) no-repeat;
    }

    td.unten_links {
    height:19px;
    width:23px;
    background:url(images/unten_links.gif) no-repeat;
    vertical-align:top;
    }

    td.unten_mitte {
    height:19px;
    background:url(images/unten_mitte.gif) y-repeat;
    width:905px;
    }

    td.unten_rechts {
    width:22px;
    background:url(images/unten_rechts.gif) no-repeat;
    }
    td.nav div.menu1-level1-no {
    font-color:black;
    font-size:10px;
    font-family:verdana;
    font-color:black;
    }
    td.nav div.menu1-level1-act {
    font-color:black;
    font-size:10px;
    font-family:verdana;
    font-weight:bold;
    font-color:black;
    }
    td.nav div.menu1-level2-no {
    font-color:black;
    font-size:10px;
    font-family:verdana;
    padding-left:5px;
    font-color:black;
    }
    td.nav div.menu1-level2-act {
    font-color:black;
    font-size:10px;
    padding-left:5px;
    font-family:verdana;
    font-weight:bold;
    font-color:black;
    }
    td.nav DIV A
    {
    color: black;
    text-decoration: none;
    }
    td.nav DIV A:hover
    {
    text-decoration: underline;
    }
    td.content h1 {
    font-weight:bold;
    font-size:12px;
    }[/code:1:b1429e62ab]

    Vielen Dank für eure Hilfen!


  • Beatz Beatz
    Jedi-Meister
    0 x
    163 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 15:24

    Also mal ganz abgesehen davon, dass das mit den ganzen col- und row-spans ganz schön durcheinander ist, hast Du darin auch einen Fehler. In der dritten und vierten Zeile fehlt Dir jeweils das letzte TD. Versuchs also mal hiermit:[code:1:d8170bd2c1]<!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">
    <title>Unbenanntes Dokument</title>
    <LINK rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
    <table width="950" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
    <td colspan="5" class="banner"></td>
    <td width="1"></td>
    </tr>
    <tr>
    <td colspan="2" class="sterne"></td>
    <td width="20" rowspan="3" valign="top"></td>
    <td width="677" rowspan="2" valign="top">
    <table width="677" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="content_top"></td>
    </tr>
    <tr>
    <td class="content">test<br>test<br>test<br>test<br></td>
    </tr>
    <tr>
    <td class="content_bot"></td>
    </tr>
    </table>
    </td>
    <td rowspan="3" class="rand_rechts"></td>
    <td></td>
    </tr>
    <tr>
    <td class="rand_links" rowspan="2"></td>
    <td width="187" rowspan="2" valign="top">
    <table width="187" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="nav_top"></td>
    </tr>
    <tr>
    <td class="nav">
    <div class="menu1-level1-no"><a href="#">level1</a></div>
    <div class="menu1-level1-act"><a href="#">level1</a></div>
    <div class="menu1-level2-no"><a href="#">level2</a></div>
    <div class="menu1-level2-act"><a href="#">level2</a></div>
    </td>
    </tr>
    <tr>
    <td class="nav_bot"></td>
    </tr>
    </table></td>
    <td></td>
    <td rowspan="2"></td>
    </tr>
    <tr>
    <td height="19" valign="top"></td>
    <td></td>
    </tr>
    <tr>
    <td class="unten_links"></td>
    <td class="unten_mitte" colspan="3"></td>
    <td class="unten_rechts"></td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>[/code:1:d8170bd2c1]

  • Nicklas Nicklas
    Jedi-Meister
    0 x
    441 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 15:37

    danke erstmal, aber hat nichts geändert...

    allerdings bin ich noch der meinung, dass es hinkommt mit den col- und rowspans...
    aber werd ich dann wohl nochmal drüber gucken müssen...

  • Beatz Beatz
    Jedi-Meister
    0 x
    163 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 15:39

    Es kommt definitiv nicht hin. Das ist das, was ich geprüft habe. Ich empfehle Dir jedoch, auf diese col- und row-spans zu verzichten. Das geht sicher auch einfach, davon bin ich überzeugt.

  • ben ben
    Sternenflotten-Admiral
    0 x
    203 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 16:40

    Also dass deine Navi verrutscht wundert mich bei dem Quellcode nicht.
    Du hast deine Navigation ja auch in eine seperate Zeile gepackt nach dem Content..
    Somit bleibt die Navigation immer unterhalb des contents und wird der content länger verschiebt sich die Navigation automatisch nach unten..

    [code:1:900794fd18] <tr>
    <td class="nav">
    <div class="menu1-level1-no"><a href="#">level1</a></div>
    <div class="menu1-level1-act"><a href="#">level1</a></div>
    <div class="menu1-level2-no"><a href="#">level2</a></div>
    <div class="menu1-level2-act"><a href="#">level2</a></div>
    </td>
    </tr> [/code:1:900794fd18]

    Das hier ist doch deine Navigation nehme ich an, oder?

  • Nicklas Nicklas
    Jedi-Meister
    0 x
    441 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 17:48

    ja, aber genau das ist es ja, bei opera funktioniert es.. und deswegen: was versteht IE nich, was opera versteht bzw umgekehrt...

  • Beatz Beatz
    Jedi-Meister
    0 x
    163 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 20:05

    Sagen wir mal so: Der Code ist nicht richtig so und liefert nicht in allen Browsern das gewünschte Ergebnis. Es ist doch im Grunde egal, ob und was welcher Browser sehr tolerant versteht und was nicht. Ich schlage Dir vor, den Code entsprechend zu ändern. Richtig wäre es, eine Tabelle mit zwei Spalten zu machen, in der linken ist das Menü, in der rechten der Content. So ganz grob müsste es sein. Da kommst Du also nicht drum rum ... ;-)

  • Nicklas Nicklas
    Jedi-Meister
    0 x
    441 Beiträge
    0 Hilfreiche Beiträge
    21. 03. 2005, 22:31

    naja, habs jetzt mit nem kumpel neu gemacht.. werd den Code dann mal posten...

  • jenses jenses
    Flash Gordon
    0 x
    3087 Beiträge
    106 Hilfreiche Beiträge
    22. 03. 2005, 08:17

    [quote:b258695d6d="Beatz"] Richtig wäre es, eine Tabelle mit zwei Spalten zu machen, in der linken ist das Menü, in der rechten der Content. So ganz grob müsste es sein. Da kommst Du also nicht drum rum ... ;-)[/quote:b258695d6d]
    Das ist ja wohl einer der dümmsten Tips, den man geben kann . ;)
    Tabellen sind [b:b258695d6d] kein [/b:b258695d6d] Gestaltungselement !
    BITV :
    [quote:b258695d6d]Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.[/quote:b258695d6d]

    jenses

  • ben ben
    Sternenflotten-Admiral
    0 x
    203 Beiträge
    0 Hilfreiche Beiträge
    22. 03. 2005, 10:10

    Es gibt genug Leute, die Tabellen als Gestaltungselement benutzen, da es, wenn man es beherrscht gute Ergebnisse liefert.
    Ich zum Beispiel halte nichts von Frames ;)
    Ist eben Geschmackssache..

    IE benötigt aber bei leeren Zeilen/Spalten ein Blind.gif, sonst verschiebt er dir bei Bedarf alles hin und her. Das solltest du bei deinem Code evtl auch beachten