Probleme IE7 : Elements dessous la scrollbar verticale

**Seb33300** · 07/05/2009, 14h13

Bonjour,

J'ai un problème sous IE7 (IE8 et FF marche sans souci).

J'ai un div en overflow:auto d'une largeur fixe avec à l'intérieur un table avec width:100%

lorsque le table est plus haut que le div, il y a une scrollbar qui apparait dans le div.

Lorsque la scrollbar apparait, la largeur du table se réajuste automatiquement sous IE8 et FF alors que sous IE7, l'affichage ne se réajuste pas mais passe sous la scroolbar.

Vous pouvez voir le résultat ici :
http://www.onlc.fr/exemple.html

Sous IE7 la bordure du tableau est dessous la scrollbar et sous IE8 / FF la bordure du tableau est collé à la scrollbar.

Existe t il un moyen pour que le comportement de IE7 soit le meme que IE8/FF ?

Merci

**danielhagnoul** · 08/05/2009, 19h18

Bonsoir.

Je ne vois plus le problème avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
62
63
64
65
66
67
68
69
 
<!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="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#conteneur p {
            margin:6px;
        }
        .maDiv {
            width:300px;
            height:200px;
            border:1px solid green;
            overflow:auto;
            overflow-x:hidden;
        }
        .monTab {
            height:300px;
            width:auto;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="conteneur">
        <div class="maDiv">
            <table class="monTab">
                <tbody>
                    <tr>
                        <td>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
                            </p>
                            <p>
                                Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

**Seb33300** · 22/05/2009, 11h13

Oui mais ça oblige à mettre un padding

Une autre solution qui fonctionne mais on perd la validité xhtml, c'est d'enlever le doctype.

**Macmillenium** · 22/05/2009, 11h57

Bonjour,

Envoyé par Seb33300

Une autre solution qui fonctionne mais on perd la validité xhtml, c'est d'enlever le doctype.

Les conséquences de cette manipulation sont plus graves que cela

L'absence d'un doctype correcte fait basculer les navigateurs graphiques en mode de rendu Quirks, tu risque d'avoir pas mal de soucis notamment sous IE et Opéra.

Pour ton problème il s'agit simplement d'un bug au niveau du moteur de rendu d'IE7-, le width:100%; fait que ton table occupe toute la largeur de son conteneur en ignorant sa scrollbar verticale, étant donné que (selon IE7-) cette scrollbar est à l'extérieur du table.

la solution consiste à englober ton table dans un 2éme bloc doté du layout (propriétés autres que width:100%)

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!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" lang="en" xml:lang="en">
	<head>
		<title>Bug IE7</title>	
	</head>
	<body>
		<div style="border: 1px solid green; overflow: auto; overflow-x: hidden; width: 300px; height: 200px;">
			<div style="height:100%;">
				<table border="1" height="300" width="100%">
					<tr><td >mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>	
					<tr><td>mon tableau</td></tr>
					<tr><td >mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>	
					<tr><td>mon tableau</td></tr>					 
					<tr><td>mon tableau</td></tr>	
					<tr><td>mon tableau</td></tr>
					<tr><td >mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>	
					<tr><td>mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>
					<tr><td >mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>	
					<tr><td>mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>
					<tr><td >mon tableau</td></tr>
					<tr><td>mon tableau</td></tr>	
					<tr><td>mon tableau</td></tr>
				</table>  
			</div>
		</div>
	</body>
</html>

Probleme IE7 : Elements dessous la scrollbar verticale

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager