✔ PHP statt Frames IE Problem

Thomas_Jung

Thomas_Jung

Erfahrenes Mitglied
Hallo
Folgender Code funktioniert perfekt im Firefox.
Könnte mir jemand behilflich sein das er auch in IE 6, 7 funktioniert

Gruß Thomas

HTML: 
<html>
  <head>
    <title></title>
  <style type="text/css">
  <!--
    body {height:100%; max-height:100%; padding:0; margin:0; border:0;}
    #header {position: fixed; top: 0; right: 0; left: 0; width:100%; height: 30px;}
    #head {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
    #main {padding: 10px 0px 40px 0px;}
    #footer {position: fixed; bottom: 0; right: 0; left: 0; width:100%; height: 30px;}
    #foot {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
  -->
<!--[if IE]>
  @media screen {
    html, body {
      height: 100%; overflow: hidden;
    }
    #main {
      height: 100%; width: 100%; overflow: auto;
    }
    #footer,#header {
      position: static;
    }
  }
</style><![endif]-->
  </style>
  </head>
  <body>
    <div id="header">
      <div id="head">
        Text a
      </div>
    </div>
    <div id="main">
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
    </div>
    <div id="footer">
      <div id="foot">
        Text c
      </div>
    </div>
  </body>
</html>
 
Hi,

der IE7 muß in den "Standardsmode", und der IE6 in den "Quirksmode" geschaltet werden:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
...

Damit ist das Problem im IE7 abgehandelt.

Was den IE6 betrifft, empfehle ich dir einen Blick in das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken.

mfg Maik
 
Du kannst auch Stu Nicholls' Layoutmodell http://www.cssplay.co.uk/layouts/basics2.html nutzen, das selbst im IE6 im "Standardsmode" läuft, oder du greifst einfach auf ie7-js zurück:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title></title>
  <style type="text/css">
  <!--
    body {height:100%; max-height:100%; padding:0; margin:0; border:0;}
    #header {position: fixed; top: 0; right: 0; left: 0; width:100%; height: 30px;}
    #head {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
    #main {padding: 10px 0px 40px 0px;}
    #footer {position: fixed; bottom: 0; right: 0; left: 0; width:100%; height: 30px;}
    #foot {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
  -->
</style>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

  </head>
  <body>
    <div id="header">
      <div id="head">
        Text a
      </div>
    </div>
    <div id="main">
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
      Text b   <br><br>
    </div>
    <div id="footer">
      <div id="foot">
        Text c
      </div>
    </div>
  </body>
</html>


Übrigens hast du in deinem Dokument den "Conditional Comment" als CSS-Browserweiche falsch angewendet.
  • Falsch
Code: 
<style type="text/css">
  <!--
    body {height:100%; max-height:100%; padding:0; margin:0; border:0;}
    #header {position: fixed; top: 0; right: 0; left: 0; width:100%; height: 30px;}
    #head {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
    #main {padding: 10px 0px 40px 0px;}
    #footer {position: fixed; bottom: 0; right: 0; left: 0; width:100%; height: 30px;}
    #foot {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
  -->
<!--[if IE]>
  @media screen {
    html, body {
      height: 100%; overflow: hidden;
    }
    #main {
      height: 100%; width: 100%; overflow: auto;
    }
    #footer,#header {
      position: static;
    }
  }
</style><![endif]-->
   </style>
  • Richtig
Code: 
<style type="text/css">
  <!--
    body {height:100%; max-height:100%; padding:0; margin:0; border:0;}
    #header {position: fixed; top: 0; right: 0; left: 0; width:100%; height: 30px;}
    #head {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
    #main {padding: 10px 0px 40px 0px;}
    #footer {position: fixed; bottom: 0; right: 0; left: 0; width:100%; height: 30px;}
    #foot {position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 100%; background: #003366;}
  -->
</style>
<!--[if IE]>
<style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow: hidden;
    }
    #main {
      height: 100%; width: 100%; overflow: auto;
    }
    #footer,#header {
      position: static;
    }
  }
</style>
<![endif]-->

mfg Maik
 
Hallo Maik
Das mit dem CSS-Beispiel 2: position_fixed hat funktioniert. :)

Danke für deine Antwort.

Habe den Code nach meinen Bedürfnissen angepasst.
Funktioniert im IE 6,7,8 und natürlich im Firefox.

Könntes du noch mal drüberschauen ob das alles korrekt ist? ;-)

Gruß Thomas

;-) JETZT KANN ICH IN DER MITTE NACH OBEN --> UNTEN & NACH RECHTS UND LINKS SCROLLEN ;-)


HTML: 
<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Beispiel 2: position_fixed</title>

<style type="text/css">
<!--
* html, * body {
overflow: hidden;
            }

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
    font-size: 12px;
	font-family: tahoma,helvetica;
	color: #000000;
}
body {
	background-color: #fff;
	overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
}
#mitte {
	position: absolute;
	top: 23px;		/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	bottom: 23px;		/* Abstand zum unteren Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	overflow: auto;		/* Scrollbalken, falls notwendig */
}
* html #mitte {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top-width: 23px;	/* = Kopfzeilenhöhe */
	border-left-width: 0;	/* = Spaltenbreite links */
	border-bottom-width: 23px;	/* = Fußzeilenhöhe */
	border-right-width: 0;	/* = Spaltenbreite rechts */
	border-style: solid;
}
#mitte .inhaltDiv {
	margin: 20px;		/* Abstand des Inhalts zum Blockrand */
}
#oben {
	position: absolute;
	top: 0;			/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 23px;		/* Blockhöhe */
	padding: 0;		/* Interpretation Boxmodell! */
	background-color: #cfc;
	overflow: hidden;	/* Scrollbalken unterbinden */
	z-index: 4;		/* höchste z-Ebene! */
}
* html #oben {
	width: 100%;
	height: 23px;
}
#oben .inhaltDiv {
	margin: 0;		/* Abstand des Inhalts zum Blockrand */
}
#unten {
	position: absolute;
	left: 0;		/* Abstand zum linken Fensterrand */
	bottom: 0;		/* Abstand zum unteren Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 23px;		/* Blockhöhe */
	padding: 0;		/* Interpretation Boxmodell! */
	background-color: #fcf;
	overflow: hidden;	/* Scrollbalken unterbinden */
	z-index: 2;
}
* html #unten {
	left: 0;
	width: 100%;
	height: 23px;
	border-top-width: 0;
	border-left-width: 0;	/* = Spaltenbreite links */
	border-bottom-width: 0;
	border-right-width: 0;
	border-style: solid;
}
#unten .inhaltDiv {
	margin: 0;		/* Abstand des Inhalts zum Blockrand */
}
-->
</style>
</head>

<body>

<div id="mitte"><div class="inhaltDiv">
<div style="width:1500px;background-color: #cfc;border: 1px 1px 1px 1px; border-style: solid;">
JETZT KANN ICH IN DER MITTE NACH OBEN --> UNTEN & NACH RECHTS UND LINKS SCROLLEN
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>


</div></div>

<div id="oben"><div class="inhaltDiv">
#oben
</div></div>

<div id="unten"><div class="inhaltDiv">
#unten
</div></div>

</body>
</html>
 
Code: 
<div style="width:1500px;background-color: #cfc;border: 1px 1px 1px 1px; border-style: solid;">
JETZT KANN ICH IN DER MITTE NACH OBEN --> UNTEN & NACH RECHTS UND LINKS SCROLLEN
</div>
Horizontal kann ich da jetzt auch scrollen (1280*1024-Monitorauflösung) :p

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück