[CSS] problème de redimensionnement

Version imprimable

bonjour,

J'ai un problème avec IE 6. Je vous explique. lorsque je passe sur lien, j'ai un effet qui met le lien en gras. Et lorsque je passe sur le lien, IE me redimensionne mon div conteneur et me coupe le contenu.

Voici le code de ma page :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<html>
<head>
    <style>
    .txtjustify {
        text-align : justify;
    }
 
    .container {
        overflow : hidden;
        background:red;
        width : 438px;
    }
 
    .bodytext {
    	font-family: Verdana;
    	font-size: 11px;
    	color: #484848;
    }
 
    .spaceitem {
    	margin-top:15px;
    }
 
    .linkoff {
    	font-family: Verdana;
    	font-size: 11px;
    }
 
    .linkoff a {
    	text-decoration:underline;
    }
 
    .linkoff a:hover {
    	text-decoration:none;
    	font-weight:bold;   	
    }
 
    .containerbody {
        background:green;
    }
 
    .spanright {
	    float 		: right;
    }
 
    .spanright img {
    	margin-left : 5px;
    	border      : 1px solid black;
    	float       : left;
    	margin-bottom  : 15px;
    	clear		: both;
    }
 
    .newscontainer {
    	overflow:hidden;
    	width:438px;
        background:pink;
    	padding-bottom : 10px;
    }
 
    h2 {
        font-size:13px;
        margin:0px;
        padding:0px;
        display:inline;
    }
    </style>
</head>
<body>
    <div class="newscontainer">                  
        <div class="container bodytext spaceitem">
            <div class="spanright">
                <img src="image.jpg" alt="image" />
            </div>
 
            <div class="containerbody">
                <div>
                    <h2>Titre de la publication</h2>
                </div>
                <div class="txtjustify">
                    lorem ipsum dolor sin amet.
                </div>
                <p class="linkoff">
                    <a href="#">Wysiwyg</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>

Pour faire le test il vous faut une image nommée image.jpg au même endroit que votre page html. il faut aussi que l'image fasse une certaine hauteur (genre 200 pixels).

Merci d'avance pour votre aide.

14/02/2006, 13h40
ilood
Salut

Le problème se situe à cet endroit
Code:

1 2 3 4 5 6 7 8 .spanright { float : right; } .spanright img { ... clear : both; }
Tu définis un clear:both dans un bloque en float: left.
Alorsque le but du clear: both est d'anuler l'effet du float pour le reste du flux.
IE s'emmêle les pinceaux.

nb : c'est bien d'utiliser les div pour le positionnement mais je pense que tu en utilises beaucoup pour l'effet recherché.
Un exemple flagrant

Code:

<div><h2>Titre de la publication</h2></div>

Pas besoin d'utiliser de div dans ce cas. Tu peux styler le h2 directement dans le css, ce que tu as fait d'ailleurs.
14/02/2006, 13h50
cootchy

Le fait d'enlever le clear:both sur le .spanright img ne règle en rien le problème.

Ca fait presque une journée qu'on est dessus et on arriver pas à trouver la solution.

J'ai aussi enlever les div autour du h2 qui effectivement ne sert à rien...

je vous laisse les apercus d'écrans pour une meilleure compréhension.

affichage correct
http://edfx-websphere-malaysia-dev1....io.fr/good.jpg

affichage incorrect
http://edfx-websphere-malaysia-dev1.edifixio.fr/bad.jpg

Ce code devrait mieux fonctionner. Je n'ai mis que les parties modifiées (css et html)

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
<style type="text/css"> 
/*
 *  autres selcteurs...
 */
 
.spanright img { 
       margin-left : 5px; 
       border      : 1px solid black; 
       float       : left; 
       margin-bottom  : 15px; 
/* clear: both supprimé */
} 
 
h2 { 
        font-size:13px; 
        margin:0px; 
        padding:0px;
/* display: inline supprimé */
} 
 
hr.separe { clear: both; visibility: hidden; }
</style> 
</head> 
<body> 
    <div class="newscontainer">                  
        <div class="container bodytext spaceitem"> 
            <div class="spanright"><img src="dl_flower3.jpg" alt="image" width="100" height="100" /></div> 
 
            <div class="containerbody"> 
                <h2>Titre de la publication</h2><!-- suppression des div et du display: inline dans le css -->
                <div class="txtjustify">lorem ipsum dolor sin amet.</div> 
                <p class="linkoff"><a href="#">Wysiwyg</a></p> 
            </div>
 
			<!-- annuler l'effet flottant pour le reste du flux -->
			<hr class="separe" />
 
		</div> 
    </div>

14/02/2006, 17h42
cootchy

Ca marche nickel. Merci beaucoup.