[CSS] scrolling div niet goed in IE - Softwareontwikkeling

maandag 5 april 2004 17:28

Acties:

Topicstarter

Opnieuw heb ik een CSS gerelateerd probleempje. Ik heb een layout gemaakt (zie http://www.pruijn.com/test/) die het prima doet in Opera en Mozilla, maar waarin IE een vreemd probleem heeft. De div waarin de content staat wordt zou 100% hoog moeten zijn (dat gaat goed) en gaan scrollen wanneer de content teveel is om in de hoogte weer te geven. Bij dat laatste gaat het in IE 5.5 en 6.0 (IE 5.0 weer niet) fout. De scroll balk verdwijnt onderin

, maar wat nog vreemder is, is dat zodra je het venster iets resized, de scroll balk wél goed positioneert

. Helaas is het niet echt acceptabel om de IE gebruiker te vragen iedere reload even zijn/haar browser te resizen

.

Ik heb al van alles geprobeerd met margins en paddings en heights, maar ik heb het gevoel dat ik iets (simpels) over het hoofd zie. Graag zou ik dan ook wat hulp willen hebben om de layout ook in IE goed te laten werken. Alvast bedankt voor de suggesties!

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="styles/test.css" rel="stylesheet" rev="1.0" title="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
  <div id="testtop">
    [img]"images/testtop_subpage.jpg"[/img]
  </div>
  <div id="content">
    <div id="content_inner">
      <p>Content</p>
    </div>
  </div>
  <div id="hormenu">
    <ul id="hormenu_left">
      <li><a href="index.html">Home</a></li>
    </ul>
    <ul id="hormenu_middle">
      <li><a href="index.html" id="nowon">test1</a></li>
      <li><a href="index.html">test2</a></li>
      <li><a href="index.html">test3</a></li>
      <li><a href="index.html">test4</a></li>
      <li><a href="index.html">test5</a></li>
      <li><a href="index.html">test6</a></li>
    </ul>
    <ul id="hormenu_right">
      <li><a href="disclaimer.html">Disclaimer</a></li>
    </ul>
  </div>
  <div id="left">
    <ul id="vermenu">
    </ul>
    <div id="login_intranet">
      <form action="login.php" method="post">
        &nbsp;&nbsp;username<input type="text" name="username" /><br />
        &nbsp;&nbsp;password<input type="password" name="password" /><br />
        <input type="submit" name="login" value="Login" style="width: 0px; height: 0px" />
      </form>
    </div>
  </div>
</div>
<div id="testtop_background_left"></div>
<div id="testtop_background_right"></div>
</body>
</html>

Cascading Stylesheet:

    html, body {
        height: 100%;
        min-width: 767px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        background: #003366;
        font-family: Verdana, Helvetica, Arial, sans-serif;
            font: 8pt Verdana;
            font-weight: normal;
            font-style: normal;
            line-height: 11pt;
            color: #000;
        scrollbar-arrow-color:#fff;
        scrollbar-base-color:#003366;
        scrollbar-face-color:#003366;
        scrollbar-shadow-color: #fff;
        scrollbar-highlight-color: #fff;
        scrollbar-3dlight-color: #003366;
        scrollbar-darkshadow-color: #003366;
        scrollbar-track-color: #003366
    }
    
    #container {
        height: 100%;
        min-height: 100%;
        padding-top: 112px;
        padding-bottom: 0px;
        -moz-box-sizing: border-box;
        position: relative;
        left: 50%;
        margin-left: -384px;
        width: 767px;
        z-index: 1
    }

    #content {
        position: relative;
        width: 620px;
        height: 100%;
        overflow: auto;
        background: #fff;
        z-index: 1;
        font: 8pt Verdana;
        margin: 0px 0px -112px 145px;
        padding: 0px 0px 90px 0px; /* padding-top padding-right padding-bottom padding-left */
            voice-family: "\"}\""; /* dit is de IE5 hack, IE5 negeert alles na dit statement */
            voice-family:inherit;
        padding: 0px 0px 0px 0px; /* padding-top padding-right padding-bottom padding-left */
    }
    
    #content_inner {
        width: 570px;
        max-width: 570px;
        padding: 27px 0px 15px 30px; /* padding-top padding-right padding-bottom padding-left */
    }

maandag 5 april 2004 18:00

Acties:

Verwijderd

_foutje

[ Voor 90% gewijzigd door Verwijderd op 05-04-2004 18:00 ]

maandag 5 april 2004 19:58

Acties:

Verwijderd

In Mozilla hetzelfde probleem (1.7b).

Misschien moet je overal even 'border-box' toevoegen (en de Mozilla variant)?

maandag 5 april 2004 20:26

Acties:

Ivar

Topicstarter

Verwijderd schreef op 05 april 2004 @ 19:58:
In Mozilla hetzelfde probleem (1.7b).

Misschien moet je overal even 'border-box' toevoegen (en de Mozilla variant)?

Dat is vreemd, hier geen problemen in Mozilla, ook niet met versie 1.7b. Zowel mét als zonder (-moz-)box-sizing. IE is naar mijn weten de enige browser die het probleem heeft, of heb ik het mis?

maandag 5 april 2004 20:31

Acties:

T-MOB

Hier ook geen probs in Mozilla 1.6 en/of Firefox 0.8. Misschien heeft je probleem te maken met de versiering van je scrollbar. (Die wordt immers ok niet weergegeven door Mozilla).

edit:
IE5.0 geeft de versiering ook niet weer. Vermoeden dat de fouten met de scrollbalkversiering te maken hebben verder verhoogd....

[ Voor 28% gewijzigd door T-MOB op 05-04-2004 20:34 ]

Regeren is vooruitschuiven

maandag 5 april 2004 20:36

Acties:

Verwijderd

Probleem is er ineens niet meer. *Baalt ervan dat hij geen screen shot heeft.

Over 5.0, die ondersteund geen kleurtjes.

dinsdag 6 april 2004 13:19

Acties:

Ivar

Topicstarter

Het gebruik van de 'versiering' van de scrollbar is volgens mij niet het probleem. Bovendien is dat alleen maar een IE >= 5.5 truukje, zou gewoon genegeerd moeten worden door andere browsers. Maar het scroll probleem in IE >= 5.5 blijft wel. Heb net kunnen testen in Opera 7.03 en daar blijkt dit probleem min of meer ook voor te komen. Lijkt erop dat het toch een CSS rendering probleem is. Kan iemand misschien een oplossing/workaround/hack/... geven? Misschien zoiets als een javascriptje dat de browser dwingt het venster te resizen (onmerkbaar) of beter te kijken naar het renderen?

dinsdag 6 april 2004 13:25

Acties:

Verwijderd

Wat gebeurt er als je die negatieve 'margin-bottom' eruit haalt?

(Zoals ik al zei, het heeft niks met kleurtjes te maken)

dinsdag 6 april 2004 13:59

Acties:

Ivar

Topicstarter

Verwijderd schreef op 06 april 2004 @ 13:25:
Wat gebeurt er als je die negatieve 'margin-bottom' eruit haalt?

Het weghalen van de negatieve bottom margin haalt helaas niet veel uit. Het werkt ook niet negatief, dus ik laat 'm wel op 0px staan, maar het probleem in IE blijft

dinsdag 6 april 2004 14:20

Acties:

T-MOB

hmmzz..
Het verplaatsen van de divs onder #content (in de code) naar erboven resulteert er bij mij in dat IE consequent de scrollbar laat verdwijnen (let niet op missende "/>" da's een grapje van Firefox. Da's dus een omgekeerde oplossing zegmaar. Maar waar het aan ligt??

[ Voor 8% gewijzigd door T-MOB op 06-04-2004 14:27 . Reden: url ]

Regeren is vooruitschuiven

dinsdag 6 april 2004 20:08

Acties:

Ivar

Topicstarter

Even zelf een vrij domme hack geprobeerd met mijn beperkte JS kennis:

JavaScript:

onload="
if (document.body.clientHeight >= (screen.availHeight-101)) {
  top.window.resizeTo(screen.availWidth, screen.availHeight-1)
} else { 
  top.window.resizeBy(0, 1)
}"

*kuch*ranzig*kuch*

. Iemand een ander/beter idee?

dinsdag 6 april 2004 21:04

Acties:

T-MOB

Die hack werkt helaas niet in fullscreen mode... Een beter alternatief zou ik zo ook niet weten, ik probeer dezelfde lay-out op iets andere wijze op te bouwen. Het probleem lijkt echter gewoon een IE-bug.
Dit is een screenshotje in IE6 voor resizen:
Afbeeldingslocatie: http://erik.kabel.utwente.nl/got/snap.png

Afbeeldingslocatie: http://erik.kabel.utwente.nl/got/snap.png

en gelijk erna:
Afbeeldingslocatie: http://erik.kabel.utwente.nl/got/snap2.png

Da's in een versimpelde versie van jouw lay-out, met overflow: hidden uit de body verwijderd....

Regeren is vooruitschuiven

dinsdag 6 april 2004 21:23

Acties:

T-MOB

En de oplossing:
Plaats een extra div om content_inner heen (zoals in dit voorbeeld)

Deze geen breedte geven maar wel height: 100% en overflow: auto; En het probleem is weg....

Regeren is vooruitschuiven

woensdag 7 april 2004 13:11

Acties:

Ivar

Topicstarter

T-MOB: dat werkt prima! Geen idee waarom, maar goed

. Overigens werkt het alleen goed in Opera als je de box-sizing van de container (zoals in jouw voorbeeld) eruit haalt. Hieronder nog even de code:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="styles/test.css" rel="stylesheet" rev="1.0" title="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
  <div id="testtop">
    [img]"images/testtop_subpage.jpg"[/img]
  </div>
  <div id="content">
    <div id="content_inner">
      <div id="content_real">
        <p>Content</p>
      </div>
    </div>
  </div>
  <div id="hormenu">
    <ul id="hormenu_left">
      <li><a href="index.html">Home</a></li>
    </ul>
    <ul id="hormenu_middle">
      <li><a href="index.html" id="nowon">test1</a></li>
      <li><a href="index.html">test2</a></li>
      <li><a href="index.html">test3</a></li>
      <li><a href="index.html">test4</a></li>
      <li><a href="index.html">test5</a></li>
      <li><a href="index.html">test6</a></li>
    </ul>
    <ul id="hormenu_right">
      <li><a href="disclaimer.html">Disclaimer</a></li>
    </ul>
  </div>
  <div id="left">
    <ul id="vermenu">
    </ul>
    <div id="login_intranet">
      <form action="login.php" method="post">
        &nbsp;&nbsp;username<input type="text" name="username" /><br />
        &nbsp;&nbsp;password<input type="password" name="password" /><br />
        <input type="submit" name="login" value="Login" style="width: 0px; height: 0px" />
      </form>
    </div>
  </div>
</div>
<div id="testtop_background_left"></div>
<div id="testtop_background_right"></div>
</body>
</html>

Cascading Stylesheet:

    html, body {
        height: 100%;
        min-width: 767px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        background: #003366;
        font-family: Verdana, Helvetica, Arial, sans-serif;
            font: 8pt Verdana;
            font-weight: normal;
            font-style: normal;
            line-height: 11pt;
            color: #000;
        scrollbar-arrow-color:#fff;
        scrollbar-base-color:#003366;
        scrollbar-face-color:#003366;
        scrollbar-shadow-color: #fff;
        scrollbar-highlight-color: #fff;
        scrollbar-3dlight-color: #003366;
        scrollbar-darkshadow-color: #003366;
        scrollbar-track-color: #003366
    }

    #container {
        height: 100%;
        min-height: 100%;
        padding-top: 112px;
        padding-bottom: 0px;
        -moz-box-sizing: border-box;
        position: relative;
        left: 50%;
        margin-left: -384px;
        width: 767px;
        z-index: 1
    }

    #content {
        position: relative;
        width: 620px;
        height: 100%;
        overflow: auto;
        background: #fff;
        z-index: 1;
        font: 8pt Verdana;
        margin: 0px -112px 0px 145px;
        padding: 0px 0px 90px 0px; /* padding-top padding-right padding-bottom padding-left */
            voice-family: "\"}\""; /* dit is de IE5 hack, IE5 negeert alles na dit statement */
            voice-family:inherit;
        padding: 0px 0px 0px 0px; /* padding-top padding-right padding-bottom padding-left */
    }
    
    #content_inner {
        width: 620px;
        height: 100%;
        overflow: auto;
    }

    #content_real {
        width: 560px;
        padding: 27px 30px 30px 30px; /* padding-top padding-right padding-bottom padding-left */
    }

Bedankt voor de hulp!

[ Voor 20% gewijzigd door Ivar op 07-04-2004 13:11 . Reden: type fout ]

Pagina: 1

Reageer