Deux div sur la même ligne & Firefox

**Heziva** · 20/10/2009, 18h18

Bonjour,

Je suis développeur, et je n'ai pas la main sur le code HTML qui m'est fourni. Ce code n'est compatible que IE, et je dois pourtant être compatible sur tous les navigateurs (firefox, ie 6-7-8 et safari. Pas plus).

L'idée est d'avoir une fenêtre avec un coin arrondit. Pour cela, deux div me sont fournie. Une aura un bg-image répété, avec un width à 100% et un float:left. L'autre a un bg-image avec l'arrondi, et un float:right.
Sous Firefox, vu que la deuxième div est vide, elle ne s'affiche pas. Y a t'il une solution SANS CHANGER LE HTML ?

Merci d'avance,
Jonathan

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
 
<div class="module">
    <div class="module_header">
        <div class="module_header_start">
            <div class="module_menu_title">
	            Titre Module
            </div>
        </div>
        <div class="module_header_end">
        </div>
    </div>
    <div class="module_content">
		<p>"Lorem Ipsum is simply dummy text. Test"</p>
    </div>
</div>

Et le CSS correspondant actuel :

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
70
71
72
73
74
75
76
77
78
79
 
.module_top_half {
	text-align: left;
}
.module_bottom_half {
	text-align: left; /*fixed*/
	margin-bottom: 10px; /*defines outside space at bottom of the modules*/
	margin-top: /*optional*/
	margin-left: /*optional*/
	margin-right: /*optional*/
}
.module_header {
	width: 100%; /*fixed*/
}
.module_header_highlighted {
	width: 100%; /*fixed*/
}
.module_header_start {
	height: 40 px; /*fixed*/
	width: 100%; /*fixed*/
	margin-right: -20 px; /*fixed*/
	float: left; /*fixed*/
	background-image: url('images/flux_ing_bg_orange.gif');
	background-repeat: repeat-x; /*fixed*/
}
.module_header_highlighted_start {
	height: 40 px; /*fixed*/
	width: 100%; /*fixed*/
	margin-right: -20 px; /*fixed*/
	float: left; /*fixed*/
	background-image: url('images/flux_ing_bg_bleu.gif');
	background-repeat: repeat-x; /*fixed*/
}
.module_header_end {
	height: 40 px; /*fixed*/
	width: 20 px; /*fixed*/
	float: right; /*fixed*/
	background-image: url('images/flux_ing_bg_orange_end.gif');
}
.module_header_highlighted_end {
	height: 40 px; /*fixed*/
	width: 20 px; /*fixed*/
	float: right; /*fixed*/
	background-image: url('images/flux_ing_bg_bleu_end.gif');/*pic/module_header_end_blue.gif*/; /*fixed*/
}
.module_menu_title {
	color: #FFFFFF; /*color of the module title text*/
	text-align: left;
	 font-weight: bold; /*optional*/
	margin-left: 12px; /*space between left of title bar and title*/
	margin-top: 6px; /*space between top of title bar and title*/
}
.module_content {
	clear: left; /*fixed*/
	overflow: hidden; /*fixed*/
	text-align: left/center/right; /*aligns the context text left, center or right*/
	padding-bottom: 6px; /*defines inside space between content and border*/
	border-left: 1 px solid #EEEEEE; /*gray border on the left*/
	border-bottom: 1 px solid #EEEEEE; /*gray border in the bottom*/
	border-right: 1 px solid #EEEEEE; /*gray border on the right*/
}
.module_content_top_half {
	clear: left; /*fixed*/
	overflow: hidden; /*fixed*/
	text-align: left/center/right;
	border-left: 1px solid #EEEEEE; /*gray border on the left*/
	border-right: 1px solid #EEEEEE; /*gray border on the right*/
}
.module_content_bottom_half {
	margin-top: -5px; 
	_margin-top: 0px; /*underscore hack because IE misinterprets the margin*/
	clear: left; /*fixed*/
	overflow: hidden; /*fixed*/
	text-align:left/center/right;
	border-left: 1px solid #EEEEEE; /*gray border on the left*/
	border-bottom: 1px solid #EEEEEE; /*gray border on the bottom*/
	border-right: 1px solid #EEEEEE; /*gray border on the right*/
	padding-bottom: 6px; /*fixed*/
}