Enkele dagen geleden heb ik mijn site helemaal opnieuw in elkaar gezet. Eerst maakte ik gebruik van frames, nu bestaat alles uit divs, jeuh 
.
De site is als volgt opgebouwd:
<div_top: vaste hoogte, vaste breedte>
<div_header: vaste hoogte, vaste breedte>
<div_content: variabele hoogte, vaste breedte>
<div_footer: vaste hoogte, vaste breedte>
Ik ben echter tegen een probleem aangelopen dat alleen in IExplorer optreedt: de scrollbar (die ervoor moet zorgen dat tekst binnen de contentdiv scrollt) loopt door mijn footerdiv heen.
plaat-fout:
plaat-goed:
Nu is mijn vraag natuurlijk: weet iemand hier een oplossing voor?
Voor oplossingen heb ik hier rondgezocht op GoT en gegoogled. Ik heb gelezen over een bug in IExplorer maar kon niet opmaken of dat ook dit probleem betreft. Zelf denk ik dat ik iets moet aanpassen in de CSS maar niets heeft tot nu toe nog geholpen. Heb ook de contentdiv binnen een andere div geplaatst maar dat werkt niet (logisch, denk ik).
Ik er wel achter gekomen dat als ik de code voor W3C doctype enz. weghaal, het wel correct werkt. Heb toch liever een oplossing in CSS (als dat mogelijk is) want dan is de site crossbrowser compatible én voldoet hij aan de W3C-standaard.
Hier nog de (relevante) code van de pagina:
En de (relevante) CSS code:
P.S.: Let niet op de tekst in de contentdiv, dat is een stuk uit een column van Johan Derksen
.De site is als volgt opgebouwd:
<div_top: vaste hoogte, vaste breedte>
<div_header: vaste hoogte, vaste breedte>
<div_content: variabele hoogte, vaste breedte>
<div_footer: vaste hoogte, vaste breedte>
Ik ben echter tegen een probleem aangelopen dat alleen in IExplorer optreedt: de scrollbar (die ervoor moet zorgen dat tekst binnen de contentdiv scrollt) loopt door mijn footerdiv heen.
plaat-fout:
plaat-goed:
Nu is mijn vraag natuurlijk: weet iemand hier een oplossing voor?
Voor oplossingen heb ik hier rondgezocht op GoT en gegoogled. Ik heb gelezen over een bug in IExplorer maar kon niet opmaken of dat ook dit probleem betreft. Zelf denk ik dat ik iets moet aanpassen in de CSS maar niets heeft tot nu toe nog geholpen. Heb ook de contentdiv binnen een andere div geplaatst maar dat werkt niet (logisch, denk ik).
Ik er wel achter gekomen dat als ik de code voor W3C doctype enz. weghaal, het wel correct werkt. Heb toch liever een oplossing in CSS (als dat mogelijk is) want dan is de site crossbrowser compatible én voldoet hij aan de W3C-standaard.
Hier nog de (relevante) code van de pagina:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WK Manager 2006</title>
<link rel="shortcut icon" href="../pics/favicon.ico"/>
<link rel="stylesheet" href="css/WKM06.css"/>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div id="container">
<div id="top">[img]"../pics/logo.jpg"[/img]</div>
<div id="header">
code voor menu
</div>
<div id="content">
veel tekst
</div>
<div id="footer"></div>
</div>
</body>
</html> |
En de (relevante) CSS code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| html, body {
text-align: center;
height: 100%;
overflow: hidden;
padding: 0px;
margin: 0px;
background-color: #142433;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#container {
text-align: left;
height: 100%;
width: 763px;
padding-top: 169px;
padding-bottom: 22px;
margin-left: auto;
margin-right: auto;
}
#top {
position: absolute;
text-align: left;
height: 34px;
width: 100%;
top: 0px;
background-image: url(../../pics/bg.jpg);
background-repeat: no-repeat
}
#header {
position: absolute;
text-align: left;
height: 135px;
width: 763px;
top: 34px;
background-image: url(../../pics/header.jpg);
background-repeat: no-repeat
}
#content {
position: relative;
text-align: justify;
height: 100%;
padding: 10px 15px;
overflow: auto;
background-color: #16293a;
-moz-outline: none;
}
#footer {
position: absolute;
width: 763px;
height: 22px;
bottom: 0px;
background-color: #142433;
} |
P.S.: Let niet op de tekst in de contentdiv, dat is een stuk uit een column van Johan Derksen
/u/129382/crop5f6f24af0ae5d.png?f=community)
/u/14091/icon.png?f=community){kind=icon}
