✔ Tabelle soll rechts am Rand sein

Status
Nicht offen für weitere Antworten.
selle1

selle1

Erfahrenes Mitglied
Hallo zusammen,

wie der Titel schon sagt, habe ich mich an CSS herangewagt und versuche nun mit Hilfe von Divs die Seite zu gestalten. Ich habe eine Tabell in einem DIV. Die Tabelle soll aber rechts am Rand kleben, tut sie aber nicht. Vielleicht kann jemand drüber schauen. Danke im voraus.
HTML: 
#formular1 {
	position:absolute;
	z-index:1;
	overflow: visible;
	left: 400px;
	margin-right: 10px;
	width: 500px;
	padding: 0;
	right: 0px;
	table-layout: auto;
}
 
Hi,

wenn die Tabelle am rechten Elementrand positioniert werden soll, dürfte hier wohl die linke Positionsangabe im Wege stehen.
 
OK Maik,

das war wohl ein wenig blöd von mir.
Und wie erreiche ich es, dass die Tabelle den Rest der Tabellenbreite einimmt, sprich ich habe ein Div und darin soll die Tabelle den "restlichen Platz der Breite" annehmen.
 
Hallo,

an sich schon, aber ich habe das ganze Ding wohl etwas umständlich aufgebaut. Ich hänge Dir die CSS mal an, dann weißt Du was ich meine. Da ict ein Bild, welches ich in dem DIV links ausgerichtet habe . Ab da soll die Tabelle die restliche Breite einnehmen. Hoffe Du verstehst mich:
HTML: 
#rechts {
	position: absolute;
	top: 150px;                /* Abstand zum oberen Fensterrand */
	bottom: 50px;                /* Abstand zum unteren Fensterrand */
	right: 0px;   /* Abstand zum rechten Fensterrand */
	left:200px;               /* Blockbreite */
	padding: 0;                /* Interpretation Boxmodell! */
	background-color: #fff;
	overflow: auto;        /* Scrollbalken unterbinden */

  /* nur für IE: */
          height: expression((document.body.clientHeight - 200) + "px");
                                        /* top-Wert + bottom-Wert = 200 */
          width: expression((document.body.clientWidth - 200) + "px");
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;        /*width: ;*/ /* auskommentiert = deaktiviert */
	color: #333333;        /*width: auto;*/ /* auskommentiert = deaktiviert */

  }
  #rechts .inhaltDiv {
	margin: 0px;		/* Abstand des Inhalts zum Blockrand */
	margin-top: 0px;
	margin-right: 50px;

In diesem DIV soll dies geschehen.
 
Einmal die Seite, keine Angst, das meiste sind nur Formulardaten.
Ich weiss, dass ich das CSS für das Formular besser in das Stylesheet packe. Bin halt noch am Anfang, was CSS angeht.

HTML: 
<!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">
<meta name="author" content="SO Consulting">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="expires" content="">
<meta name="robots" content="index,follow">

<title>pressmedi.de | Nachrichtenagentur f&uuml;r Medizin</title>




<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
@import url("buttons/med.css");
#formular1 {
	position:absolute;
	z-index:1;
	overflow: visible;
	margin-right: 10px;
	width: 100%;
	padding: 0;
	right: 0px;
	table-layout: auto;
}
-->
</style>
</head>
  
<body leftmargin="0" onLoad="MM_preloadImages('buttons/home1.jpg','buttons/leistung1.jpg','buttons/kontakt1.jpg','buttons/impressum1.jpg','buttons/presse1.jpg','buttons/presse.jpg')">
  
  <div id="mitte"><div class="inhaltDiv">
  
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="test.html" target="_top" onClick="MM_nbGroup('down','group1','home','buttons/home1.jpg',1)" onMouseOver="MM_nbGroup('over','home','buttons/home1.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/home.jpg" alt="pressmedi start" name="home" border="0" id="home" onload=""></a></td>
    </tr>
    <tr>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','verteiler','buttons/presse1.jpg',1)" onmouseover="MM_nbGroup('over','verteiler','buttons/presse1.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="buttons/presse1.jpg" alt="pressemitteilung einstellen" name="verteiler" vspace="5" border="0" onload="MM_nbGroup('init','group1','verteiler','buttons/presse.jpg',1)"></a></td>
    </tr>
    <tr>
      <td><a href="leistungen.html" target="_top" onclick="MM_nbGroup('down','group1','leistung','buttons/leistung1.jpg',1)" onmouseover="MM_nbGroup('over','leistung','buttons/leistung1.jpg','',1)" onmouseout="MM_nbGroup('out')"><img name="leistung" src="buttons/leistungen.jpg" border="0" alt="pressmedi leistungen" onload=""></a></td>
    </tr>
    <tr>
      <td><a href="kontakt.html" target="_top" onclick="MM_nbGroup('down','group1','kontakt','buttons/kontakt1.jpg',1)" onmouseover="MM_nbGroup('over','kontakt','buttons/kontakt1.jpg','',1)" onmouseout="MM_nbGroup('out')"><img name="kontakt" src="buttons/kontakt.jpg" border="0" alt="pressmedi kontakt" onload=""></a></td>
    </tr>
    <tr>
      <td><a href="impressum.html" target="_top" onclick="MM_nbGroup('down','group1','imprint','buttons/impressum1.jpg',1)" onmouseover="MM_nbGroup('over','imprint','buttons/impressum1.jpg','',1)" onmouseout="MM_nbGroup('out')"><img name="imprint" src="buttons/impressum.jpg" border="0" alt="pressmedi impressum" onload=""></a></td>
    </tr>
  </table>
  </div>
  </div>
  
  <div id="oben">
    <div class="inhaltDiv">
    <div align="left"><a href="test.html"><img src="buttons/logo_arzt.jpg" alt="" width="80" height="100" border="0"></a><a href="test.html"><img src="buttons/logo.jpg" alt="pressmedi" width="200" height="100" border="0"></a></div>
  </div>
</div>
  
  <div id="links"><div class="inhaltDiv">
  <h2>#links:</h2>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...  </p>
  </div></div>
  
<div id="rechts">
<div class="inhaltDiv">
  <div id="formular1">
    <form name="form1" method="post" action="rechner3.php">
      <table border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
          <td nowrap bgcolor="#DDDDDD">W&auml;hlen Sie die gew&uuml;nschten Medien aus<br>
            (Mehrfachauswahl m&ouml;glich) </td>
          <td bgcolor="#dddddd">&nbsp;</td>
          <td bgcolor="#dddddd">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td nowrap>Internet/- Online Medien &ndash; Gratis <br>
            (369)</td>
          <td><label>
            <input name="internet" type="checkbox" id="internet" value="0" checked>
          </label></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Zeitungen <br>
            (4.687 Journalisten)</td>
          <td><label>
            <input name="zeitung" type="checkbox" id="zeitung" value="175">
          </label></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Publikumszeitschriften<br>
            (2.756 Journalisten)</td>
          <td><label>
            <input name="publikum" type="checkbox" id="publikum" value="115">
          </label></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Nachrichtenagenturen<br>
            (33)</td>
          <td><input name="nachr" type="checkbox" id="nachr" value="85"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Fachzeitschriften<br>
            (1.799 Journalisten)</td>
          <td><input name="fach" type="checkbox" id="fach" value="135"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>Fernsehen/-H&ouml;rfunk<br>
            (190 Journalisten)</td>
          <td><label>
            <input name="fern" type="checkbox" id="fern" value="95">
          </label></td>
        </tr>
        <tr>
          <td bgcolor="#dddddd">M&ouml;chten Sie den Verteiler regional beschr&auml;nken?</td>
          <td bgcolor="#dddddd">&nbsp;</td>
          <td bgcolor="#dddddd">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td bgcolor="#FFFFFF"><input name="vert" type="radio" value="0" checked>
                  Nein
                  <label></label></td>
              </tr>
          </table></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td nowrap><input name="vert" type="radio" value="65">
            Ja, in folgenden PLZ-Gebieten<br>
            <label>
              <input type="checkbox" name="checkbox5" value="checkbox">
              0
              <input type="checkbox" name="checkbox6" value="checkbox">
              1
              <input type="checkbox" name="checkbox7" value="checkbox">
              2
              <input type="checkbox" name="checkbox8" value="checkbox">
              3
              <input type="checkbox" name="checkbox9" value="checkbox">
              4
              <input type="checkbox" name="checkbox10" value="checkbox">
              5
              <input type="checkbox" name="checkbox11" value="checkbox">
              6
              <input type="checkbox" name="checkbox12" value="checkbox">
              7
              <input type="checkbox" name="checkbox13" value="checkbox">
              8
              <input type="checkbox" name="checkbox14" value="checkbox">
              9</label></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#dddddd">M&ouml;chten Sie, dass wir Ihre Meldung in Suchmaschinen  eintragen?</td>
          <td bgcolor="#dddddd"><label></label></td>
          <td bgcolor="#dddddd">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><label>
            <input type="radio" name="suma" value="65">
            Ja (insgesamt 380 S&uuml;ck weltweit)
            <input name="suma" type="radio" value="65" checked>
            Nein </label></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#dddddd">Wann soll die Pressemitteilung verschickt werden?</td>
          <td bgcolor="#dddddd"><br></td>
          <td bgcolor="#dddddd">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><label>Tag
              <select name="tag" id="tag">
                <option selected>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
              </select>
            Monat
            <select name="monat" id="monat">
              <option selected>Jan</option>
              <option>Feb</option>
              <option>Mrz</option>
              <option>Apr</option>
              <option>Mai</option>
              <option>Juni</option>
              <option>Juli</option>
              <option>Aug</option>
              <option>Sep</option>
              <option>Okt</option>
              <option>Nov</option>
              <option>Dez</option>
            </select>
            Jahr
            <select name="jahr" id="jahr">
              <option selected>2007</option>
              <option>2008</option>
            </select>
          </label></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td><div align="center"><br>
          </div></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top" bgcolor="#dddddd"><p>Bitte schreiben oder kopieren Sie  hier Ihre Pressemitteilung. </p>
            <p>Sollten Sie Ihrer  Pressemitteilung eine Datei aus Ihrer Festplatte hinzuf&uuml;gen, dann w&auml;hlen Sie  unten den Button &bdquo;Duchsuchen&ldquo; und f&uuml;gen Sie die Daten der Meldung zu. Bitte  gehen Sie nach der erfolgreichen Eingabe auf &bdquo;Vorschau&ldquo;. </p>
            <p>*Diese Angaben sind erforderlich</p></td>
          <td valign="top"><label>
            <textarea name="text" cols="40" rows="10" id="text"></textarea>
          </label></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td valign="top">&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      </form>
    </div>
      <h2><img src="buttons/pressemitteilung.jpg" alt="Pressemitteilung" width="344" height="288" align="left"></h2>
  <p>&nbsp;</p>
  </div>
<p>
  <label></label>
</p>
</div>
  
  <div id="unten"><div class="inhaltDiv">
  
    <div align="center"> Sebastianstrasse 16 | 
52066 Aachen | Tel: 
0049-241-5310636 | Fax: 0049-241-605119</div>
  </div></div>
</body>
</html>

Und hier die ganze CSS:

HTML: 
/* CSS Document */
<style type="text/css">
  <!--
  html, body {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	border: 0;
  	padding: 0;
  }
  body {
  	background-color: #fff;
  	overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
	}
	
	a:link { font-weight:bold; color:#FDB50B; text-decoration:underline; }
	a:visited { font-weight:bold; color:#666666; text-decoration:underline; }
	a:hover { font-weight:bold; color:#333333; text-decoration:none; }
	a:active { font-weight:bold; color:#333333; text-decoration:underline; }

  #mitte {
  	position: absolute;
  	top: 100px;		/* Abstand zum oberen Fensterrand */
  	left: 0px;		/* Abstand zum linken Fensterrand */
  	bottom: 50px;		/* Abstand zum unteren Fensterrand */
  	right: 100px;		/* Abstand zum rechten Fensterrand */
  	overflow: auto;		/* Scrollbalken, falls notwendig */
  /* nur für IE: */
  	width: expression((document.body.clientWidth - 300) + "px");
 				/* left-Wert + right-Wert = 300 */
  	height: expression((document.body.clientHeight - 200) + "px");
 				/* top-Wert + bottom-Wert = 200 */
  }
  #mitte .inhaltDiv {
  	margin: 50px;		/* Abstand des Inhalts zum Blockrand */
  }
  #oben {
	position: absolute;
	top: 0;			/* Abstand zum oberen Fensterrand */
	left: 0px;		/* Abstand zum linken Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 100px;		/* Blockhöhe */
	padding: 0;
	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	width: expression(document.body.clientWidth + "px");
	background-image: url(bg-top.jpg); 				/* left-Wert + right-Wert = 0 */
  }
  #oben .inhaltDiv {
  	margin: 0px;
	margin-left:30px;		/* Abstand des Inhalts zum Blockrand */
  }
  #links {
  	position: absolute;
  	top: 150px;		/* Abstand zum oberen Fensterrand */
  	left: 0;		/* Abstand zum linken Fensterrand */
  	bottom: 0;		/* Abstand zum unteren Fensterrand */
  	width: 0px;		/* Blockbreite */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #ffc;
  	overflow: auto;		/* Scrollbalken, falls notwendig */
  /* nur für IE: */
  	height: expression((document.body.clientHeight - 150) + "px");
 				/* top-Wert + bottom-Wert = 150 */
  }
  #links .inhaltDiv {
  	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
  }
  #unten {
  	position: absolute;
  	left: 0px;		/* Abstand zum linken Fensterrand */
  	bottom: 0 !important;	/* Abstand zum unteren Fensterrand */
  	bottom: -1px;		/* nur für IE */
  	right: 0px;		/* Abstand zum rechten Fensterrand */
  	height: 50px;		/* Blockhöhe */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #FFFFFF;
  	overflow: hidden;	/* Scrollbalken unterbinden */
	background-image: url(bg_footer.jpg);
  /* nur für IE: */
  	width: expression((document.body.clientWidth - 0) + "px");
 				/* left-Wert + right-Wert = 200 */
  }
  #unten .inhaltDiv {
	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
  }
  #rechts {
	position: absolute;
	top: 150px;                /* Abstand zum oberen Fensterrand */
	bottom: 50px;                /* Abstand zum unteren Fensterrand */
	right: 0px;   /* Abstand zum rechten Fensterrand */
	left:200px;               /* Blockbreite */
	padding: 0;                /* Interpretation Boxmodell! */
	background-color: #fff;
	overflow: auto;        /* Scrollbalken unterbinden */

  /* nur für IE: */
          height: expression((document.body.clientHeight - 200) + "px");
                                        /* top-Wert + bottom-Wert = 200 */
          width: expression((document.body.clientWidth - 200) + "px");
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;        /*width: ;*/ /* auskommentiert = deaktiviert */
	color: #333333;        /*width: auto;*/ /* auskommentiert = deaktiviert */

  }
  #rechts .inhaltDiv {
	margin: 0px;		/* Abstand des Inhalts zum Blockrand */
	margin-top: 0px;
	margin-right: 50px;
  }
#header_rechts {
	position:absolute;
	width:100%;
	height:100px;
	z-index:1;
	left: 0;
	top: 0;
}
  -->
  </style>
 
Hi,

probier's mal hiermit:

Code: 
#rechts .inhaltDiv {
        margin: 0px;                /* Abstand des Inhalts zum Blockrand */
        margin-top: 0px;
        /*margin-right: 50px;*/ /* auskommentiert = deaktiviert */
  }

#formular1 {
        position:absolute;
        z-index:1;
        overflow: visible;
        margin-right: 10px;
        /*width: 100%;*/ /* auskommentiert = deaktiviert */
        padding: 0;
        left:344px;
        right: 0px;
        table-layout: auto;
}
Zudem muss das Dokument dem IE im Quirksmodus übergeben werden - siehe hierzu auch den Hinweis im angewandten CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken und vergleiche den HTML-Code der angehängten Beispiele.
 
hallo Maik,

ich habe nun das CSS des Formulars in das Stylesheet eingebunden und mir auch Deinen Link angesehen. (Das Stylesheet habe ich schon anfänglich mit dem Tutorial gemacht).

Jetzt habe ich 3 Dinge, die ich nicht gelöst bekomme.

1. Obwohl ich auf ein und dasselbe Sheet zugreife, zeigt er mir im IE das Background-Image nicht immer an (auf manchen Seiten ist das zu sehen und auf anderen nicht)

2. Wenn ich z.B. die Impressum Seite lade und dann aktualisiere, passt die Höhenangabe nicht mehr, d.h. er vergrößert mir die Ansicht in der Höhe.

3. Kopf- und Fusszeile reichen nicht bis zum Bildschirmrand.

Habe schon alle möglichen Werte dafür mit der expression.width Angabe probiert.



Noch einmal das CSS:

HTML: 
/* CSS Document */
<style type="text/css">
  
  html, body {
  	width: 100%;
  	height: 100%;
  	margin: 0;
  	border: 0;
  	padding: 0;
  }
  body {
  	background-color: #fff;
  	overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
	}
	
	a:link { font-weight:bold; color:#FDB50B; text-decoration:underline; }
	a:visited { font-weight:bold; color:#666666; text-decoration:underline; }
	a:hover { font-weight:bold; color:#333333; text-decoration:none; }
	a:active { font-weight:bold; color:#333333; text-decoration:underline; }

  #mitte {
	position: absolute;
	top: 100px;		/* Abstand zum oberen Fensterrand */
	left: 0px;		/* Abstand zum linken Fensterrand */
	bottom: 50px;		/* Abstand zum unteren Fensterrand */
	right: 0px;		/* Abstand zum rechten Fensterrand */
	overflow: auto;		/* Scrollbalken, falls notwendig */

  /* nur für IE: */
  	width: expression((document.body.clientWidth - 300) + "px");
 				/* left-Wert + right-Wert = 300 */
  	height: expression((document.body.clientHeight - 100) + "px");
	width: 100%;
 				/* top-Wert + bottom-Wert = 200 */
  }
  #mitte .inhaltDiv {
  	margin: 50px;		/* Abstand des Inhalts zum Blockrand */
  }
  #oben {
	position: absolute;
	top: 0;			/* Abstand zum oberen Fensterrand */
	left: 0px;		/* Abstand zum linken Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 100px;		/* Blockhöhe */
	padding: 0;
	overflow: hidden;	/* Scrollbalken unterbinden */
  /* nur für IE: */
  	width: expression(document.body.clientWidth + "px");
	background-image: url(bg-top.jpg); 				/* left-Wert + right-Wert = 0 */
  }
  #oben .inhaltDiv {
  	margin: 0px;
	margin-left:30px;		/* Abstand des Inhalts zum Blockrand */
  }
  
  #unten {
  	position: absolute;
  	left: 0px;		/* Abstand zum linken Fensterrand */
  	bottom: 0 !important;	/* Abstand zum unteren Fensterrand */
  	bottom: -1px;		/* nur für IE */
  	right: 0px;		/* Abstand zum rechten Fensterrand */
  	height: 50px;		/* Blockhöhe */
  	padding: 0;		/* Interpretation Boxmodell! */
  	background-color: #FFFFFF;
  	overflow: hidden;	/* Scrollbalken unterbinden */
	background-image: url(bg_footer.jpg);
  /* nur für IE: */
  	width: expression((document.body.clientWidth - 0) + "px");
 				/* left-Wert + right-Wert = 200 */
  }
  #unten .inhaltDiv {
	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
  }
  #rechts {
	position: absolute;
	top: 150px;                /* Abstand zum oberen Fensterrand */
	bottom: 50px;                /* Abstand zum unteren Fensterrand */
	right: 0px;   /* Abstand zum rechten Fensterrand */
	left:200px;               /* Blockbreite */
	padding: 0;                /* Interpretation Boxmodell! */
	background-color: #fff;
	overflow: auto;        /* Scrollbalken unterbinden */





  /* nur für IE: */
          height: expression((document.body.clientHeight - 150) + "px");
                                        /* top-Wert + bottom-Wert = 200 */
          width: expression((document.body.clientWidth - 200) + "px");
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;        /*width: ;*/ /* auskommentiert = deaktiviert */
	color: #333333;

  }
  #rechts .inhaltDiv {
        margin: 20px;                /* Abstand des Inhalts zum Blockrand */
        margin-top: 0px;
        /*margin-right: 50px;*/ /* auskommentiert = deaktiviert */
  }
#header_rechts {
	position:absolute;
	width:100%;
	height:100px;
	z-index:1;
	left: 0;
	top: 0;
}

#formular1 {
        position:absolute;
        z-index:1;
        overflow: visible;
        margin-right: 10px;
        /*width: 100%;*/ /* auskommentiert = deaktiviert */
        padding: 0;
        left:300px;
        right: 0px;
        table-layout: auto;
		}
  
  </style>
 
Zuletzt bearbeitet:
Wenn du meinen Ratschlag befolgst, die Dokumente im Quirksmodus zu übergeben, lösen sich all deine genannten Probleme in Luft auf.

Außerdem solltest du die expression-Werte für das DIV #mitte nochmal rechnerisch mit den entsprechenden Positionsangaben abgleichen, denn die stimmen derzeit definitiv nicht. Gleiches gilt für das DIV #rechts und die height:expression.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück