[CSS]Scrollbar en footer div probleem - Softwareontwikkeling

zaterdag 16 juni 2007 13:17

Acties:

Feyenoord

Topicstarter

Ik heb een probleem met scrollbar en een footer div.

Ik heb een div die de viewport beslaat (zou moeten iig) hierin een div "screen" welke de main container is. Hierin zijn een "header", "menu", "spacer", "pods" een gewone div voor de main content en een "footer" div gedefinieerd.

Ik heb in 1e instantie een probleem met de scrollbar. In FireFox en Opera wordt netjes de "browser scrollbar" gebruikt, IE (7) doet echter een scrollbar plaatsen naar de "screen" div (en dus een scrollbar midden in het scherm). Iemand een idee of IE(7) CSS workaround?

2e probleem heb ik met de footer. In FireFox wordt deze netjes getoond en is de positie fixed (scrolled niet). In Opera is de positie wel goed maar scrolled de footer mee. In IE(7) is ie netjes fixed maar de positie way off.

Live voorbeeld: http://roeligan.kingsaregood.com

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index,follow" />
    <meta name="description" content="Poker, Kings are good" />
    <meta name="keywords" content="no limit, poker, texas hold'em" />
    <meta name="author" content="R.E. 'Roeligan' van der Hoeven" />
    <link rel="stylesheet" href="common/style.css" type="text/css" />
    
        <base href="http://127.0.0.1:8500/dev/roeligan.kingsaregood/" />
    
</head>

<body>
    
    <div>
        
        <div class="screen">
            
            <div class="header" onclick="document.location.href='index.cfm?fusaction=/roeligan.frontpage';"></div>
            
            <div class="menu" id="menu">
                <ul>
                    <li>Home</li>
                    <li>Archives</li>
                </ul>
            </div>
            
            <div class="height10"></div>
            
            <div class="pods">pods</div>
            
            <div>

        

<div class="entryContainer">
    <div class="entryHeader">
        <br /><a href="index.cfm?fusaction=blog.readEntry&amp;entry=entryID">entryTitle</a>
        <br />
        <img src="img/interface/calendar.png" alt="Posted @" title="Posted @" /> Saturday,  16 June, 2007 | <img src="img/interface/category.png" alt="Catergory" title="Category" /> Category: cats
    </div>
    <div class="entryBody">
        Body
    </div>
    <div class="entryFooter">
        <img src="img/interface/comments.png" alt="Comments" title="Comments" /> [x] Comments | <img src="img/interface/print.png" alt="Print this entry" title="Print this entry" /> Print | <img src="img/interface/views.png" alt="Viewed [x] times" title="Viewed [x] times" /> [x] views
    </div>
</div>

(repeats van bovenstaande div hier, vanwege lange code verwijderd.)
    
</div>
            
            <div class="footer"></div>
        </div>
    </div>
</body>

</html>

Cascading Stylesheet:

body, html {
        background-color: #CCCCCC;
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
        font-family: Verdana;
        font-size: 8pt;
        background-image: url(../img/interface/background.jpg);}
        
a:link, a:visited, a:active {
        color: #000000;
        text-decoration: none;}

a:hover {
        font-weight: bold;}

input, select, textarea {
        font-size: 8pt;
        font-family: Verdana;
        background-color: #BBBBBB;
        border-style: solid;
        border-width: 1px;
        border-color: #000000;}

.screen {
        overflow: auto;
        background-color: #FFFFFF;
        text-align: center;
        height: 100%;
        width: 990px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 31px;
        border-width: 1px;
        border-left-style: solid;
        border-right-style: solid;
        border-color: #cfdcff;
        font-size: 8pt;
        background: #FFFFFF url(../img/interface/screen_background.jpg) 720px 0px repeat-y;}

.header {
        height: 100px;
        background-color: #BBBBBB;
        background-repeat: no-repeat;
        /*background-image: url(../img/logo.png);*/
        cursor: pointer;}

.menu {
        background-color: #e8eeff;
        height: 30px;
        border-width: 1px;
        border-color: #afc7fb;
        border-top-style: solid;
        border-bottom-style: solid;
        font-size: 8pt;}

#menu ul {
        margin: 0px;
        padding: 0px;}

#menu li {
        float:  left;
        width: 100px;
        margin: 0px;
        padding: 10px;
        list-style-type: none;
        white-space: nowrap;}

.pods {
        float: right;
        width: 240px;
        border-style: solid;
        border-width: 1px;
        border-color: #afc7fb;
        font-size: 8pt;
        margin-right: 10px;}
        
.entryContainer {
        float: left;
        width: 690px;
        border-style: solid;
        border-width: 1px;
        border-color: #afc7fb;
        font-size: 8pt;
        margin-left: 10px;
        margin-bottom: 20px;}

.entryHeader {
        height: 60px;
        background-color: #e8eeff;
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
        color: #6699ff;}

.entryBody, .entryFooter {
        text-align: left;
        padding: 10px;}

.entryFooter {
        border-width: 1px;
        border-color: #afc7fb;
        border-top-style: dashed;
        font-size: 8pt;
        padding-left: 10px;}

.footer {
        position: absolute;
        bottom: 0;
        width: 990px;
        height: 30px;
        background-color: #e8eeff;
        font-size: 8pt;
        color: #000000;
        margin: 0 auto;
        margin-top: -31px;
        border-width: 1px;
        border-color: #afc7fb;
        border-top-style: solid;}

.height5 {
        height: 5px;}

.height10 {
        height: 10px;}

.height25 {
        height: 25px;}

.spacer10 {
        width: 10px;}
        
.pointer {
        cursor: pointer;}
        
.help {
        cursor: help;}

[ Voor 20% gewijzigd door Roeligan op 17-06-2007 10:15 . Reden: code ingekort ivm leesbaarheid ]

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814

zondag 17 juni 2007 01:52

Acties:

Kiphaas7

Persoonlijk vind ik dit nog teveel code om door te spitten; probeer het probleem eens te isoleren in plaats van je hele website code te kopieren, zodat er minder code overblijft.

En je live link werkt of niet, of is heel traag.

[ Voor 7% gewijzigd door Kiphaas7 op 17-06-2007 01:53 ]

zondag 17 juni 2007 10:13

Acties:

Roeligan

Feyenoord

Topicstarter

Damn apache heeft weer problemen... zo ff herstarten maar. zal ff de html wat inkorten.

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814

maandag 18 juni 2007 11:34

Acties:

Roeligan

Feyenoord

Topicstarter

*bump*

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814

maandag 18 juni 2007 12:36

Acties:

Verwijderd

Postition: fixed is dat hij op één plek in je viewport blijft hangen, deze property word alleen (goed) ondersteunt in FF, jij zoekt waarschijnlijk position: absolute. verder vind ik persoonlijk vind ik het beste om footers gewoon te floaten.

PS. hij beweegt wel deglijk mee in FF.

maandag 18 juni 2007 13:50

Acties:

Roeligan

Feyenoord

Topicstarter

In FF beweegt ie wel mee, maar positioneert zich weer onderaan. zoals je kunt zien in de CSS heeft de footer ook position: absolute ;

Ik zal eens gaan zoeken naar het float attribuut (ben echt al een lange tijd uit html/css... valt wel tegen als je weer begint

)

A real man fears not mortality for it's death, he fears mortality for it's lack of life!
RatPack #814