zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE6 position:fixed Hack - Scrollbar wird abgeschnitten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.09.2006, 13:31
pmw pmw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.08.2006
Beiträge: 3
pmw befindet sich auf einem aufstrebenden Ast
Frage IE6 position:fixed Hack - Scrollbar wird abgeschnitten

Hallo!

Ich versuche auf meiner Webseite, am Rand oben, eine feste Navigationsleiste zu installieren. Diese soll immer mit scrollen. Dies funktioniert soweit auch mit Firefox 1.5 und IE 6. Allerdings schneidet der Internet Explorer immer ein Teil der Scrollbar ab, was nicht nur unschön aussieht, sondern auch noch beim Scrollen nervt. Was mache ich falsch? Bzw. wie kann ich den Internet Explorer überlisten, die komplette Scrollbar anzuzeigen.

Das XHTML-Dokument:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>

	<title>Überschrift</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!—-[if lt IE 7]><link rel="stylesheet" type="text/css" href="iehacks.css" /><![endif]—->
	
</head>

<body>

	<div class="links">
	
		<p>Meine Navigationsleiste</p>
	
	</div>
	
	<div class="content"> 

		<h1>Überschrift</h1>
		
		<p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p>
		
	</div>

</body>

</html>
style.css:
Code:
/* Allgemeine Formatierungen */

html {

	color:            #000000; /* schwarz */
	background-color: #FFFFFF; /* weiß */
	font-size:        16px;
	font-family:      Arial, Verdana, sans-serif;
	
	height: 100%;
	width: 100%;
	
	padding: 0px;
	margin:  0px;

}

body {

	height: 100%;
   
  padding: 8px;
	margin:  0px;

}

/* Navigationsleiste */

.links {

	background-color: #33FF33; /* grün */
	
	position: fixed;
	
	top:    0px;
	left:   0px;
	width: 100%;
	
	padding: 0px;
	margin:  0px;

}

.links p {

	padding: 0px;
	margin:  0px;

}
iehacks.css:
Code:
/* Navigationsleiste */

* html {

  overflow-y: hidden; 

}

* html body {

	margin:  0px;
	padding: 0px;

}

* html .links {
	
	position: static;
	z-index: 1;
	
}

* html .content {

	overflow: auto;
	
	width:  100%;
	height: 100%;
	
}
Viele Grüße
pmw

Geändert von pmw (21.09.2006 um 13:33 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.09.2006, 14:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Du kannst einiges abkürzen, stell global margin und padding auf Null, dann musst Du es nicht für jedes weitere Element definieren.

Farben, Schriften usw. im Body festlegen, nicht html. Das erhält nur die Höhe.

100%-Breite bei Blockelementen anzugeben ist nicht nötig (es sei denn man hat es vorher anders gemacht und muss diesen Wert zurücksetzen), die nehmen standardmäßig die volle Breite ein.

Ungünstig sind px-Angaben für Abstände und Schriften, besser em oder %. Das lässt sich skalieren und die Maße passen sich bei benutzerseitig veränderten Schriftgrößen an.

Um im IE keine Querscrollleiste zu erhalten, hab ich für .links padding:8px umgestellt, so dass nur noch padding-top und -bottom gemeint sind. Sonst ist .links 100% Breit plus je 8px nach rechts und links, also mehr als auf eine Fensterbreite passen kann.

Das hier ist grob überarbeitet und zeigt keine abgeschnittene grüne Leiste mehr:
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" lang="de" xml:lang="de">
<head>
	<title>Test</title>
	<style type="text/css" media="screen,projection">
		/* Allgemeine Formatierungen */
		
		* {	margin: 0; padding: 0;}
		
		html, body {
			height: 100%;
		}
		
		body {
			color:            #000000; /* schwarz */
			background-color: #FFFFFF; /* weiß */
			font-size:        16px;
			font-family:      Arial, Verdana, sans-serif;
		}
		
		/* Navigationsleiste */
		
		.links {
			background-color: #33FF33; /* grün */
			position: fixed;
			top:    0px;
			left:   0px;
			width: 100%;
			padding: 8px;
		}
		
		/* Content */	
		.content h1 {
			margin-top: 1em;
		}
		
		/* IE Hacks - Navigationsleiste */

		* html {
		  overflow-y: hidden; 
		}
		
		* html .links {
			position: static;
			z-index: 1;
		}
		
		* html .content {
			overflow: auto;
			height: 100%;
		}
	</style>
</head>

<body>

	<div class="links">
	
		<p>Meine Navigationsleiste</p>
	
	</div>
	
	<div class="content"> 

		<h1>Überschrift</h1>
		
		<p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p>
		
	</div>

</body>

</html>
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
Conten-Bereich wird abgeschnitten (IE6) reeky CSS 3 16.08.2010 15:58
CSS Hack + IE6 + Div + Elternelement BooKer CSS 7 12.01.2009 21:03
IE6 vs. FF, IE7 - Abstände in min-width hack, 3 faux col design Krischu CSS 2 20.05.2007 11:03
Div mit Hack für IE5 und IE6 Jawad CSS 7 19.07.2005 11:39
position:fixed layout für ie6 ohne quirksmode? derdiedas CSS 6 28.04.2005 12:56


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:03 Uhr.