Div-Layout im IE zerstört

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Div-Layout im IE zerstört

    Wie solls auch anders sein?

    So siehts im FF KORREKT aus:
    http://img482.imageshack.us/img482/2653/ffyt1.png

    So im IE:
    http://img482.imageshack.us/img482/9665/iefg6.png

    Hier der quellentext:
    Code:
    <!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" lang="en" xml:lang="en">
    
    	<head>
    		<title>TroXInterfacE: -- {subtitle} --</title>
    		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    		<meta http-equiv="Content-Script-Type" content="text/javascript" />
    		<meta http-equiv="Content-Style-Type" content="text/css" />
    		<meta name="author" content="TroX Development" />
    		
    		<link rel='stylesheet' href="./html/layout.css" type="text/css" />
    	</head>
        
    	<body>
        <div style="width:100%;margin:0px auto;text-align:left;background-color:#bdbec6;border:1px solid #000000;">
             <div id="title">
    
              <h1>TroXInterfacE - {subtitle}</h1>
              
             </div>
    
             <div id="left">
              <div class="menucontainer">
               <p class="menutitle">Home</p>
               <a class="menu" href="?opt=0">Startseite</a>
               <a class="menu" href="?opt=1">Übersicht</a>
              </div>
    
              <div class="menucontainer">
               <p class="menutitle">Konfiguration</p>
    
               <a class="menu" href="?opt=2&g=bf2">Battlefield 2</a>
               <a class="menu" href="?opt=2&g=bf2sf">BF2: Special Forces</a>
               <a class="menu" href="?opt=2&g=cs16">Counter Strike 1.6</a>
               <a class="menu" href="?opt=2&g=rtcwet">RtCW: Enemy Territory</a>
              </div>
              
              
                <div class="menucontainer">
                    <p class="menutitle">Statistik</p>
                </div>
    
             </div>
    
                <div id="content">
                    {content}
                </div>
             <br style="clear:both;" />
    </div>
    </body>
    </html>
    und das css-file:
    Code:
    /* CSS Document */
    
    .header {
    	background-color: #0099CC;
    	padding-top: 6px;
    	padding-bottom: 6px;
    	vertical-align: middle;
    	margin: 0;
    }
    
    .lang {
    	width: 15%;
    }
    
    .title {
    	padding-left: 5px;
    	float: left; 
    	width: 80%;
    }
    input.text {
    	border: 1px solid black;
    	padding: 2px;
    	background-color: #EAEAEA
    }
    body {
    	margin: 0;
    	height: 100%;
    	background-color: #EAEAEA;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	border-collapse: collapse;
    }
    
    .navigation {
    	width: 10%;
    	border: 1px solid;
    	margin: 3px;
    	padding: 3px;
    	border-collapse: collapse;
    }
    
    .content {
    	padding-top: 10px;
    	background-color: #EAEAEA;
    }
    
    .subcontent {
    	border: 1px solid;
    	margin: 3px;
    	padding: 3px;
    	width: 87.8%;
    }
    
    /*  Nav  */ 
    .subnav
    {
    	padding-left: 9px;
    }
    .nav 
    {
    	font-weight: bold;
    }
    
    body 
    {
     text-align:center;
     margin:0px;
     	height: 100%;
    	background-color: #EAEAEA;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	border-collapse: collapse;
    }
    
    	h1 {font-size:18px;color:#000000;margin-bottom:0px;}
    	h2 {font-size:16px;color:#000000;}
    	h3 {font-size:14px;color:#000000;}
    
    code {font-size:14px;color:#0000ff;}
    
    pre
    {
     font-size:14px;
     color:#0000ff;
     padding:5px;
    }
    a:link, a:visited, a:active, a:hover
    { 
      text-decoration:underline;
      font-weight:normal;
      color:#ff0000;
      font-size:12px;
    }
    a:active, a:hover
    { 
      color:#009999;
    }
    a.menu {
     display:block;
     padding:3px;
     border-top:1px solid #000;
     background-color:#737994;
     text-align:center;
     color:#eeeeee;
     text-decoration:none;
     }
    a.menu:link, a.menu:visited
    { 
      color:#eeeeee;
     background-color:#737994;
     text-decoration:none; font-weight:bold;
    }
    a.menu:active, a.menu:hover
    { 
      	color:#737994; font-weight:bold;
     	background-color:#eeeeee;
    }
    
    #title {
    	height:34px;
    	padding:5px;
    	background-color:#7b7d8e;
    	border-bottom:1px solid #000;
    }
    #left {
    	background-color:#bdbec6;
    	width:12%;
    	float:left;
    }
    .menutitle{
    	font-weight:bold;
    	text-align:center;
    	margin:2px;
    }
    .menucontainer {
    	border:1px solid #000000;
    	background-color:#7b7d8e;
    	width:155px;
    	margin:10px;
    }
    #content {
    	border:1px solid #efeff7;
    	background-color:#efeff7;
    	width:84.4%;
    	float:right;
    	padding:5px 5px 5px 13px;
    }
    input {
    	padding: 1px;
    }
    input.important {
    	font-weight: bold;
    }
    
    td{
    	padding: 1px;
    }

    hoffe, jemand hat nen lösungsansatz

    mfg TroX
    Freedom is a state of mind. Not a state in which we live.

    troxdev.ch | animefieber

  • #2
    könnte möglicherweise der three pixel text jog sein. probier mal folgendes:
    PHP-Code:
    html #content
    {
       
    height1%;

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Das war's leider nicht... sieht noch genauso aus

      argh ich habs...

      Code:
      #content {
      	border:1px solid #efeff7;
      	background-color:#efeff7;
      	width:84%;
      	float:right;
      	padding:5px 5px 5px 13px;
      }
      Freedom is a state of mind. Not a state in which we live.

      troxdev.ch | animefieber

      Kommentar


      • #4
        stell das mal online

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          http://trox.ath.cx/troxinterface

          User: Admin
          pw: restricted


          edit:
          argh, ich sehs... muss da noch was für niedrigere auflösungen basteln
          Freedom is a state of mind. Not a state in which we live.

          troxdev.ch | animefieber

          Kommentar


          • #6
            PHP-Code:
            width:84%; 
            ich würde die breite noch ein wenig kleiner setzen, damit der horizontale scollbalken verschwindet.

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Jup, ist getan, danke

              so long
              TroX
              Freedom is a state of mind. Not a state in which we live.

              troxdev.ch | animefieber

              Kommentar

              Lädt...
              X