Scrollbalken unter IE verschwindet

letslounge · #1 (**permalink**) 11.12.2007, 18:07

Hallo,

habe eine Seite erstellt die auch funktioniert wie sie soll - unter FF zumindest.
Unter IE verschwindet der untere Bereich des Scrollbalkens von #CONTENT um etwa die Höhe des Headbereiches und ich komm nicht drauf woran es liegt...

der Code:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>
<link href="../2_styles/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CONTAINER">
  <div id="HEADER">
    <div id="LOGO"><a href="0"><img src="../3_bilder/layout/logo-XXX.gif" alt="Logo XXX" width="84" height="107" /></a></div>
    <div id="HEADERNAVIGATION">
      <ul>
        <li><a href="#">Newsletter</a></li>
        <li class="current"><a href="#">Qualität</a></li>
        <li><a href="#">English</a></li>
      </ul>
    </div>
    <div id="SUCHE">
      <form action="#" method="post">
        <label>Suche</label>
        <select name="tx_sytaddresslist_pi1[category]">
          <option value="-">Alle Bereiche</option>
          <option value="1">Institut</option>
          <option value="2">Veranstaltungen</option>
          <option value="3">Kompetenzfelder</option>
        </select>
        <input type="text" name="tx_sytaddresslist_pi1[sword]" value="Suchbegriff" />
        <input type="submit" name="tx_sytaddresslist_pi1[submit_button]" value=" &nbsp;&nbsp;&nbsp;&nbsp;Suchen" class="SearchButton" />
      </form>
    </div>
  </div>
  <div id="BANNER">
    <div id="BANNERDEKO"><img src="../3_bilder/test-deko.jpg" alt="deko" width="440" height="190" /></div>
    <div id="HAUPTNAVIGATION">
      <ul>
        <li><a href="#">Institut</a></li>
        <li class="current"><a href="#">Kompetenzfelder</a></li>
        <li><a href="#">Projekte</a></li>
        <li><a href="#">Publikationen</a></li>
        <li><a href="#">Veranstaltungen</a></li>
        <li><a href="#">Materialien</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </div>
    <!--<div id="SUBNAVIGATION">
      <ul>
        <li><a href="#">Leistungsspektrum</a></li>
        <li class="current"><a href="#">Organisation</a></li>
        <li><a href="#">Mitarbeiter</a></li>
        <li><a href="#">Beirat</a></li>
        <li><a href="#">Partner</a></li>
        <li><a href="#">Qualitätsgrundsätze</a></li>
        <li><a href="#">Jobs</a></li>
      </ul>
    </div>-->
  </div>
  <!--<div id="ROOTZEILE">
    <div id="ROOTLINE">rootline</div>
    <div id="NEWSTICKER">newsticker</div>
  </div>-->
  <div id="CONTENT">
    <div id="REG-CONTENT">
      <h2>REG-CONTENT</h2>
      <p>Weit hinter den Wortbergen Weit hinten, ....</p>
    </div>
    <div id="EXT-1">
      <h2>EXT 1</h2>
      <p>Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen, ...</p>
    </div>
    <div id="RECHTE-SPALTE">
      <h2>RECHTE SPALTE</h2>
      <p>Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen...</p>
    </div>
    <div id="EXT-2">
      <h2>EXT 2</h2>
      <p>Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....Weit hinter den Wortbergen Weit hinten, hinter den Wortbergen....</p>
    </div>
  </div>
</div>
</body>
</html>

CSS:

Code:

html {
	padding:0;
	margin:0;
	height: 100%;
	max-height: 100%;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow: hidden;
	width: 100%;
	/* */
	}


body {
	font: 11px Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	scrollbar-base-color: #D9E7EF;
	height: 100%;
	overflow: hidden;
	max-height: 100%;
	width: 100%;
}

ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
li {
	margin: 0px;
	padding: 0px;
}
td {
	vertical-align: top;
}

hr {
	height: 1px;
	border-bottom: 1px solid #CCCCCC;
	border-top: none;
	border-right: none;
	border-left: none;
}
#CONTAINER {
	margin: 0 auto;
	width: 980px;
}

* #CONTAINER {
	margin: 0 auto;
	width: 980px;
	bottom: 0px;
	top: 0px;
	height: 100%;
	max-height: 100%;
	position: relative;
}

#HEADER {
	height: 140px;
	z-index: 5;
	position: absolute;
	top: 10px;
	width: 980px;
	
}

#LOGO {
	width: 95px;
	float: left;
	text-align: right;
	
}
#LOGO a img {
	border-style: none;
}


#HEADERNAVIGATION {
	width: 485px;
	float: left;
	
}
#HEADERNAVIGATION li {
	float: right;
}
#HEADERNAVIGATION a {
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	margin: 0 0 0 15px;
	padding: 0 15px 0 0;
	color: #00547A;
	background: url(../3_bilder/layout/linkpfeil.gif) no-repeat right;
}

#HEADERNAVIGATION a:hover {
	color: #D18D42;
	background: url(../3_bilder/layout/linkpfeil_over.gif) no-repeat right;
}

#HEADERNAVIGATION li.current a {
	color: #D18D42;
	background: url(../3_bilder/layout/linkpfeil_over.gif) no-repeat right;
}



#SUCHE {
	text-align: right;
	width: 400px;
	float: left;
	
}
#SUCHE label {
	font-size: 12px;
	color: #00547A;
	text-transform: uppercase;
}

#SUCHE select, #SUCHE input {
	font-size: 11px;
	color: #00547A;
	border: 1px solid #D9E7EF;
}
#SUCHE input {
	margin: 0 0 0 5px;
}

#SUCHE input.SearchButton {
	background: url(../3_bilder/layout/linkpfeil.gif) no-repeat;
	height: 12px;
	width: 12px;
	border: none;
}


#BANNER {
	height: 190px;
	background: #00547A;
	z-index: 6;
	position: absolute;
	top: 130px;
	width: 980px;
}

#BANNER a {
	color: #FFF;
	text-decoration: none;
}
#BANNER a:hover {
	color: #DCA86D;
}



#BANNERDEKO {
	float: left;
	width: 440px;
	height: 190px;
	padding-left: 95px;
	
}

#HAUPTNAVIGATION {
	text-transform: uppercase;
	font-size: 13px;
	width: 170px;
	float: left;
	height: 190px;
	
}
#HAUPTNAVIGATION ul {
	margin-top: 9px;
}

#HAUPTNAVIGATION li {
	padding-left: 5px;
	height: 25px;
}

#HAUPTNAVIGATION li.current {
	font-weight: bold;
	background: url(../3_bilder/layout/background_hauptnavigation_current.gif) repeat-x;
	padding-top: 2px;
}


#SUBNAVIGATION {
	width: 260px;
	height: 200px;
	top: -10px;
	position: relative;
	display: block;
	background: #006995 url(../3_bilder/layout/background_subnavigation.gif) bottom;
	float: left;
	
}
#SUBNAVIGATION li {
	padding: 5px 0 0 5px;

}
#SUBNAVIGATION li.current {
	font-weight: bold;
}


#ROOTZEILE {
	position: absolute;
	top: 330px;
	width: 980px;
	z-index: 7;
}

#ROOTLINE {
	
}

#NEWSTICKER {
	
}

#CONTENT {
	overflow: auto;
	position: absolute;
	top: 340px;
	z-index: 3;
	bottom: 0px;
	display: block;
	width: 980px;
}

* html #CONTENT {
	height:100%;
	width:980px;
	top: 0px;
	bottom: 0px;
	border-top: 340px solid #FFF;
	max-height: 100%;
	}

#REG-CONTENT {
	float: left;
	width: 440px;
	margin: 0 0 0 95px;
}


#EXT-1 {
	width: 440px;
	margin: 0 0 0 95px;
	float: left;
	clear: both;
}
#RECHTE-SPALTE {
	width: 250px;
	margin: 0 0 0 705px;
}
#EXT-2 {
	width: 250px;
	margin: 0 0 0 705px;
}

...vielleicht weiss von Euch jemand woran das liegt - ich komm grad nicht drauf...

Viele Grüße und danke

Michael

grischa_sgd · #2 (**permalink**) 11.12.2007, 18:32

Ähm, könntest du das online stellen? Wär besser, um das zu überprüfen - so ganz schlau werd ich aus der Beschreibung nicht.

letslounge · #3 (**permalink**) 11.12.2007, 18:48

...hier die URL:
xxx

Problem ist, dass unter IE der der Scrollbalken des #CONTENT aus dem Browserfenster rausläuft.

Grüße und danke

Michael

fricca · #4 (**permalink**) 11.12.2007, 18:53

Vermutlich sprichst du von IE 6.
100%-Höhe ist eben viel zu viel.
Was du da baust ist bei kleinem Viewport unbenutzbar. Lass doch den Browser ganz normal scrollen. Niemand mag sich mit diesen Mini-Scrollbereichen quälen.

letslounge · #5 (**permalink**) 11.12.2007, 19:01

Scrollbalken an der Stelle ist Kundenwunsch.
Noch Tips wie ich das Problem lösen könnte?

Problem bei IE6 festgestellt.

Grüße und danke

Michael

fricca · #6 (**permalink**) 11.12.2007, 19:40

Zitat:

Zitat von letslounge

Scrollbalken an der Stelle ist Kundenwunsch.

Dann mach dem Kunden klar, dass dadurch das Layout unbenutzbar ist. Du hast als Experte auch eine Beratungsaufgabe.

Zitat:

Noch Tips wie ich das Problem lösen könnte?

Schau dich bei Stu Nicholls um oder nutze JavaScript. Auch Suchfunktion "Pseudo-Frame-Layout".
Solche Dinge sind im IE < 7 nur mit extremen Verrenkungen lösbar. Man kann nur abraten, ganz besonders, wenn der Header derart viel Platz einnimmt.

overflow:hidden für html und body geht gar nicht.

letslounge · #7 (**permalink**) 11.12.2007, 19:56

Hallo,

...wie gesagt Kundenwunsch - bin auch kein Freund von dieser Lösung - konnte den Kunden aber nicht davon überzeugen hier eine IMO benutzerfreundliche Lösung anzuwenden. Mehr als über die Nachteile zu informieren geht nun mal nicht.

Bei Stu auf der Seite war ich - hab aber keine Lösung für das Problem gefunden.

Noch Ideen wie ich das Problem lösen könnte?
JS halte ich für keine Lösung.

Grüße und danke

Michael

fricca · #8 (**permalink**) 11.12.2007, 19:58

Zitat:

Zitat von letslounge

Bei Stu auf der Seite war ich - hab aber keine Lösung für das Problem gefunden.

Dann schau nochmal.
Das erste fixed-Layout. Schau in den Quelltext. Lies die erste Zeile dort.

letslounge · #9 (**permalink**) 11.12.2007, 20:07

...tststs, das hab ich übersehen.
Probier ich gleich - danke Dir!

Grüße

Michael

Crizzo · #10 (**permalink**) 11.12.2007, 21:11

Zitat:

Zitat von letslounge

Hallo,

...wie gesagt Kundenwunsch - bin auch kein Freund von dieser Lösung - konnte den Kunden aber nicht davon überzeugen hier eine IMO benutzerfreundliche Lösung anzuwenden. Mehr als über die Nachteile zu informieren geht nun mal nicht.

Zeig ihm, was passiert, wenn man das Fenster verkleinert.

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
"margin" für scrollbalken bei overflow:auto, overflow:scroll ?	Stadtmensch	CSS	0	29.05.2009 14:58
Scrollbalken verschwindet hinter fixem Footer	DieterWelzel	CSS	3	19.09.2007 21:44
rechte Div-Box verschwindet bei Browserresize	whooo	CSS	1	01.03.2006 14:46
Habe die Scrollbalken meines Inlineframes nicht im Griff :-(	Dullivan	Site- und Layoutcheck	6	13.12.2005 20:36
Fixed Leiste verdeckt Sprungziel	steele	CSS	4	26.10.2005 14:50