zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE div höhe und overflow

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.08.2008, 12:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2008
Beiträge: 2
tintifax befindet sich auf einem aufstrebenden Ast
Unglücklich IE div höhe und overflow

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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.08.2008, 12:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2008
Beiträge: 2
tintifax befindet sich auf einem aufstrebenden Ast
Standard

Nachtrag

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

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Header entfernen tripple CSS 17 15.06.2010 15:41
div höhe - 2 scrollbalken vermeiden grubentaucher CSS 4 07.04.2010 11:16
DIV in DIV IE 6 Höhe 100% BooKer CSS 0 01.04.2009 17:11
joomla template entschlüsseln nieselfriem CSS 2 18.03.2008 13:12
Div in Div 100% höhe?! grazioli CSS 1 17.03.2007 17:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:36 Uhr.