:: Buchempfehlung ::

Cyberbob_at_tot · #1 30.03.2010, 13:07:42

Hallo zusammen,
ich würde gerne ein eigentlich einfaches Margin-left hinbekommen.
Hierzu habe ich 2 Divs...

CSS:
#scroller
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;}
#content_haupt
{
margin-left:210px;
}

HTML:
<div id="scroller">
<div id="content_haupt">
....CONTENT

Hierbei Soll Content_haupt vom LInken rand 210px entfernt sein. Läuft im IE 8 und FF auch ohne Probleme. Der Text auf die Seite zentriert und Scrolbar nur Vertikal Beim IE6 verschiebt er das Div einfach nach Rechts aus dem Bildschirm raus. Vertikal und Horizontale Scrolbalken.

Wie kann ich dem IE das beibringen, das er dies auch richtig macht ?

Die CSS seperation habe ich schon...


Vielen dank im Vorraus.

MFG

Cyberbob

urvater · #2 30.03.2010, 17:48:23

Dein Problem kann ich erst morgen Nachmittag testen, da mir dann wieder ein IE6 zur Verfügung steht.

Allgemein gibt es ein Pixelproblem im IE, was man teilweise verhindern kann, wenn man den standardkonformen Modus nutzt.

Persönlich sehe ich zur Zeit den Sinn in scroller nicht. Würde margin:0; im body nicht das gleiche bringen?

Cyberbob_at_tot · #3 31.03.2010, 07:56:37

Leider ohne erfolg, es ändert sich nicht, auch wenn ich im konformen Modus bin.
der Scroller beinhaltet ein Hintergrundbild was fest auf die breite und Höhe fixiert ist das Div darüber soll aber normal scrolbar sein.

Habe da noch was gefunden, innerhalb des Divs sind 2 Bilder mit überbreite, wenn ich diese verkleinere wird auch die Anzeige korrigiert. Es liegt vieleicht an der Funkion, das die Bilder nicht angepasst werden.

urvater · #4 31.03.2010, 17:08:53

Wenn du nicht alle Details postet kann man die tatsächliche Ursache natürlich auch nicht heraus finden.

Zumindest werden deine Styles im IE Version 6.0 korrekt angezeigt, wenn man sie so verwendet wie du sie hier postest.

Cyberbob_at_tot · #5 14.04.2010, 10:42:58

Um das Thema nochmals aufzugreifen, folgend mehr infos:
CSS

Code:

  html, body
  	{
  	margin:0;
  	padding:0;
  	width:100%;
  	height:100%; 
  	overflow:hidden;
  	}
  body
  	{
  	font-family:verdana, arial, sans-serif;
  	font-size:14px;
  	color:black;
  	}
  #background
  	{
  	position:absolute; 
  	z-index:1;
  	width:100%;
  	height:100%;}
  img
    {
  	width: auto;
    height: auto;
    }
  #scroller 
  	{
  	position:absolute; 
  	width:100%; 
  	height:100%; 
  	top:0; 
  	left:0;
  	overflow:auto;
  	z-index:2;
    } 
  #content_haupt 
  	{
     margin-left:185px;
    }
  #content 
  	{
  	padding:auto;
  	}
  table
    {
    border:0;
    }
  table.KundeTabelle
  	{
    	border:0px;
    	border-left:1px;
      width:100%;
      right:auto;
      float:center;
  	  font-family: Verdana, Arial, sans-serif;
   	  font-size: 12px;
    	margin:0;
  	  padding:0;
    	text-align:left;
  	}
  table.Haupttabelle
  	{
    border:0;
  	border-spacing:0;
    width:100%;
    height:100%;
  	font-family: Verdana, Arial, sans-serif;
   	font-size: 12px;
    margin:0;
  	padding:0;
    text-align:center;
  	}
  table.Haupttabelle_innen
  	{
    border:0;
  	border-spacing:0;
    width:50%;
    height:90%;
  	font-family: Verdana, Arial, sans-serif;
   	font-size: 12px;
    margin:0;
  	padding:0;
    text-align:center;
  	}
  table.teinstellungen
  	{
    border:1px;
    background-color : #E5E5E5;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
  	}
  td.kunde_anzeige
    {
    border:0px solid silver;
    width:100%;
    height:100%;
    }
  td.einstellungen
    {
    min-height:20px;
    margin:0;
    padding:0;
    background-image: url(Media/background2.png);
    background-repeat:repeat;
    background-position: left;
    text-align:center;
    }
  td.inline
    {
    border:0;
    border-spacing:0;
    width:100%;
   	height:100%;
    }
  tr.ueberschrift
    {
    color:blue;
    font-weight:bold;
    font-size: 14px;
    text-align:left;
    }

Dann Gibt es die Hauptseite, in der ich ein Iframe haben..Javascript dient zum ein- ausblenden des Menus.

HTML-Code:

<HTML>
 <HEAD>
	<TITLE>Lagerstatistiken</TITLE>
 </HEAD>
 <BODY class="hauptseite" >
 <table class="Haupttabelle">
   <tr>
   <td class="inline">
      <?PHP
       ///////////////////////////////////////////////////
       // Inline Frames                                 //
       ///////////////////////////////////////////////////
    	echo"<iframe style=\"height:100%\" name=\"daten_inline\" class=\"inlinef\" src=\"allgemein_kurz.php\"></iframe>";
       ?>
     </td>
   </tr>
   </table>
   <div style="text-align:left">
	 <div id="menu" class="menu">
		  <table class="teinstellungen">
	        <tr>
	        <td>
                  Menuelemente ziel Iframe
			</td>
	        </tr>
	       </table>
		</div>
		</div>
		<div class="menureinicon" id="menureinicon">
		 <img onclick="reinfliegen();" src="Media/menu_rein.gif" alt="" title="" /> 
		</div>
		<div class="menurausicon" id="menurausicon">
		 <img onclick="rausfliegen();" src="Media/menu_raus.gif" alt="" title="" /> 
		</div>
	</BODY>
</HTML>

Innerhalb des Iframes kommen dann die Seiten, die im IE immer nach Rechts rausragen. Obwohl breite 100% eingegeben ist. Es scheint hier an dem margin-Left oder an den Diagrammbildern innerhalb der Tabelle zu liegen.

HTML-Code:

<div>
  <img id="background" src="Media/background.png" alt="" title="" /> 
</div>

  <form name="form_uebergabe" method="post">
  	<input type="hidden" name="uebergabe">
  	<input type="hidden" name="uebergabe2">
  </form>
<div id="scroller">
<div id="content_haupt">
  <br>
  <br>
<form name="form_daten" action="<?PHP $_SERVER['PHP_SELF']?>" method="post">
 <table class="Haupttabelle_innen">
	<tr>
	<td align="right">
  Datum <select size="1" name="daten_datum">
    Datumdaten
	</select>
	</td>
	<td align="left">
		<input class="button" type="submit" name="sent_new" value="wählen">
	  <input class="button" type="button" name="print" value="Drucken" onclick="javascript:window.print()">
  </td>
	</tr>
	<tr>
	 <td class="kunde_anzeige" colspan="2">
	 	<hr>
    Kundenauswertung
    <hr>
    <div id="content">
	 	<table class="KundeTabelle">
        Gruppeninfos
          </table>
          </div>
         </td>
        </tr>
       <tr>
				<td class="kunde_anzeige" colspan="2">
				<img src="diagrammkundenauswertung.php"/>
				</td>
			</tr>
      <tr>
       <td class="kunde_anzeige" colspan="2">
	 	    <hr>
        Lagerauswertung
        <hr>
        <div id="content">
    	 	<table class="KundeTabelle">
        Kundendaten
		</table
    </div>
	 </td>
	</tr>
  <tr>
     <td class="kunde_anzeige" colspan="2">
				<img src="diagrammauslastung.php"/>
				</td>
        </tr>
        <tr>
       <td class="kunde_anzeige" colspan="2">
	 	    <hr>
	 </td>
	</tr>
</table>
</div>
</div>
</form>
<body onload="parent.rausfliegen();">

Ich würd mich freuen, wenn ich das zusammen mit euch hinbekomme. Sieht einfach nicht schön aus. Hier macht der Firefox es besser bzw. schlechter, wenn es ein Fehler meinerseits ist.

MFG
Cyberbob

urvater · #6 14.04.2010, 18:16:27

Wenn ich allein das Ende deiner HTML Datei sehe wird mir einiges klar.

HTML-Code:

</div>
</div>
</form>
<body onload="parent.rausfliegen();">

HTML sollte mindestens diesen Aufbau allerdings haben.

HTML-Code:

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Wie du sicher unschwer erkennen kannst hälst du dich nicht an die Regeln von HTML, was natürlich jeder Browser dann so auslegt, wie dieser glaub es richtig zu machen. Solange dein HTML nicht korrekt aufgebaut ist werden deine CSS Eigenschaften auch nie korrekt umgesetzt werden.

Du solltest dir zwingend mehr Grundwissen in HTML aneigenen.

Cyberbob_at_tot · #7 14.04.2010, 19:59:11

Ich denke du hast recht, man sollte die Basics besser umsetzen.

Werde mich mal um die validität kümmern und schauen ob es dann funktioniert.

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!