position:fixed - workaround für den IE

gaby · #1 (**permalink**) 22.03.2006, 11:32

Hi,

Ich möchte auch für den IE eine feste Positionierung links und oben haben, aber ich bekomme es nicht ganz hin.

Im quirks-mode rutscht im IE der Scrollbalken nach links
und im standard-mode sind im IE überhaupt keine Scrollbalken zu sehen, trotzdem ich im Selektor #Seite 'overflow: auto' habe.

Ich könnte jetzt zwar den verschobenen Scrollbalken im quirks-mode dadurch ausgleichen, indem ich dem Selektor #Seite ein negatives margin-right und dazu noch ein padding-right gebe, aber ich würde es doch lieber auch im standard-mode hinkriegen.

Nur habe ich leider im Moment echt ein Brett vorm Kopf.

Habt ihr einen Tip für mich?

Grüße
gaby

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>

<title>fixed</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
     	
<style type="text/css">

body {
    margin:0px;
    padding:0px;
	 background-color: #3c9;
    }
* html body,
* html {
    overflow:hidden;
    }	 


#top-navi {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:77px;
    margin:0px;
    border: 3px solid blue; 
    }
* html #top-navi {
    position:absolute;
	 width:96%;
    z-index:5; 	 
    }	 


#linke-spalte {
    position:fixed;
    top:100px;
    border: 3px solid green;
    }
* html #linke-spalte {
    position:absolute;
    z-index:10;
    }	 
	 

#Seite {
    margin-left: 111px;
    border: 3px solid red;
    }
* html #Seite {
    position:absolute;
    top:0px;
    left:111px;
    z-index:1;
    height:100%;
    overflow-y:auto;
    margin: 0px;
    }	 


#inhalt {
    margin-top:99px;
    background-color: lightyellow;
    }

</head>
<body>

<div id="top-navi">
  hier ist die top-navi  hier ist die top-navi  hier ist die top-navi
</div>



<div id="linke-spalte"><a href="#">
   [img]img/logo-x.gif[/img]</a>
</div>
	 
	 
<div id="Seite">


    <div id="inhalt">

        

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent malesuada est vel arcu. Fusce mi dui, semper a, tincidunt eget, venenatis vitae, lectus. Mauris bibendum consequat dui. Proin porttitor iaculis libero. Phasellus suscipit, arcu nec vulputate posuere, justo orci commodo lacus, in posuere pede odio vitae nibh. Suspendisse turpis. Sed fermentum, nibh sed imperdiet luctus, orci lacus posuere metus, eu tempus arcu odio quis metus. 

Curabitur quis tellus. Cras odio pede, mattis in, tempus condimentum, eleifend et, nisi. Donec tempor condimentum erat. Quisque lorem. Ut egestas varius turpis. Curabitur odio nisi, ultricies nec, pulvinar vehicula, semper nec, eros. Donec fermentum velit eget dui. Donec erat. Vestibulum placerat. Cras rhoncus, lorem ac nonummy accumsan, justo nunc venenatis tortor, vel nonummy quam massa non sem. Morbi commodo lobortis urna.</p>
  

Curabitur odio felis, vestibulum eget, posuere et, volutpat et, augue. Vestibulum purus diam, mattis in, consequat at, fringilla ultricies, elit. Proin ullamcorper turpis in mi. Nam elementum bibendum quam. Maecenas tempor. Nullam aliquam quam id massa. Pellentesque pellentesque cursus sapien. </p>
  

Nam ultricies ligula id diam. Sed tellus metus, varius in, tincidunt luctus, pretium id, neque. Aliquam erat volutpat. Etiam tempor, elit eu ultricies posuere, neque magna fermentum orci, ut iaculis ante nisl at mauris. Suspendisse purus arcu, sagittis id, tempus quis, pharetra at, nisi. Nam vehicula consectetuer magna. Nam a lectus eu nunc pellentesque rutrum. Quisque nec lacus. Aenean lectus. Pellentesque feugiat metus nec purus. Nunc mollis arcu ac lacus. Donec vel nunc ut metus ornare congue. Quisque condimentum dapibus quam. In hac habitasse platea dictumst.</p>
    </div>

  </div>
</body>
</html>

mazzo · #2 (**permalink**) 22.03.2006, 13:25

Der IE kennt keine position:fixed;.

Aber evtl. hilft Dir das weiter:
http://annevankesteren.nl/2004/07/fixed-positioning

gaby · #3 (**permalink**) 22.03.2006, 13:52

Zitat:

Der IE kennt keine position:fixed;.

Ich weiß.
deshalb schrieb ich ja auch
"position:fixed - workaround für den IE".

Zitat:

Aber evtl. hilft Dir das weiter:
http://annevankesteren.nl/2004/07/fixed-positioning

Eine interessante Variante.
Nur leider ist auch dort der IE im Quirks Modus durch die erste Zeile vor <html>.

Trotzdem danke, ich werde es mal als Notlösung im Auge behalten.

Hat sonst noch jemand eine Idee?

Grüße
gaby

Pim_Pils · #4 (**permalink**) 22.03.2006, 23:40

http://www.listen-project.de/sandkasten/fixed_ver_2.htm

vielleicht hilfts?

gaby · #5 (**permalink**) 23.03.2006, 09:05

Danke, ich werde es mal ausprobieren.

Grüße
gaby

Gustl · #6 (**permalink**) 23.03.2006, 12:36

Kai Laborenz beschreibt einen Workaround in seinem BuchCSS-Praxis vom Verlag Galileo Computing. Die Beschreibung geht über mehrere Seiten. Ich selber habe einaml eine Testseite damit gemacht, ging eigentlich ganz gut... so weit ich mich daran erinnern kann. Vielleicht gehst Du mal in eine Buchhandlung und liest das dort nach?

Der Workaround für IE6 hat mit position: absolute; und overflow: hidden; zu tun.

Der Workaround für IE5 im Prinzip auch, aber auf einer anderen Ebene.

Damit der Workaround für beide Versionen geht, muss entweder der IE6 im QuirksMode arbeiten (was Du wohl nicht willst) oder die Anweisungen im CSS als Conditional Comment verfast werden.

gaby · #7 (**permalink**) 24.03.2006, 09:08

Zitat:

Kai Laborenz beschreibt einen Workaround in seinem BuchCSS-Praxis vom Verlag Galileo Computing.
Die Beschreibung geht über mehrere Seiten. Vielleicht gehst Du mal in eine Buchhandlung und liest das dort nach?

Hmmm, ich bevorzuge eigentlich die Suche im Netz.
Das geht schneller als stundenlanges Stöbern in Büchern.
Wenn ich es aber dann doch in dem Buch gefunden hätte und es zu Hause nachbasteln würde, müßte ich ja bei eventuellen Fehlern wieder in die Buchhandlung rennen und nochmal nachlesen. *bg*

Zitat:

Der Workaround für IE6 hat mit position: absolute; und overflow: hidden; zu tun.

Ist das Prinzip des workarounds von Kai Laborenz so, wie in meinem obersten Posting?

Ich hatte vorher schon fast alles abgesucht:

Fabrice Pascale hat sein workaround ja aus dem Netz genommen.

Dann gibt's noch die Methode von Michael Jendryschik, die aber im IE nur mit JS und ebenfalls nur im Quirks modus funktioniert. Leider ruckelt das Ganze furchtbar beim Scrollen. *g*

Dann die Methode von Cassio Caio, die ich im ersten Posting benutzt habe.

Die Methode des "Sandkasten-Links" von Pim_Pils habe ich hier mal umgesetzt, so, wie ich es brauche.

-----------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
   
<style type="text/css">

* html {
    overflow-x:auto;
    overflow-y:hidden;
    }

body {
    background: #DDD;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: auto;
    font-family: Verdana,  Sans-Serif;
    font-size: 100.01%;
    }

#navi-oben {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    border: 1px solid #000000;
    background-color: #ADD8E6;
    padding: 8px;
    display: block;
    }

* html #navi-oben {
    position:absolute;
    width: 96.5%;		
		}

#linke-spalte {
    position: fixed;
    top: 100px;
    left: 0px;
    width: 120px;
    border: 1px solid #000000;
    background: #ADD8E6;
    padding: 8px;
    display: block;
    }

* html #linke-spalte {
    position: absolute;
    }

#inhalt {
    border: 1px solid #000000;
    background: #FFFFFF;
    margin-top: 100px;
    margin-left: 166px;
    padding: 10px;
    display: block;
    }

</style>

-----------------------

ab <body> geht es weiter, wie in meinem ersten Posting.

Diese Version überlappt zwar im IE den Scrollbalken etwas, ist aber für meine Zwecke noch am akzeptabelsten.

Vielen Dank nochmal allen für eure Tips und Links.

Grüße
gaby

Scipio · #8 (**permalink**) 24.03.2006, 09:40

Helfen dir ggf. diese Seiten?

http://jendryschik.de/wsdev/css/fixed/
http://www.fabrice-pascal.de/artikel/posfixedie6 (die von Kai Laborenz vorgestellte Lösung)

gaby · #9 (**permalink**) 24.03.2006, 10:03

Danke auch dir.

Dein erster Link ist der, von dem ich schrieb, daß die Seite beim Scrollen ruckelt. *g*

Ich habe es jetzt so gemacht:

Sandkasten-Link

Grüße
gaby

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
position:fixed klappt, zentrieren nicht	funkstrom	CSS	3	06.10.2016 07:32
Workaround für IE Direkt im CSS-Code???	therug	CSS	2	03.11.2008 08:32
position:fixed löscht background-color des Container	alivecc	CSS	9	25.10.2007 13:25
position:fixed IE Workaround	osterhas	CSS	2	03.03.2007 13:02
position:fixed im IE < 7 mit expressions	IChao	CSS	2	21.06.2006 08:54