Falsche Darstellung der DIVs bei IE

    Hallo,

    ich habe 2 Probleme bei der Programmierung meiner Seite. Die Seite soll sich dem Browser anpassen und die Inhalte (div/ul) mitzentrieren.
    Seiten-layout ist über css extern ausgelagert


    Problem 1:
    Die Darstellung der DIVs ist bei IE völlig falsch Geschockt und bei FFox werden die DIVs teilweise 1-2 pixel verschoben.

    Problem 2:
    Grössenangaben der Tabellen werden nicht berücksichtigt und die Inhalte bei IE falsch ausgerichtet

    sicherlich mache ich hier was falsch und würde mich deshalb auf ein paar Tips der Profis sehr freuen

    Danke und schönen Tag noch .... LingLing

    hier die codes:

    CSS:

    #page
    {
    position: relative; margin:0px; padding:0px; height: 450px;
    border: 1px solid ; top : 0px ; left : 0px ; background-color : #FFFFFF ;

    }
    a:hover {background:; color:; text-decoration:none;}
    a {text-decoration: none ;}
    * { font-style : Verdana ; font-size : 10px; color:#3F3F3F ;}

    body
    {
    }
    #page
    {
    position: relative; margin:0px; padding:0px; border: 1px solid ;
    top : 0px ; left : 0px ; background-color : #FFFFFF ; height:470px;
    }

    #content
    {
    width : 350px ; height: 450px; padding: 0px; margin: 0px; border : 1px solid ;
    position:relative; top: 0px; left: 0px;
    }
    #top
    {
    width : 314px ; height: 125px; padding: 0px; margin: 0px;
    border : 1px solid ; position:relative; left: 0px; top: 0px;
    }
    #select
    {
    width : 314px ; height: 25px; padding: 0px; margin: 0px;
    border : 1px solid ; position:relative; left: 0px; top: 130px;
    }
    #con1
    {
    width : 314px ; height: 225px; padding: 0px; margin: 0px;
    border : 1px solid ; position:relative; left: 0px; top: 5px;
    }
    #buttom
    {
    width : 314px ; height: 35px; padding: 0px; margin: 0px;
    border : 1px solid ; position:relative; left: 0px; top: 235px;
    }


    HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href= "styles.css" />
    </head>

    <body>
    <div id="page" align="center">
    <ul id="content">
    <ul id="top">
    <ul id="select">
    <table width="300" height="20" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed">
    <tr>
    <td width="170" height="20">
    <form>


    <select name="Product" size="1"
    onChange="PopUpName=window.open('','PopUpName'); PopUpName.location=options[selectedIndex].value;">
    <option>KategorieKategorieKategorie</option>
    </select>
    </p>
    </form>
    </td>
    <td width="80" height="20">


    <select name="Language" size="1"
    onChange="PopUpName=window.open('','PopUpName'); PopUpName.location=options[selectedIndex].value;">
    <option>Language</option>
    </select>
    </p>
    </form>
    </td>
    <td width="50" height="20">
    </tr>
    </table>
    <ul id="con1">
    <ul id="buttom">
    [/list]
    </div>
    </body>
    </html>

    Zitat von Dark_Dog

    Hast du einen Link?
    Vllt hilft es ja weiter, position auf absolute zu machen, so hab ich es und bei mir gehts..
    LG


    leider gibt es noch keinen link

    Zitat von sejuma

    Auffällig ist, dass du #page zweimal mit unterschiedlichen Werten definiert hast.
    Zur Zentrierung siehe hier

    Abgesehen von dem zentrierenden div würde ich nicht mit position absolute oder relative arbeiten. Die Positionierung kannst du flexibler mit float und margin-Angaben definieren.


    ups a stimmt :( also das mit der Page-ID .... ich werde es dann mal anders versuchen.
    vielen Dank erstmal :)