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!


  • Aviator Aviator
    R2-D2
    0 x
    99 Beiträge
    0 Hilfreiche Beiträge
    22. 03. 2005, 12:55

    Um mal jenses' Antwort vorwegzunehmen: divs.

    Ich wollte es zuerst auch nicht glauben, aber letztlich hatte ich mit seiner Hilfe dann eine Seite, die frameaehnliches Verhalten - statisches Menue links, scrollbarer Content rechts - zeigte, ohne Frames und ohne Tabellen als Gestaltungselement. Und mit einem Trick klappt das sogar sowohl im IE als auch in den anderen Browsern.

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

    hm.. sowas hab ich auch schon oft gesucht :) wusste aber nicht, dass man es mit divs realisieren kann.

    erm.. darf ich mal ganz dreist nach dem Quellcode fragen? Oder hast du das auch aus selfhtml?

    vielen dank schonmal!

  • Nicklas Nicklas
    Jedi-Meister
    0 x
    441 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2005, 16:29

    gibts keine Doku irgendwo die das bissel erklärt, hab nochma im selfhtml geguckt, aber da nichts passendes gefunden...

    wär sehr nett.. bräucht genau sowas für ein kommendes projekt...

    danke!

  • Aviator Aviator
    R2-D2
    0 x
    99 Beiträge
    0 Hilfreiche Beiträge
    23. 03. 2005, 16:43

    Zur Zeit ist das alte Design - bei dem ich das verwendet habe - noch [url=http://193.25.26.35]hier[/url] zu finden. Stylesheets sind einmal [url=http://193.25.26.35/fileadmin/template/style/style.css]das normale[/url] und dann [url=http://193.25.26.35/fileadmin/template/style/ie-style.css]das für den IE[/url].

  • Norman2k Norman2k
    Jedi-General
    0 x
    1635 Beiträge
    75 Hilfreiche Beiträge
    23. 03. 2005, 17:29

    Hier ein simpler Aufbau mit div´s, sieht aus wie Frames, sind aber keine: :D
    [code:1:e7c92d6b67]
    <div style="float:left;">###MENU###</div>
    <div style="float:left; overflow:auto; height:300px; width:300px;">
    <div>###CONTENT### (ganz viel Text)</div>
    </div>
    <div style="clear:both;">###FOOTER###</div>
    [/code:1:e7c92d6b67]

    Und hier noch eine interessante Seite über css:
    http://www.css4you.de