XHTMLforum - IE6 position:fixed Hack - Scrollbar wird abgeschnitten

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - IE6 position:fixed Hack - Scrollbar wird abgeschnitten (http://xhtmlforum.de/showthread.php?t=42024)

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

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>