[CSS + IE] Probleem element overflow - Softwareontwikkeling

dinsdag 16 januari 2007 12:46

Acties:

Topicstarter

Ik zit met een probleem voor een site voor school. De site is opgebouwd uit layers en in het midden zit een layer waarin alle tekst moet komen:

code:

div.tekst {
    position: absolute;
    top: 200px;
    left: 150px;
    right: 50px;
    bottom: 50px;
    overflow: auto;
    z-index: 10;
}

In firefox werkt overflow en bottom: 50px goed en krijg je een scrollbar als er teveel tekst in komt. In internet explorer plakt hij de tekst gewoon door en krijg je een scrollbar voor het hele venster.

In feite zijn het 2 problemen:
Overflow: auto werkt niet in IE
en bottom: 50px werkt niet in IE

URL: http://www.makkelijkengezond.nl/ipiwa

Afbeeldingslocatie: http://www.makkelijkengezond.nl/ipiwa/probleem.jpg

Afbeeldingslocatie: http://www.makkelijkengezond.nl/ipiwa/probleem.jpg

[ Voor 7% gewijzigd door Makkelijk op 16-01-2007 12:48 ]

Badieboediemxvahajwjjdkkskskskaa

dinsdag 16 januari 2007 15:10

Acties:

Verwijderd

Er zit niks anders op dan

code:

1	overflow: scroll

te gebruiken of een iframe waarin je tekst komt.

dinsdag 16 januari 2007 15:15

Acties:

Verwijderd

Jawel, je kan gebruik maken van javascript als fix voor IE6, doe ik ook.

Hier een voorbeeldje: http://82.161.98.118/new/index.html

[ Voor 29% gewijzigd door Verwijderd op 16-01-2007 15:17 ]

dinsdag 16 januari 2007 15:29

Acties:

Verwijderd

Verwijderd schreef op dinsdag 16 januari 2007 @ 15:15:
Jawel, je kan gebruik maken van javascript als fix voor IE6, doe ik ook.

Hier een voorbeeldje: http://82.161.98.118/new/index.html

In IE7 srollt ie niet goed....
En waar gebruik jij Javascript?

code:

<?xml version="1.0" encoding="UTF-8"?> 
<!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" xml:lang="en">
  <head>
    <title>Brams Website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]><link href="stylesheet-ie.css" rel="stylesheet" type="text/css" /><![endif]-->
  </head>
  <body>
  <div id="header">

    <h1>Brams Website</h1>
    </div>
    <div id="menu">
        <ul>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>

            <li>test4</li>
            <li>test5</li>
            <li>test6</li>
            <li>test7</li>
            <li>test8</li>
        </ul>

        <ul>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
            <li>test5</li>

            <li>test6</li>
            <li>test7</li>
            <li>test8</li>
        </ul>
    </div>
    <div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In aliquet nisl ut ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus auctor laoreet enim. Mauris mattis lacus ac erat. Suspendisse potenti. Vivamus consectetuer fringilla eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam blandit. Morbi suscipit eros eu quam. Nam fermentum magna sit amet ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sagittis risus sed urna. Sed vitae nunc sit amet leo sagittis aliquam. Aliquam lectus diam, tincidunt in, ornare eu, ultrices quis, diam. Suspendisse risus. 
</p>

<p>Pellentesque in eros. Nullam viverra. Mauris sit amet nisi mollis sem nonummy suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec urna sapien, consequat et, congue ut, dictum in, dolor. Sed nisi. In bibendum. Nulla facilisi. Cras malesuada. Nam eros. Nunc quam magna, suscipit vitae, malesuada in, imperdiet non, ligula. Nulla sed nisl nec pede aliquam imperdiet. 
</p>
<p>Proin pretium nunc sit amet tortor. Quisque elementum. Pellentesque quis neque. Donec rhoncus imperdiet metus. Phasellus lacinia dictum felis. Suspendisse congue mauris in nibh. Etiam at libero. Vestibulum gravida viverra libero. Suspendisse quam. Integer a ante. Morbi auctor adipiscing arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dui. Aliquam euismod mi imperdiet dui. Maecenas non quam ac dolor consectetuer cursus. 
</p>
<p>Curabitur commodo ipsum pulvinar tortor. Praesent gravida posuere magna. Curabitur adipiscing lectus a nisi. Nulla blandit egestas libero. In dolor lacus, pellentesque ultrices, aliquet nec, sollicitudin eget, nulla. Maecenas pellentesque tortor nec elit adipiscing faucibus. Nam sagittis dapibus urna. Nunc dapibus, mi ac tempus placerat, ligula orci ultrices arcu, a commodo dolor orci vitae odio. Nunc a justo quis ante lacinia consequat. Quisque eget est. Nulla scelerisque velit et mauris. Integer congue. 
</p>
<p>Morbi at eros in massa congue ultrices. Donec non arcu non quam hendrerit feugiat. Nullam vel justo elementum justo condimentum aliquet. Proin justo nunc, sagittis faucibus, dictum at, gravida quis, tortor. Phasellus massa tellus, fermentum et, placerat ut, imperdiet ut, dui. Morbi ut lectus. Quisque purus. Mauris diam. Vestibulum adipiscing ipsum sollicitudin magna. Nam gravida, lectus nec porttitor cursus, ipsum magna mattis augue, at ultrices risus neque nec magna. Quisque dignissim. Nam facilisis sollicitudin ipsum. Sed volutpat hendrerit elit. Nunc a eros eget mi sagittis placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent orci nibh, facilisis vitae, fringilla eu, luctus vitae, purus. Pellentesque nec neque. Morbi viverra interdum tortor. Curabitur dui. 
</p>
  </div>
    <div id="border">
    </div>
    <div id="footer">
    <a href="http://validator.w3.org/check?uri=referer"><img src="xhtml10.png" alt="XHTML1.0 Valid" /></a>

    <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fbsweere.info%2Fnew%2Fstylesheet.css"><img src="css.png" alt="CSS Valid" /></a>
    <a href="http://www.php.net/"><img src="php.png" alt="PHP Powered" /></a>
    <a href="http://www.mysql.com/"><img src="mysql.png" alt="MySQL Powered" /></a>
    <a href="http://www.microsoft.com/netherlands/windowsserver2003/default.aspx"><img src="win2k3.png" alt="Windows 2003 Server Operated" /></a>
    </div>
  </body>
</html>

[ Voor 89% gewijzigd door Verwijderd op 16-01-2007 15:35 ]

dinsdag 16 januari 2007 15:47

Acties:

Verwijderd

Met javascript hacks zou ik tegenwoordig niet meer werken. Mensen moeten haar browsers gewoon bijwerken.

[ Voor 101% gewijzigd door Verwijderd op 25-08-2016 20:17 ]

dinsdag 16 januari 2007 17:02

Acties:

crisp

Devver

Pixelated

IE6 ondersteund geen combinatie top: en bottom: voor absolute positioned content, IE7 wel
persoonlijk zou ik hier echter geen absolute positioning voor gebruiken

[ Voor 6% gewijzigd door crisp op 16-01-2007 17:02 ]

Intentionally left blank

dinsdag 16 januari 2007 19:48

Acties:

Verwijderd

Verwijderd schreef op dinsdag 16 januari 2007 @ 15:47:
Bij mijn IE7 scrollt het perfect.
Zou je eens een screenshot kunnen maken van wat er mis gaat met het scrollen bij jou?

Hier staat mijn javascript:
code:
1

Dat is geen javascript maar een conditional statement van css...
Wat jij gebruikt is een css hack

[ Voor 3% gewijzigd door Verwijderd op 16-01-2007 19:51 ]

dinsdag 16 januari 2007 19:51

Acties:

HielkeJ

Verwijderd schreef op dinsdag 16 januari 2007 @ 19:48:
[...]

Dat is geen javascript maar een conditional statement van css...

Heb je ook al in dat bestand gekeken?

dinsdag 16 januari 2007 20:03

Acties:

Woudloper

« - _ - »

Verwijderd schreef op dinsdag 16 januari 2007 @ 19:48:
Wat jij gebruikt is een css hack

Is overigens geen hack, maar gewoon conditional comment

dinsdag 16 januari 2007 20:27

Acties:

Verwijderd

Ik bedoel gewoon het bestand an sich, niet de statement; omdat daar blijkbaar zo maar overheengelezen was.

dinsdag 16 januari 2007 20:31

Acties:

Verwijderd

Woudloper schreef op dinsdag 16 januari 2007 @ 20:03:
[...]

Is overigens geen hack, maar gewoon conditional comment

Jij hebt me misbegrepen, het gaat over de content die in de css staat niet over die conditional STATEMENT. En een conditional statement wordt algemeen beschouwd als een css hack...

edit: Ik zie hier trouwens de topicstarter nergens reageren

[ Voor 7% gewijzigd door Verwijderd op 16-01-2007 20:33 ]

woensdag 17 januari 2007 09:52

Acties:

Verwijderd

Verwijderd schreef op dinsdag 16 januari 2007 @ 20:31:
[...]

Jij hebt me misbegrepen, het gaat over de content die in de css staat niet over die conditional STATEMENT. En een conditional statement wordt algemeen beschouwd als een css hack...

edit: Ik zie hier trouwens de topicstarter nergens reageren

Dat is geen hack maar functionaliteit (IMO).

Afbeeldingslocatie: http://thumb1.pornhost.com/6/5/6565941310/001_custom_tb.jpg

Afbeeldingslocatie: http://thumb1.pornhost.com/6/5/6565941310/002_custom_tb.jpg

[ Voor 19% gewijzigd door Verwijderd op 23-03-2007 15:45 ]