Problème de CSS sur IE6

Version imprimable

11/06/2009, 15h33
rfily

Problème de CSS sur IE6

Bonjour!
J'ai un problème avec un site que je suis entrain de construire. Dans Firefox, Safari tout baigne mais dans ie c'est la cata. J'ai essayez de régler le style avec les hacks et ca c'est amélioré a part que des images ne sont pas apparu.
Quelqu'un a déjà eu ce problème et connait les remèdes.
Merci.
11/06/2009, 15h50
Candygirl

Bonjour,

Il faut que tu expliques précisément les problèmes rencontrés sur IE6, code (voir screen) à l'appui, pour pouvoir t'aider.
11/06/2009, 16h03
rfily

2 pièce(s) jointe(s)

OK!
Alors dans firefiox dans la bannèire il y a des images pj: im1.
Et dans ie6 tout disparait pj: im2.
Alors c'est regler pour les images mais pour les codes je vais voir.

Sinon est-ce-que quelqu'un connait comment mettre une image en premier plan et transparent sous ie 6 ?
11/06/2009, 16h33
HiRoN

Bonjour,

Les pièces jointes ne sont pas là et le code correspond non plus... (il sera donc dur de répondre) :?

Citation:

Envoyé par rfily

Sinon est-ce-que quelqu'un connait comment mettre une image en premier plan et transparent sous ie 6 ?

Pour la transparence, par exemple avec pngFix (voir Pngnq / Optipng pour optimiser)

Citation:

Envoyé par rfily

alors voici le code 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
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
<div id="header"><img src="images/header_01.png" alt="header" width="126" height="109" /><img src="images/header_02.png" alt="header" width="119" height="109" /><img src="images/header_03.png" alt="header" width="142" height="109" /><img src="images/header_04.png" alt="header" width="49" height="109" /><img src="images/header_05.png" alt="header" width="363" height="109" /></div>
<div id="version">
      <div id="asc"><a href="<?php echo tep_href_link('shopping_cart.php')?>"></a></div>
 
        <div id="opt_h">
          <?php
                                echo tep_draw_form('currencies', tep_href_link(basename($PHP_SELF), '', $request_type, false), 'get');
                                reset($currencies->currencies);
                            $currencies_array = array();
                            while (list($key, $value) = each($currencies->currencies)) {
                                        $currencies_array[] = array('id' => $key, 'text' => $value['title']);
                                }
                                $hidden_get_variables = '';
                                reset($HTTP_GET_VARS);
                                while (list($key, $value) = each($HTTP_GET_VARS)) {
                                    if ( ($key != 'currency') && ($key != tep_session_name()) && ($key != 'x') && ($key != 'y') ) {
                                      $hidden_get_variables .= tep_draw_hidden_field($key, $value);
                                    }
                }
               echo tep_draw_pull_down_menu('currency', $currencies_array, $currency, 'onChange="this.form.submit();" class="se1"') . $hidden_get_variables . tep_hide_session_id();
               echo '</form>';
                         ?>
        </div>
 
				<div id="id2"><?php
                                  if (tep_session_is_registered('customer_id')) {
                                         $req = mysql_query("select * from customers where customers_id='$customer_id'");
                                         $boucle = mysql_fetch_object($req);
                                         $nom = $boucle->customers_lastname;
                                         echo '<div style="position:absolute;top:60px;left:60px;color:#FFFFFF;font-weight:normal;font-size:10px;">Bonjour :'.$nom.'</div>';
                                 ?>
				 <a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class=""><?php echo '<div align="left" style="position:absolute;top:73px;left:46px; color:#FFFFFF;font-weight:normal;font-size:10px;">'.HEADER_TITLE_LOGOFF.'</div>'; ?></a>  <?php } else { 
                                 echo'<a style="position:absolute;top:60px;left:60px;color:#FFFFFF;font-weight:normal;font-size:10px;" href="login.php"><u>Se connecter</u>&nbsp;?</a>';
                                 }
                                 ?>
		  </div>
 
	  <div id="sh"><p><a href="<?php echo tep_href_link('shopping_cart.php')?>"></a><a href="<?php echo tep_href_link('shopping_cart.php')?>"></a></p>
      <p>&nbsp;</p></div><div id="sh1"><p><a href="<?php echo tep_href_link('shopping_cart.php')?>"><?php echo tep_image(DIR_WS_IMAGES.'shopping_cart_im.png','','','','hspace="9" vspace="3"')?></a></p></div>
          <div id="img_h1">
 
		  <?php 
                  if ($cart->count_contents()==0) { 
                              echo '<p align="center">'.BOX_HEADING_SHOPPING_CART.'</p>';
                                        }else{
                  ?>
			<a style="color:#FFFFFF;font-weight:normal;font-size:10px;" href=" <?php echo tep_href_link('shopping_cart.php'); ?>">  
		 <?php echo '<p align="center">('.$cart->count_contents().') article(s) dans votre panier</p>';
              }
             ?>
 
		 </div>
     </p>
        <div class="Style5">
           <p align="center">Besoin d'un conseil ?<br />
          Une question ?<br />
           <a href="contact_us.php"><span class="Style6">Cliquer ici &raquo;</span></a></p>  </div>
         <p></p>
 
      <div align="right"><a href="<?php echo tep_href_link('contact_us.php')?>"><img src="images/dame10.png" width="57" height="86" alt="header" align="right"></a></div>
</div>
<div id="menup">
  <ul>
      <li><a class="menu" href="index.php">Accueil</a></li>
	  <li><a class="menu" href="products_new.php">Nouveautés</a></li>
	  <li><a class="menu" href="specials.php">Promotions</a></li>
	  <li><a class="menu" href="account.php">Mon compte</a></li>
	  <li><a class="menu1" href="contact_us.php">Nous contacter</a></li>
  </ul>
</div>

et le css :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
#menup{
	width:800px;
	display:inline;
	white-space:nowrap;
	-position:relative;
/*	-margin-top:0.2em;*/
	-margin-top:-1px;
	-margin-left:1px;
	-margin-right:1px;
	-margin-bottom:1px;
	}
ul{
    list-style         : none;
    padding            : 1;
    margin             : 1;
	display:inline;
}
 
ul li{
    float              : left;
}
 
ul li a.menu {
    display            : block;
    height             : 28px;
    /*width              : 137px;*/
    padding-top        :28px;
    text-align         : center;
    color              :#800000;
	background         : url(images/footer_02_20_mars.png) bottom repeat-x;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font			   :Arial, Helvetica, sans-serif;
	font-size		   :12px;
	width:139px;
	-height:50px;
	-width:160px;
 
}
ul li a.menu1 {
    display            : block;
    height             : 28px;
    /*width              : 137px;*/
    padding-top        :28px;
    text-align         : center;
    color              :#800000;
	background         : url(images/footer_02_20_mars.png) bottom repeat-x;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font			   :Arial, Helvetica, sans-serif;
	font-size		   :12px;
	width:139px;
	-height:50px;
	-width:158px;
 
}
 
ul li a.active{
	display            : block;
    height             : 28px;
    width              : 137px;
    padding-top        :28px;
    text-align         : center;
    color              :#800000;
	background         : url(images/footer_02_20_mars.png) bottom;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font			   :Arial, Helvetica, sans-serif;
	font-size		   :12px;	
	margin-left		   :1px;
}
 
ul li a.menu:hover {
    background-position:top;
    color:#FF9900;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font-size		   :12px;
}
ul li a.menu1:hover {
    background-position:top;
    color:#FF9900;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font-size		   :12px;
}
ul li a.active:hover {
    background-position:top;
    color:#FF9900;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font-size		   :12px;
}
.Style5 {
	font-size:10px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	letter-spacing:inherit;
	font-weight:bold;
	white-space:nowrap;
	position:absolute;
	left: 226px;
	top: 3px;
	width: 102px;
}
.Style6 {color: #ff9900}
.Style7 {font-size:9px}
 
#header {
	float: right;
	height: 110px;
	width: 800px;
	position: relative;
	/*background-color:#32434d;*/
}
#version {
	/*background-repeat: no-repeat;*/
	/*background:#33434E;*/
	/*background:#32434d;*/
	float: right;
	height:101px;
	/*width: 349px;*/
	width:373px;
	position: absolute;
	top: 1px;
	left: 422px;
	padding-top: 7px;
	float:left;
	/*opacity:1;*/
}

Merci d'avance

N'oublie pas les balises [CODE ] [/CODE ] (le bouton # dans l'éditeur) pour une meilleure visibilité de ton code, et n'oublie pas que tu es dans une partie html/css donc évite le php :D

12/06/2009, 16h19
HiRoN

Citation:

Envoyé par lifty

N'oublie pas les balises [CODE ] [/CODE ] (le bouton # dans l'éditeur) pour une meilleure visibilité de ton code, et n'oublie pas que tu es dans une partie html/css donc évite le php :D

+1... ;)

Merci de fournir :

- Le code CSS
- Le code (X)HTML généré (afficher la source)

bon voici le xhtml generer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div style="-float:right;">
      <div id="asc"><a href="http://localhost/toutpourlavideo/shopping_cart.php?osCsid=rapu6p4sjbquotr1e2qsbj5uh6"></a></div>
 
        <div id="opt_h">
          <form name="currencies" action="http://localhost/toutpourlavideo/index.php" method="get"><select name="currency" onChange="this.form.submit();" class="se1"><option value="USD">US Dollar</option><option value="EUR" SELECTED>Euro</option></select><input type="hidden" name="osCsid" value="rapu6p4sjbquotr1e2qsbj5uh6"></form>        </div>
 
				<div id="id2"><a style="position:absolute;top:60px;left:60px;color:#FFFFFF;font-weight:normal;font-size:10px;" href="login.php"><u>Se connecter</u>&nbsp;?</a>		  </div>
 
	  <div id="sh"><p><a href="http://localhost/toutpourlavideo/shopping_cart.php?osCsid=rapu6p4sjbquotr1e2qsbj5uh6"></a><a href="http://localhost/toutpourlavideo/shopping_cart.php?osCsid=rapu6p4sjbquotr1e2qsbj5uh6"></a></p>
      <p>&nbsp;</p></div><div id="sh1"><p><a href="http://localhost/toutpourlavideo/shopping_cart.php?osCsid=rapu6p4sjbquotr1e2qsbj5uh6"><img src="images/shopping_cart_im.png" border="0" alt="" width="45" height="45" hspace="9" vspace="3"></a></p></div>
          <div id="img_h1">
 
		  <p align="center"><a style="color:#FFFFFF;font-weight:normal;font-size:10px;"" href="shopping_cart.php">Votre panier est vide</a></p>	
		 </div>
     </p>
        <div class="Style5">
           <p align="center">Besoin d'un conseil ?<br />
          Une question ?<br />
           <a href="contact_us.php"><span class="Style6">Cliquer ici &raquo;</span></a></p>  </div>
         <p></p>
 
      <div style="-margin-top:-250px;-z-index:1;"><a href="http://localhost/toutpourlavideo/contact_us.php?osCsid=rapu6p4sjbquotr1e2qsbj5uh6"><img  class="png" src="images/dame10.png" width="57" height="86" alt="header" align="right"></a></div>
</div>

et voici le code css

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
#menup{
	width:800px;
	display:inline;
	white-space:nowrap;
	-position:relative;
/*	-margin-top:0.2em;*/
	-margin-top:-1px;
	-margin-left:1px;
	-margin-right:1px;
	-margin-bottom:1px;
	}
ul{
    list-style         : none;
    padding            : 1;
    margin             : 1;
	display:inline;
}
 
ul li{
    float              : left;
}
 
ul li a.menu {
    display            : block;
    height             : 28px;
    /*width              : 137px;*/
    padding-top        :28px;
    text-align         : center;
    color              :#800000;
	background         : url(images/footer_02_20_mars.png) bottom repeat-x;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font			   :Arial, Helvetica, sans-serif;
	font-size		   :12px;
	width:139px;
	-height:50px;
	-width:160px;
 
}
ul li a.menu1 {
    display            : block;
    height             : 28px;
    /*width              : 137px;*/
    padding-top        :28px;
    text-align         : center;
    color              :#800000;
	background         : url(images/footer_02_20_mars.png) bottom repeat-x;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font			   :Arial, Helvetica, sans-serif;
	font-size		   :12px;
	width:139px;
	-height:50px;
	-width:158px;
 
}
 
ul li a.active{
	display            : block;
    height             : 28px;
    width              : 137px;
    padding-top        :28px;
    text-align         : center;
    color              :#800000;
	background         : url(images/footer_02_20_mars.png) bottom;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font			   :Arial, Helvetica, sans-serif;
	font-size		   :12px;	
	margin-left		   :1px;
}
 
ul li a.menu:hover {
    background-position:top;
    color:#FF9900;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font-size		   :12px;
}
ul li a.menu1:hover {
    background-position:top;
    color:#FF9900;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font-size		   :12px;
}
ul li a.active:hover {
    background-position:top;
    color:#FF9900;
    text-decoration    : none;
	padding            : 17px 10px 5px 11px;
	font-size		   :12px;
}
.Style5 {
	font-size:10px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	letter-spacing:inherit;
	font-weight:bold;
	white-space:nowrap;
	position:absolute;
	left: 226px;
	top: 3px;
	width: 102px;
}
.Style6 {color: #ff9900}
.Style7 {font-size:9px}

et si c'est utile voici le code php

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
 
<div id="header" style="-z-index:0;"><img src="images/header_01.png" alt="header" width="126" height="109" /><img src="images/header_02.png" alt="header" width="119" height="109" /><img src="images/header_03.png" alt="header" width="142" height="109" /><img src="images/header_04.png" alt="header" width="49" height="109" /><img src="images/header_05.png" alt="header" width="363" height="109" /></div>
<div style="-float:right;">
      <div id="asc"><a href="<?php echo tep_href_link('shopping_cart.php')?>"></a></div>
 
        <div id="opt_h">
          <?php
				echo tep_draw_form('currencies', tep_href_link(basename($PHP_SELF), '', $request_type, false), 'get');
				reset($currencies->currencies);
			    $currencies_array = array();
			    while (list($key, $value) = each($currencies->currencies)) {
					$currencies_array[] = array('id' => $key, 'text' => $value['title']);
				}
				$hidden_get_variables = '';
				reset($HTTP_GET_VARS);
				while (list($key, $value) = each($HTTP_GET_VARS)) {
				    if ( ($key != 'currency') && ($key != tep_session_name()) && ($key != 'x') && ($key != 'y') ) {
				      $hidden_get_variables .= tep_draw_hidden_field($key, $value);
				    }
                }
               echo tep_draw_pull_down_menu('currency', $currencies_array, $currency, 'onChange="this.form.submit();" class="se1"') . $hidden_get_variables . tep_hide_session_id();
               echo '</form>';
			 ?>
        </div>
 
				<div id="id2"><?php
				  if (tep_session_is_registered('customer_id')) {
		  			 $req = mysql_query("select * from customers where customers_id='$customer_id'");
					 $boucle = mysql_fetch_object($req);
					 $nom = $boucle->customers_lastname;
		 			 echo '<div style="position:absolute;top:60px;left:60px;color:#FFFFFF;font-weight:normal;font-size:10px;">Bonjour :'.$nom.'</div>';
		 		 ?>
				 <a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class=""><?php echo '<div align="left" style="position:absolute;top:73px;left:46px; color:#FFFFFF;font-weight:normal;font-size:10px;">'.HEADER_TITLE_LOGOFF.'</div>'; ?></a>  <?php } else { 
				 echo'<a style="position:absolute;top:60px;left:60px;color:#FFFFFF;font-weight:normal;font-size:10px;" href="login.php"><u>Se connecter</u>&nbsp;?</a>';
				 }
				 ?>
		  </div>
 
	  <div id="sh"><p><a href="<?php echo tep_href_link('shopping_cart.php')?>"></a><a href="<?php echo tep_href_link('shopping_cart.php')?>"></a></p>
      <p>&nbsp;</p></div><div id="sh1"><p><a href="<?php echo tep_href_link('shopping_cart.php')?>"><?php echo tep_image(DIR_WS_IMAGES.'shopping_cart_im.png','','','','hspace="9" vspace="3"')?></a></p></div>
          <div id="img_h1">
 
		  <?php 
	          if ($cart->count_contents()==0) { 
			      echo '<p align="center">'.BOX_HEADING_SHOPPING_CART.'</p>';
					}else{
		  ?>
			<a style="color:#FFFFFF;font-weight:normal;font-size:10px;" href=" <?php echo tep_href_link('shopping_cart.php'); ?>">  
		 <?php echo '<p align="center">('.$cart->count_contents().') article(s) dans votre panier</p>';
	      }
	     ?>
 
		 </div>
     </p>
        <div class="Style5">
           <p align="center">Besoin d'un conseil ?<br />
          Une question ?<br />
           <a href="contact_us.php"><span class="Style6">Cliquer ici &raquo;</span></a></p>  </div>
         <p></p>
 
      <div style="-margin-top:-250px;-z-index:1;"><a href="<?php echo tep_href_link('contact_us.php')?>"><img  class="png" src="images/dame10.png" width="57" height="86" alt="header" align="right"></a></div>
</div>