Ik wil een div neerzetten met een vast formaat, deze div moet voorzien worden van scrollbars wanneer dit nodig is. In de meeste situaties gaat dit soepel met de overflow: auto; setting in combinatie met een vast formaat (bijv. 700px bij 500px). Wanneer er nu gebruik gemaakt wordt van een table met een breedte van 690 pixels en een hoogte van 600 pixels icm cellpadding="0" en cellspacing="0" ontstaat er in Internet Explorer ook een horizontale scrollbar terwijl dit in Fireox, Safari en Opera niet gebeurt.
Wanneer er overal gebruik gemaakt wordt van een vast formaat, ipv 100% (dus bijv. alle maximum breedtes in pixels vastleggen) zorgt ervoor dat internet explorer geen horizontale scrollbar laat onstaan. Dit is echter niet wat ik graag wil gebruiken, weet iemand van jullie een betrouwbare manier om maar 1 maal de breedte van de content div vast te leggen en alle onderliggende elementen gewoon een breedte van 100% mee te kunnen geven?
gewenste situatie maar met horizontale scrollbar
potentiële oplossing (probleem is dat de tabel zich niet uitvult naar de 200px breedte, dit valt te omzeilen door bijvoorbeeld het gebruik van van vast gedefinieerde breedtes op de td's)
ongewenste situatie zonder horizontale scrollbar
Wanneer er overal gebruik gemaakt wordt van een vast formaat, ipv 100% (dus bijv. alle maximum breedtes in pixels vastleggen) zorgt ervoor dat internet explorer geen horizontale scrollbar laat onstaan. Dit is echter niet wat ik graag wil gebruiken, weet iemand van jullie een betrouwbare manier om maar 1 maal de breedte van de content div vast te leggen en alle onderliggende elementen gewoon een breedte van 100% mee te kunnen geven?
gewenste situatie maar met horizontale scrollbar
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang=nl>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test | overflow</title>
<style type="text/css">
html
{
height: 100%;
overflow: hidden;
width : 100%;
}
body
{
background-color: magenta;
height: auto;
margin:0;
width : auto;
}
body div
{
background-color: navy;
height: 200px;
margin: 6px;
overflow: auto;
width: 200px;
}
body div table
{
height: 400px;
width : 100%;
}
body div table td
{
vertical-align: top;
}
</style>
</head>
<body>
<div>
<table cellpadding=0 cellspacing=0>
<tr><td>Dit is een overflow test!</td></tr>
</table>
</div>
</body>
</html> |
potentiële oplossing (probleem is dat de tabel zich niet uitvult naar de 200px breedte, dit valt te omzeilen door bijvoorbeeld het gebruik van van vast gedefinieerde breedtes op de td's)
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang=nl>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test | overflow</title>
<style type="text/css">
html
{
height: 100%;
overflow: hidden;
width : 100%;
}
body
{
background-color: magenta;
height: auto;
margin: 0;
width : auto;
}
body div
{
background-color: navy;
height: 200px;
margin: 6px;
overflow: auto;
width: 200px;
}
body div table
{
background-color: yellow;
height: 400px;
margin: 0;
width : auto;
}
body div table td
{
vertical-align: top;
}
</style>
</head>
<body>
<div>
<table cellpadding=0 cellspacing=0>
<tr><td>Dit is een overflow test;</td></tr>
</table>
</div>
</body>
</html> |
ongewenste situatie zonder horizontale scrollbar
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang=nl>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test | overflow</title>
<style type="text/css">
html
{
height: 100%;
overflow: hidden;
width : 100%;
}
body
{
background-color: magenta;
height: auto;
margin: 0;
width : auto;
}
body div
{
background-color: navy;
height: 200px;
margin: 6px;
overflow: auto;
width: 200px;
}
body div table
{
background-color: yellow;
height: 400px;
width : 100%;
}
body div table td
{
vertical-align: top;
}
</style>
</head>
<body>
<div>
<table cellpadding=0 cellspacing=0>
<tr><td>Dit is een overflow test;</td></tr>
</table>
</div>
</body>
</html> |
[ Voor 10% gewijzigd door 0528973 op 20-02-2006 09:06 ]
Pascal
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
/u/7685/ruinmytune-60x60.png?f=community)