IE div höhe und overflow

tintifax · #1 (**permalink**) 06.08.2008, 12:35

Hi zusammen,

nachdem ich nun schon 2 Tage an einer Problemlösung arbeite und nicht weiter komme, wende ich mich nun hoffnungsvoll an euch.

Es geht um eine mit CSS formatierte Seite, in welcher verschiedene div Boxen verwendet werden. Eine davon (#content) soll scrollen, wenn der Inhalt (wird später aus einer mysql Datenbank mittels php dynamisch eingetragen) aufgrund zu geringer Monitorauflösung nicht mehr angezeigt werden kann.

Unter dieser div Box, welche sich rechts befindet, ist eine weitere div Box, mit Breite 100%.

Die scrollbare Box mache ich mit overflow:auto scrollbar, ohne Höhenangabe der Box. Es wäre Unsinn eine fixe Höhe einzustellen, da die Höhe relativ zur Monitorauflösung immer den ganzen Platz bis zur darunter befindlichen div Box nutzen soll. Eine Höhenangabe in % (relativ) wirkt sich immer auf % des ganzen Dokuments aus.

Firefox stellt alles perfekt dar.
IE zeigt keinen Scroll an, wenn keine Höhe definiert ist = schlecht.
Gebe ich für IE eine Höhe in % an, passt die Darstellung je nach Fenstergrösse (natürlich) ebenfalls nicht.

Ich hoffe auf eine Lösungshinweise, die Suchfunktion und durchsichten von Threads hat mir noch keine Lösung gebracht.

*********************************
HTML

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>

<div id="masthead">
  <h1 id="siteName">SEITENNAME</h1>
  <br />
  <div id="globalNav"> <a href="#">LINKNAME1</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> </div>
</div>

<div id="navBar">
  <div id="search">
    <form action="#"><input name="search" type="text" size="25" value="SUCHE.."> <input class="button1" name="goButton" type="submit" value="&raquo;"></form>
  </div>
  <div id="sectionLinks"> 
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div id="content">
  <div id="breadCrumb"> <a href="#">START | NAVIGATION TOP - LINKNAME1 |</a>
    <hr style="border:solid #E8E8E8 1px;height:1px;" noshade>
  </div>
  <h2 id="pageName">LINKNAME1</h2>
  <div class="feature"> 
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
    <p>bla</p>
  </div>
  </div>

<div id="siteInfo"> <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | &copy;2008 #NAME# </div>

</body>
</html>

CSS

Code:

input,select   {font:10px verdana; border:1px solid #A6A6A6; background:#eeeeee; color:#006699; padding:1px; vertical-align: bottom;}
textarea       {font:10px verdana; border:1px solid #A6A6A6; background:#eeeeee; color:#006699; padding:1px; vertical-align: bottom;}

body {
font-family: Verdana,Tahoma,Arial,sans-serif;
color: #333333;
line-height: 1.166;	
margin: 0px;
padding: 0px;
overflow:hidden;
background-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#FFFFFF;
scrollbar-arrow-color:#000000;
}

a:link, a:visited, a:hover {
	color: #006699;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
	font-family: Verdana,Tahoma,Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
 font-family: Verdana,Verdana,Tahoma,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
}

h2{
 font-size: 110%;
 color: #006699;
}

h3{
 font-size: 100%;
 color: #334d55;
}

h4{
 font-size: 90%;
 font-weight: normal;
 color: #333333;
}

h5{
 font-size: 80%;
 color: #334d55;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font: bold 100% Verdana,Tahoma,Arial,sans-serif;
 color: #334d55;
}
				

/***********************************************/
/* Layout Divs                                 */
/***********************************************/


#masthead
{
margin: 0;
padding: 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
z-index:1;
}


#navBar
{
float:left;
margin: 0 0 0 0;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
left:0;
width: 200px;
height: 100%;
overflow: none;
position: static;
z-index:2;
}


#siteInfo
{
width: 100%;
border: 1px solid #cccccc;
font-size: 8pt;
color: #cccccc;
padding: 10px 10px 10px 10px;
position:absolute;
bottom: -1px;
left:0px;
background-color: #FFFFFF;
z-index:3;
}


#content
{
padding:6px;
background-color:#FFFFFF;
text-align:justify;
position:fixed; 
top:88px;
left:202;
right:3;
bottom:36px; 
overflow:auto;
z-index:4;
}

/* ie only - start */

* html #content
{
height: 80%;
overflow-x: visible;
overflow-y: auto;
}

*+html #content
{
overflow-x: visible;
overflow-y: auto;
white-space:nowrap;
}

html>body #content 
{
overflow-x: visible;
overflow-y: auto;
}

/* ie only - ende */


.button1 
{
padding:0;
margin:0;
width:24px;
font-size:10px;
border: 1px solid #A6A6A6;
background-color: #ECECEC;
color:#006699;
}


/************* #globalNav styles **************/

#globalNav{
background-color: #E6E6E6;
color: #cccccc;
padding: 0px 0px 0px 218px !important;  /* alle ausser IE */
padding: 0px 0px 0px 218px; 		/* nur für den IE */
vertical-align: middle;
border-top: 1px solid #cccccc;
white-space: nowrap;
}

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 8pt;
	padding: 0px 0px 0px 0px; 
}

#globalNav a:hover{
	background-color: #dddddd;
	padding: 0px 0px 0px 0px;
}


/************* #breadCrumb styles *************/

#breadCrumb{
	font-size: 8pt;
	padding: 5px 0px 5px 10px;
}


/************** .feature styles ***************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 8pt;
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}


/************* #search styles ***************/

#search{
	padding: 10px 0px 5px 10px;
	font-size: 9pt;
}

#search form{
 margin: 0px;
 padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
	position: relative;
	margin: 0px;
	padding: 5px 0px 2px 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 8pt;
}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
	padding: 5px 0px 2px 10px;
	border-top: 1px solid #cccccc;
	width: 100%;
  voice-family: "\"}\""; 
  voice-family:inherit;
	width: auto;
}

#sectionLinks a:visited{
	border-top: 1px solid #cccccc;
	padding: 5px 0px 2px 10px;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #dddddd;
	padding: 5px 0px 2px 10px;
}


/************** #headlines styles **************/

#headlines{
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 9pt;
}

#headlines p{
	padding: 5px 0px 5px 0px;
}

/************** #xName styles **************/

#siteName
{
margin: 0px;
padding: 10px 10px 10px 10px;
}


#pageName
{
padding: 0px 0px 10px 10px;
}

tintifax · #2 (**permalink**) 06.08.2008, 12:38

Nachtrag

im css file ist aktuell
* html #content
height: 80%;
zugewiesen, damit IE überhaupt den Scroll anzeigt..

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV Höhe passt sich nicht an iframe mit fester Höhe an	tkollert	CSS	0	14.01.2010 18:52
Linkverhalten im IE6	ChOpSueY!	CSS	19	19.05.2008 22:48
Div Höhe im IE6 an absoluten Div anpassen	RitterSportHH	CSS	1	09.08.2007 14:50
Höhe der navi (div) soll sich an content (div) anpassen	18inch	CSS	2	10.03.2005 23:28
höhe eines div tag an ein anderes anpassen	ffr	CSS	4	09.12.2003 16:59