28173 sujets

CSS et mise en forme, CSS3

Encore des pb css ie et mozilla

Bonjour,

Tout nouveau sur le forum je vous souhaite le bonjour.
J'ai bien cherché avant de poster mais malheureusement je n'ai pas trouvé mon bohneur. Je suis en charge de la création du site http://www.pagestart.fr et je me retrouve confronté aux pb de style entre ie et mozilla. Jugez par vous meme en tapant l'adresse de mon site sous les deux navigateurs (pour ceux qui ont encore ie Smiley biggrin )

Je vous poste mon code ainsi que ma feuille de style

ci-joint mon fichier html

{top}
<div class="homepage">
  <div class="border_grey"><div class="menu_left">
    <div class="decor_az_corner">{rub_az_left}</div>
  </div>
  <div class="main">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
           width="604" height="19">
      <param name="movie" value="http://www.pagestart.fr/images/flash/scroll_accueil.swf">
      <param name="quality" value="high">
      <param name="bgcolor" value="#FFFFFF">
      <!--[if !IE]> <-->
      <object data="http://www.pagestart.fr/images/flash/scroll_accueil.swf"
            width="604" height="19" type="application/x-shockwave-flash">
        <param name="quality" value="high">
        <param name="bgcolor" value="#FFFFFF">
        <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
        FAIL (the browser should render some flash content, not this).
      </object>
      <!--> <![endif]-->
    </object>
    <br />
    <div class="big_box_group">
      <div>
        <table class="big_group_body" cellspacing="0">
          <tr>
            <td style="padding:5px 0px 5px 0px;">&nbsp;&nbsp;<strong><font color="4b8a23" size="2" face="Verdana, Arial, Helvetica, sans-serif">Rechercher</font></strong> <font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>sur le web</strong></font>
              <form action="search.php" method="post" name="form_search" id="form_search">
                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td><input TYPE="text" name="q" size="48" />
                      {select_search_engine}</td>
                    <td align="left"><input name="button_ok" TYPE="image" id="button_ok" src="images/button_search.gif" onclick="submit()"/></td>
                  </tr>
                </table>
              </form></td>
          </tr>
        </table>
      </div>
    </div>
    <script TYPE="text/javascript">document.form_search.q.focus();
      </script>
    <table width="602" cellpadding="0" cellspacing="0">
      <tr>
        <td width="400" height="110" colspan="4"  valign="middle"><div align="left">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
           width="399" height="76">
              <param name="movie" value="http://www.pagestart.fr/images/flash/pages_perso.swf">
              <param name="quality" value="high">
              <param name="bgcolor" value="#FFFFFF">
              <!--[if !IE]> <-->
              <object data="http://www.pagestart.fr/images/flash/pages_perso.swf"
            width="399" height="76" type="application/x-shockwave-flash">
                <param name="quality" value="high">
                <param name="bgcolor" value="#FFFFFF">
                <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
                FAIL (the browser should render some flash content, not this).
              </object>
              <!--> <![endif]-->
            </object>
            <script TYPE="text/javascript" src="../js/ieupdate.js"></script>
          </div></td>
        <td width="206" height="110" colspan="2" align="right" valign="middle"><!-- BEGIN bloc_site_action -->
          <div class="box_group">
            <div>
              <table cellspacing="0" class="group_head">
                <tr>
                  <td><a href="{HOME_URL}"><b>PageStart.fr</b></a></td>
                </tr>
              </table>
              <table width="183" cellspacing="0" class="group_body">
                <tr>
                  <td width="179" class="a"><span id="hp" style="behavior:url(#default#homepage)"></span>
                    <script TYPE="text/javascript" language="JavaScript">
homepage();            </script>
                  </td>
                </tr>
                <tr>
                  <td><a class="favcontact" href="javascript:window.external.AddFavorite('http://www.pagestart.fr','PageStart.fr - Page de d&eacute;marrage')" title="Ajouter la page de d&eacute;marrage PageStart.fr aux favoris"><img src="images/fav_icon.gif" border="0" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/>Ajouter aux favoris</a></td>
                </tr>
                <tr>
                  <td><a class="favcontact" href="mailto:contact@pagestart.fr"><img src="images/mail.png" border="0" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/>Contactez-nous</a></td>
                </tr>
              </table>
            </div>
          </div></td>
      </tr>
    </table>
    <!-- BEGIN col -->
    <div class="group_col">
      <!-- BEGIN bloc_site_perso -->
      <div class="box_group">
        <div>
          <table cellspacing="0" class="group_head">
            <tr>
              <td><a href="ajouter_site_perso.php"><b>Liens Personnels</b></a></td>
            </tr>
          </table>
          <table class="site_link_fav" cellspacing="0">
           <tr><td> <script TYPE="text/javascript" language="JavaScript">
cook();
      </script></td></tr>
            <tr>
              <td><a href="ajouter_site_perso.php">&nbsp;Ajouter ou Modifier un lien</a></td>
            </tr>
          </table>
        </div>
      </div>
      <br />
      <!-- END bloc_site_perso -->
      <!-- BEGIN bloc_site_meteo -->
      <div class="box_group">
        <div>
          <table cellspacing="0" class="group_head">
            <tr>
              <td><script TYPE="text/javascript" language="javascript"> aff_meteo();
</script>
                <noscript>
                <a href="http://www.meteoconsult.fr/" target="_blank"><img src="images/weather.gif"  border="0" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/><b>M&eacute;t&eacute;o</b></a>
                </noscript></td>
            </tr>
          </table>
          <table class="group_body" cellspacing="0">
            <tr>
              <td align="center" ><img src="http://www.meteoconsult.fr/image/meteodirect/md_france24h.gif" name="prevision" id="prevision" width="190" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/> </td>
            </tr>
          </table>
        </div>
      </div>
      <br />
      <!-- END bloc_site_meteo -->
      <!-- BEGIN bloc_site_actu -->
      <div class="box_group">
        <div>
          <table cellspacing="0" class="group_head">
            <tr>
              <td><a href="rub.php?rub=7"><img src="images/icon_news.gif"  border="0" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/>&nbsp;<b>Actualit&eacute;s</b></a></td>
            </tr>
          </table>
          <table class="group_news" cellspacing="0">
            <tr>
              <td align="left" ><br/>
                {actu}</td>
            </tr>
          </table>
        </div>
      </div>
      <br />
      <!-- END bloc_site_actu -->
      <!-- BEGIN bloc_site_tv -->
      <div class="box_group">
        <div>
          <table cellspacing="0" class="group_head">
            <tr>
              <td><a href="rub.php?rub=9"><img src="images/icon_tv.gif"  border="0" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/><b>Au programme ce soir</b></a></td>
            </tr>
          </table>
          <table class="group_body" cellspacing="0">
            <tr>
              <td align="left"><br>
                {tv}</td>
            </tr>
          </table>
        </div>
      </div>
      <br />
      <!-- END bloc_site_tv -->
      <!-- BEGIN bloc_site_cinema -->
      <div class="box_group">
        <div>
          <table cellspacing="0" class="group_head">
            <tr>
              <td><script TYPE="text/javascript" language="javascript"> aff_cinema();
</script>
                <noscript>
                <a href="http://www.nord-cinema.com/" target="_blank"><img src="images/icon_cinema.gif"  border="0" alt="{SITENAME} - Page de d&eacute;marrage pour la France"/><b>Les sorties cin&eacute;ma</b></a>
                </noscript></td>
            </tr>
          </table>
          <table class="group_body" cellspacing="0">
            <tr>
              <td align="left"><script language="JavaScript" TYPE="text/javascript" src="http://www.nord-cinema.com/webmasters/simple01.php" charset="ISO-8859-1"></script>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <br />
      <!-- END bloc_site_cinema -->
      <!-- BEGIN group -->
      <div class="box_group">
        <div>
          <table cellspacing="0" class="group_head">
            <tr>
              <td><a href="{link_rub}"><b>{group_name}</b></a></td>
            </tr>
          </table>
          <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="2" onMouseover="changeto('#67b246')" onMouseout="changeback('#FFFFFF')" >
            <!-- BEGIN site -->
            <tr>
              <td class="comment2"><script type="text/javascript" language="javascript"> 
								site_link('{link_site}','{site_name}', '{site_comment}', '{site_post_date}', '{post_by}', '{id_site}');
</script>
                <noscript>
                <a href="{link_site}"  target="_blank">{site_name}</a>
                </noscript>
              </td>
            </tr>
            <!-- END site -->
          </TABLE>
        </div>
      </div>
      <br />
      <!-- END group -->
    </div>
    <!-- END col -->
    <iframe src="http://www.astroo.net/horoscope-du-jour.htm" name="astrooh" width="623" marginwidth="0" height="110" marginheight="0" align="middle" scrolling="No" frameborder="0" id="astrooh" ></iframe>
  </div>
  <div class="menu_left">
    <div class="decor_az_corner">{rub_az_right}</div>
  </div>
</div></div>
{bottom}


et ma feuille de style

html, body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
/*	background-image:url(images/bg-line.gif);*/
}

form {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
a {	color: #FFFFFF;	text-decoration: none;width:90%;}
a:hover {color:#FFFFFF;text-decoration:none;width:90%;}

/* fav and contact */
.favcontact {font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#555555;text-decoration: none;}
.favcontact a {	color: #FFFFFF;	text-decoration: none;width:90%;}
.favcontact a:hover {color:#FFFFFF;text-decoration:none;width:90%;}

.aff_site tr td a {color:#0000C0;font-size:12px;width:100%;}
.aff_site tr td a:hover {color:#FFFFFF;background-color:#67b246;width:100%;text-decoration:none;}
.aff_site 
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000C0;
text-decoration: none;
text-align:left;
}

.partner a {color:#fffff;font-size:12px;width:10%;}
.partner a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:10%;}
.partner 
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000C0;
text-decoration: none;
text-align:left;
}
.partner tr td a {color:#FFFFFF;  background-color:#67b246;height:20px;font-size:12px;text-decoration:none;width:10%;}
.partner tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:10%;}

.partner2 a {text-decoration:none;height:18px;color:#FFFFFF;text-align:center;vertical-align:middle;background-color:#67b246;font-size:10px;width:20%;}
.partner2 a:hover {height:18px;color:#FFFFFF;text-align:center;vertical-align:middle;background-color:#67b246;text-decoration:none;width:20%;}
.partner2 
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#0000C0;
text-decoration: none;
text-align:center;vertical-align:middle;
height:18px;
}
.partner2 tr td a {color:#0000C0;background-color:#67b246;font-size:10px;width:20%;}
.partner2 tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:20%;}


.comment {color:#0000C0;border:1px #666666;background-color:#f1f1f1;color:#0000AA;font-size:11px;text-align:left;display: none;width:50%;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-bottom:2px solid #92ba79;} /* border-top:1px solid #FFFFFF;border-left:1px solid #FFFFFF;border-bottom:1px solid #92ba79; */

.comment2 {color:#0000C0;border:1px #666666;background-color:#ffffff;font-size:11px;text-align:left;width:90%;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;} /* border-top:1px solid #FFFFFF;border-left:1px solid #FFFFFF;border-bottom:1px solid #92ba79; */
.comment2 tr td {padding:1px 1px 1px 1px;} /*padding:1px 5px 1px 5px;*/ /*cedeef*/
.comment2 tr td a {padding:1px 1px 1px 1px;margin:1px 1px 1px 1px;color:#0000C0;font-size:11px;width:100%;font-family:Verdana, Arial, Helvetica, sans-serif;}
.comment2 tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:100%;}
.comment2 div {width:100%;border:1px solid #92ba79;text-align:left; }


.background_top {background-image:url(images/fond_logo.gif);}
.icon_rub {background-image:url(images/icon_rub.gif);}


.center {width:625px;}
.box_logo {height:57px;width:604px;text-align:left;background-image:url(images/fond_logo.gif);}
.box_onglet {float:left;width:408px;padding-left:0px}
.onglet_on {float:left;background-image:url(images/onglet.gif);width:100px;height:25px;text-align:center;vertical-align:bottom}
.onglet_on div {margin-top:5px}
.onglet_on div a {width:100%;color:#0000AA}
.onglet_on div a:hover {text-decoration:none;width:100%;}

.onglet_off {float:left;background-image:url(images/onglet_off.gif);width:100px;height:25px;text-align:center;color:#000000;vertical-align:middle}
.onglet_off div {margin-top:5px}
.onglet_off div a {width:100%}
.onglet_off div a:hover {text-decoration:none;width:100%;}

.onglet_rouge {float:left;background-image:url(images/onglet_rouge.gif);width:100px;height:25px;text-align:center;vertical-align:bottom}
.onglet_rouge div {margin-top:5px}
.onglet_rouge div a {width:100%}

.box_line {float:right;margin-top:1px;height:15px;width:604px;text-align:right;}
.box_date {float:right;padding:0px 5px 0px 0px;}
.spacer {clear: both;}



.group_col {float:left;width:207px;}

.box_group {padding-bottom:1px;} /* 3d8bd8 */
.box_group div {width:190px;border:1px solid #92ba79;text-align:left; }

/*background-color:#8cb6de;background-image:url(images/box_head_blue.gif);*/
/*f3f7fF*/
.group_head {background-image:url(images/small_box_head_blue.gif);background-repeat:repeat;background-color:#92ba79;color:#0000AA;text-align:left;font-size:12px;width:190px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-bottom:2px solid #92ba79;} /* border-top:1px solid #FFFFFF;border-left:1px solid #FFFFFF;border-bottom:1px solid #92ba79; */
.group_head tr td {padding:0px 0px 0px 0px;} /*padding:1px 5px 1px 5px;*/ /*cedeef*/

.group_head tr td a {padding:2px 5px 2px 5px;margin:0px 0px 0px 0px;color:#FFFFFF;font-size:11px;width:100%;font-family:Verdana, Arial, Helvetica, sans-serif;width:100%;}
.group_head tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:100%;}

.group_body {padding:0px 0px 0px 0px;width:190px;background-color:#FdFdFF;} 
.group_body tr td {padding:0px 0px 0px 0px;}
.group_body tr td a {padding:1px 5px 1px 5px;color:#0000C0;font-size:12px;width:100%;}
.group_body tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:100%;}

.site_link  a {padding:1px 5px 1px 5px;color:#0000C0;font-size:12px;width:100%;}
.site_link  a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:100%;}

.site_link_fav  a {color:#0000C0;font-size:12px;width:100%;}
.site_link_fav  a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:100%;}
.site_link_fav tr td a {padding:0px 0px 0px 0px;color:#0000C0;font-size:12px;width:100%;}
.site_link_fav tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;width:100%;}


.group_news {padding:0px 0px 0px 0px;width:190px;background-color:#FdFdFF;} 
.group_news tr td {padding:0px 0px 0px 0px;}
.group_news tr td a {color:#0000C0;font-size:12px;width:100%;}
.group_news tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;}


.big_box_group {} /* 3d8bd8 */
.big_box_group div {width:602px;border:1px solid #92ba79;}
.big_group_head {width:602px;background-color:#dfecf9; background-image:url(images/box_head_blue.gif);color:#FFFFFF;text-align:left;font-size:12px;}
.big_group_head tr td {padding:1px 5px 1px 5px;}
.big_group_body {background-image:url(images/search_box_head_blue.gif);background-repeat:repeat-x;background-color:#67b246;width:602px}
.big_group_body tr td {padding:1px 5px 1px 5px;}
.big_group_body tr td a {color:#000000;font-size:12px}

.box_line_end {height:17px;width:602px;background-image:url('images/line_blue.gif');color:#4d8c21;text-align:right;}
.box_line_dotted {height:1px;width:602px;border-top:1px dotted #4d8c21}
.box_line_end_text {font-size:10px;color:#4d8c21;width:602px}
.box_line_end_text tr td a {font-size:10px;color:#4d8c21;}

.decor_az {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;
text-align:left;width:524px;
}
.decor_az a {text-decoration:none;font-size:11px;background-image:url('images/onglet_alpha_a.gif');padding-top:2px;padding-bottom:2px;padding-right:8px;padding-left:5px;height:15px}
.decor_az a:hover {text-decoration:none;background-image:url('images/onglet_alpha_ho.gif');color:#FFFFFF;font-size:11px;}

.decor_az_corner 
{
margin:0px 0px 0px 0px;
text-align:center;
}
.decor_az_corner a 
{
text-decoration:none;font-size:11px;
background-color:#67b246;
background-image:url('images/icon_rub.gif');
margin:1px 1px 1px 1px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
height:40px;
width:34px;
font-size:12px;
font-weight:bold;
}
.decor_az_corner a:hover 
{
text-decoration:none;
background-image:url('images/icon_rub_hover.gif');
color:#FFFFFF;
background-color:#67b246;
font-size:12px;
margin:1px 1px 1px 1px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
height:40px;
width:34px;
font-weight:bold;
}
.main
{
/*border:1px solid #000000;*/
float:left;
width:629px;
background-color:#FFFFFF;

}
.homepage
{
float:left;
width:708px;
background-color:#FFFFFF
}
.menu_left
{
float:left;
width:34px;
background-color:#FFFFFF
}
.menu_right
{
float:left;
/*border:1px solid #000000;*/
width:34px;
background-color:#FFFFFF
}
.border_grey
{
float:left;
width:99%;
height:100%;
background-color:#EEEEEE;
}


.error {
color:#FF0000;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

.list_sites li {font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#000000;}
.list_sites li a {width:100%;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#0000FF;text-decoration:underline}
.list_sites li a:hover {text-decoration:none;width:100%;}



/* rub style startpagina */

.box_rub {padding-bottom:1px;float:left} /* 3d8bd8 */
.box_rub div {width:190px;border:1px solid #92ba79;}

/* rub A-Z */

.rubaz_group_col {float:left;width:201px;}
.rubaz_box_group {padding-bottom:1px;} /* 3d8bd8 */
.rubaz_box_group div {width:201px;}
.rubaz_group_head {}
.rubaz_group_body {padding:0px 0px 0px 0px;width:201px;} 
.rubaz_group_body tr td {padding:0px 0px 0px 0px;}
.rubaz_group_body tr td a {padding:1px 5px 1px 5px;color:#0000C0;font-size:12px;width:100%}
.rubaz_group_body tr td a:hover {color:#FFFFFF;background-color:#67b246;text-decoration:none;}

/* input */
.input_color { background-color:#F5F5FF }

/* page title */
.page_title { font-size:18px;display:inline }

/* box page */
.box_page { border:1px solid #92ba79;width:606px;background-color:#FbFbFF; }
.box_page_title { background-image:url(images/small_box_head_blue_rub_az.gif);background-repeat:repeat-x;background-color:#7ebd61;color:#0000AA;text-align:left;margin:0px 0px 0px 0px;padding:3px 3px 3px 3px;font-size:14px;width:604px;border-bottom:1px solid #92ba79; }

/* rub H2 */
.rub_h2 {
font-size:11px;display:inline;height:18px;vertical-align:middle;font-family:Verdana, Arial, Helvetica, sans-serif;color:#FFFFFF;padding:2px 5px 3px 5px;
}


je ne suis pas au top niveau css mais quand meme !! si quelqu'un a une idee Smiley decu
je tenais a signaler que cette page est validée W3C validator Smiley cligne

AIE AIE Je ma trompé de rubrique --> plutot a poster dans css et mise en forme
Modifié par raljx (19 Oct 2006 - 15:38)
raljx a écrit :
je tenais a signaler que cette page est validée W3C validator Smiley cligne

AIE AIE Je ma trompé de rubrique --> plutot a poster dans css et mise en forme


Bonjour et bienvenue raljx Smiley smile

Ok, je déplace le sujet Smiley cligne
Sujet clos
Aller à