28172 sujets

CSS et mise en forme, CSS3

[Résolu]Probleme difference affichage entre Firefox et IE7

Bonjour tout le monde,

Je commence juste dans la refonte total de mon site sous Joomla et je bloque sur un leger probleme d'affichage entre Firefox et IE7.


voici la difference d'affiche que j'ai entre mozilla et IE7:

Mozilla :

upload/16831-fondsiteMo.JPG

IE7 :

upload/16831-fondsiteIE.JPG

Quelqu'un a une idée sur l'origine de mon soucis???

j'ai bien essayé de regarder dans le CSS de IE7 mais pas trouvé de combine, trop novice pour le moment...
Modifié par doryan (29 May 2008 - 13:47)
voici ce que j'ai dans me feuille de style IE:

#header{height:145px}
#logo h1{margin:0 0 0 1px}
#navbar{height:32px;padding:4px 0 0 30px}
#sub{height:33px;padding:3px 0 0 308px}
#sub h2{padding:2px 0 0 12px}

#content{width:835px}
#lsheader{margin:1px 2px 2px 1px}
#rsheader{width:218px;margin:1px 2px 2px 0px}
#lsheader .moduletable h3{height:28px}
#rsheader .moduletable h3{height:28px}
#main{padding:1px 0 0 0;background:#fff url(../images/main1.gif) repeat-y}

#lbox{margin:0 1px}
#rbox{margin:0 2px 0 1px;width:176px}
#left .moduletable h3,#right .moduletable h3{height:29px}
#pathway{height:28px;width:631px}
#top,#bottom{width:647px}
#mainbody{width:647px}
#footer_container_inner{margin:2px 1px 0px 1px;width:835px}
#bottom_left{margin:0 0 0 -12px}

Si quelqu'un trouve ce qui cloche pour corriger le fait que mon texte et mes images de mon contenu soit caché derriere ma marge droite....
Salut doryan et bienvenue Smiley cligne ,

2 images et un peu de css, sauf coup de chance, ne sont pas suffisants pour détecter un problème (d'autant plus que les médiums du forum sont en séminaire aux Maldives Smiley lol ) !

L'idéal serait une page en ligne.

A défaut tout le code (html + css).

A+ Smiley smile
Aucun soucis...

Voici le site en question : rallyetvmax.free.fr

Sinon les données HTML:

<?php /* Joomla Template by DesignForJoomla.com */
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
define( '_TEMPLATE_URL', $mosConfig_live_site.'/templates/'.$cur_template );
define( '_TEMPLATE_PATH', str_replace('\\', '/', dirname(__FILE__)) );
$iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ( $my->id ) initEditor(); ?>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="<?php echo _TEMPLATE_URL; ?>/css/template_css.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php echo _TEMPLATE_URL; ?>/css/template_css.css" />
<style type="text/css">
<?php if (mosCountModules('user1') AND mosCountModules('user2')) { ?>
#lsheader{margin:0px 2px 2px 2px;width:510px}
#rsheader{margin:0px 2px 2px 0px;width:219px}
<?php } elseif (mosCountModules('user1')) { ?>
#lsheader{margin:0px 2px 2px 2px;width:731px}
#rsheader{margin:0px;width:0}
<?php } elseif (mosCountModules('user2')) { ?>
#lsheader{margin:0;width:0px}
#rsheader{margin:0px 2px 2px 2px;width:731px}
#rsheader .moduletable h3{padding:0 0 4px 5px}
<?php } else { ?>
#sheader,#lsheader,#rsheader{margin:0;width:0px;height:0}
#main{margin:1px 0 0 0}
<?php } ?>
<?php if (mosCountModules ('left') OR mosCountModules ('right')) { ?>
#lbox{margin:0 2px;width:176px}
#rbox{margin:0 2px 0 0;width:549px}
<?php } else { ?>
#lbox{margin:0;width:0;height:0}
#rbox{margin:0 2px 0 2px;width:727px}
#top,#bottom{margin:1px 0 0 0;width:725px}
#bottom{margin:0}
#mainbody{width:693px}
#pathway{width:709px}
<?php } ?>
<?php if (mosCountModules ('footer')) { ?>
#footer_container,#footer_container_inner{height:24px}
<?php } else { ?>
#footer_container,#footer_container_inner{height:48px}
<?php } ?>


</style>

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<?php echo _TEMPLATE_URL; ?>/css/template_css_ie.css" />
<style type="text/css">
<?php if (mosCountModules('user1') AND mosCountModules('user2')) { ?>
#lsheader{margin:1px 2px 2px 1px;width:510px}
#rsheader{width:218px;margin:1px 2px 2px 0px}
<?php } elseif (mosCountModules('user1')) { ?>
#lsheader{margin:1px 2px 2px 1px;width:730px}
#rsheader{margin:0px;width:0}
<?php } elseif (mosCountModules('user2')) { ?>
#lsheader{margin:0;width:0px}
#rsheader{margin:1px 2px 2px 1px;width:730px}
<?php } else { ?>
#sheader,#lsheader,#rsheader{margin:0;width:0px;height:0}
<?php } ?>

<?php if (mosCountModules ('left') OR mosCountModules ('right')) { ?>
#lbox{margin:0 1px;width:176px}
#rbox{margin:0 2px 0 1px;width:552px}
<?php } else { ?>
#lbox{margin:0;width:0;height:0}
#rbox{margin:0 2px 0 1px;width:729px}
#top{margin:1px 0 0 0;width:723px}
#bottom{margin:0}
#mainbody,#pathway,#bottom{width:723px}
#main{background:#fff}
<?php } ?>
</style>
<![endif]-->

</head>
<body><center>
<div id="bodyWrap_container">
<div id="bodyWrap">
<div id="header">
<div id="logo">
<h1 title="<?php echo $GLOBALS['mosConfig_sitename']; ?>"><a href="<?php echo $GLOBALS['mosConfig_live_site']; ?>" title="<?php echo $GLOBALS['mosConfig_sitename']; ?>"><?php echo $GLOBALS['mosConfig_sitename']; ?></a></h1>
</div>
<div id="heading">
<div id="head"><?php
if (mosCountModules('user9')) mosLoadModules('user9', -1);
else echo '<img src="'._TEMPLATE_URL.'/images/header.jpg" width="514" height="80" border="0" alt="picture" />';?>
</div>

<div id="navbar"><?php $database->setQuery("SELECT id,name,link,type,browserNav FROM #__menu WHERE menutype = 'mainmenu' AND published = 1 AND access <= $my->gid AND parent = 0 ORDER BY ordering LIMIT 0,6");
if ($rows = $database->loadObjectList()) {
echo'<ul>';
for ($i = 0, $n = count($rows); $i < $n; $i++) {
$id = $Itemid == $rows[$i]->id ? ' id="active_menu1"' : '';
$link = $rows[$i]->type == 'url' ? $rows[$i]->link : sefRelToAbs($rows[$i]->link.'&Itemid='.$rows[$i]->id);
$link = ampReplace($link);
if ($rows[$i]->browserNav == 1) {
$link .= '" target="_blank';
} elseif ($rows[$i]->browserNav == 2) {
$link .= '" onclick="javascript: window.open(\''.$link.'\', \'\', \'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=964,height=550\'); return false';
}
echo '<li><a href="'.$link.'" class="mainlevel"'.$id.'>'.$rows[$i]->name.'</a></li>';

}
echo '</ul>';} ?>
</div>

<div id="sub"><?php
if ( $my->id ) {
if ( $name ) {
$name = $my->name;
} else {
$name = $my->username;
} echo "<h2>Hi, <b>$name</b>. Click" ?>
<a href="<?php echo sefRelToAbs( 'index.php?option=logout' ); ?>"><?php echo "here" ?></a><?php echo " to logout.</h2>"; }
else { echo "" ?>
<a href="<?php echo sefRelToAbs( 'index.php?option=com_login&amp;Itemid=4' ); ?>">
<?php echo "My Account" ?></a>

<a href="<?php echo sefRelToAbs( 'index.php?option=com_registration&amp;task=register' ); ?>">
<?php echo "Register" ?></a>
<?php }?>
</div>
</div>
</div>

<div id="content">
<div id="sheader">
<?php if (mosCountModules('user1')) { ?><div id="lsheader"><?php mosLoadModules('user1', -2);?></div><?php } ?>
<?php if (mosCountModules('user2')) { ?><div id="rsheader"><?php mosLoadModules('user2', -2);?></div><?php } ?>
</div>
<div id="main">
<div id="lbox">
<?php if (mosCountModules('left')) { ?><div id="left"><?php mosLoadModules('left', -2);?></div><?php } ?>
<?php if (mosCountModules('right')) { ?><div id="right"><?php mosLoadModules('right', -2);?></div><?php } ?>
<div class="clr"><!-- --></div>
</div>

<div id="rbox">
<div id="pathway"><?php mosPathway() ?></div>
<?php if (mosCountModules('top')) { ?><div id="top"><?php mosLoadModules('top', -2);?></div><?php } ?>
<div id="mainbody"><?php mosMainbody() ?></div>
<?php if (mosCountModules('bottom')) { ?><div id="bottom"><?php mosLoadModules('bottom', -2);?></div><?php } ?>
<div class="clr"><!-- --></div>
</div>
</div>
<div class="clr"><!-- --></div>
<div id="footer_container">
<div id="footer_container_inner">
<div id="footer"><?php if (mosCountModules('footer')) mosLoadModules('footer', -1); else include_once(_TEMPLATE_PATH.'/css/bottom.css.php'); ?></div>
</div>
</div>
</div>
</div>
</div>
</center><?php include_once(_TEMPLATE_PATH.'/css/footer.css.php') ?></body>
</html><!-- Joomla Template by DesignForJoomla.com -->


La feuille CSS :

/*document settings*/
body{background:#9BB2CA url(../images/back.gif);margin:0;padding:0;font-size:11px;font-family:Verdana,sans-serif}
th,td,form,div,p{margin:0;padding:0;font-size:11px}
td{color:#274563;line-height:1.6em;letter-spacing:0.05em}
ul{margin:0;padding:0}
li{list-style-type:square;color:#40A3FE;margin-left:20px;line-height:20px}
a:link,a:visited{text-decoration:none;color:#163477}
a:hover{border-bottom:#bdf 1px solid}

/* position setting (tableless)*/
.clr{clear:both}

#bodyWrap_container{background:url(../images/back_top.jpg) top left repeat-x;margin:0;padding:0;overflow:hidden}

#bodyWrap{margin:0 auto;padding:0;width:737px;overflow:hidden}

#header{margin:0;padding:0;width:737px;height:146px;float:left;overflow:hidden}

#logo{float:left;width:223px;overflow:hidden}
#logo h1,#logo h1 a{width:223px;height:146px}
#logo h1{background:#fff url(../images/logo.gif) left top no-repeat;margin:0}
#logo h1 a{display:block;text-indent:-5000px}

#heading{margin:0;width:514px;height:145px;float:left}
#head{margin:0;width:514px;height:80px;float:left;overflow:hidden;background:#fff;text-align:left}
#head img{border:none;margin:0}


#navbar{width:514px;height:24px;float:left;padding:5px 0 0 15px}
#navbar ul,#navbar ul li{display:inline}
#navbar ul li{list-style:none;margin:0}
#navbar a,#navbar a:visited,#sub a,#sub a:visited{color:#FFF;margin-left:32px}
#navbar a:hover,#sub a:hover{border-bottom:#7487A1 4px solid}
#sub a{line-height:22px}

#sub{width:514px;height:25px;float:left;padding:7px 0 0 154px;color:#fff}
#sub h2{margin:0;padding:2px 0 0 169px;float:left;font-size:11px;color:#fff;font-weight:normal}
#sub h2 a,#sub h2 a:visited{padding:0;margin:0}

#content{margin:0 1px;width:735px;float:left;overflow:hidden}

#sheader{margin:0;width:735px;height:206px;float:left;overflow:hidden;background:#fff}

#lsheader,#rsheader{height:204px;float:left;overflow:hidden}

#lsheader .moduletable,#rsheader .moduletable{margin:0;color:#274563;padding:8px 8px 8px 10px;line-height:1.6em;letter-spacing:0.05em;height:204px;background:#F7F7EC url(../images/bgshl.gif);text-align:left}
#rsheader .moduletable{background:#F7F7EC url(../images/bgshr.gif)}
#lsheader .moduletable h3,#rsheader .moduletable h3{margin:0;color:#164677;font-size:14px;font-weight:normal;letter-spacing:0.08em;text-align:left;height:25px;padding:0 0 4px 5px}
#rsheader .moduletable h3{padding:0 0 4px 29px}
#lsheader .moduletable a,#rsheader .moduletable a{font-weight:bold;color:#0B70CE ! important}

#main{margin:0;width:735px;float:left;background:#fff url(../images/main.gif) repeat-y;overflow:hidden}

#lbox{margin:0 2px;width:176px;float:left;overflow:hidden}

#left,#right{margin:0;width:176px;float:left;overflow:hidden}
#left .moduletable,#right .moduletable{margin:0;color:#274563;padding:0 6px 10px 6px;line-height:1.6em;letter-spacing:0.05em;background:#E6EEF0;text-align:left}
#left .moduletable h3,#right .moduletable h3{color:#FFF;width:176px;margin:0 -6px 10px -6px;font-size:12px;font-weight:normal;padding:5px 0 0 24px;background:#F7F7EC url(../images/lbh3.gif);text-align:left;height:24px;overflow:hidden}
#left .moduletable a.mainlevel,#right .moduletable a.mainlevel{margin-left:15px;line-height:20px}

#rbox{margin:0 2px 0 0;width:549px;float:left;overflow:hidden;border-right:4px #0B70CE solid}

#pathway{margin:0;width:531px;float:left;background:#DBE2E2;height:20px;letter-spacing:0.1em;text-align:left;padding:8px 0 0 16px;color:#5382B3}
#pathway .pathway img{display:none}
#pathway .pathway a,#pathway .pathway a:visited{color:#5382B3;border:none;text-decoration:none;padding:8px 15px 8px 0px;font-size:11px;font-weight:normal;background:url(../images/arrow_path.gif) right no-repeat}

#top,#mainbody,#bottom{margin:1px 0 0;width:547px;float:left;background:#F0F3F2;overflow:hidden}
#bottom{margin:0}
#mainbody{width:515px;margin:0}
#top .moduletable,#mainbody,#bottom .moduletable{color:#274563;line-height:1.6em;letter-spacing:0.05em;padding:0 16px 10px;text-align:left}
#top .moduletable h3,#bottom .moduletable h3,#mainbody .contentheading,#mainbody .componentheading{margin:0;font-size:18px;letter-spacing:0.08em;color:#164677;padding:10px 0 6px;border-bottom:1px solid #4C95D6;text-align:left;font-weight:normal}
#top .moduletable thead,#bottom .moduletable thead{text-align:center}
#mainbody .contentheading,#mainbody .componentheading,#mainbody .contentpaneopen,#mainbody .contentpane{width:100%}
#mainbody .buttonheading img{border:0px;margin:0px;padding:2px}
#mainbody img{border:1px solid #225F82;margin:12px 8px 4px}

#footer_container{margin:0;width:735px;height:24px;float:left;background:white;overflow:hidden}
#footer_container_inner{margin:2px 2px 0 2px;width:731px;height:22px;float:left;overflow:hidden;background:#fff url(../images/bg5.gif)}
#footer{margin:0;padding:5px 0 0 25px;text-align:left}

#bottom_left{float:left;margin:0 0 0 -25px;padding:13px 5px 1px;text-align:left}
#bottom_left div{font-size:11px;text-align:left;color:#000}
#bottom_right{float:right;margin:0;padding:0px 5px 1px;text-align:right}
#bottom_right div{font-size:11px;color:#000;text-align:right}

/*joomla settings*/
.contentpane,.contentpaneopen{text-align:justify}

.small,span.small,#mainbody .createdate,#mainbody .modifydate,.pagenavcounter{font-size:10px;font-style:italic;color:#888}
.back_button,.pagenav_prev,.pagenav_next{font-size:11px}
.readon{float:right;font-weight:bold}

.contenttoc{margin:5px 4px;padding:0 10px;border:1px dotted #000}
.contenttoc th{border-bottom:1px dotted #000;font-size:13px;color:#0080DD}
.contenttoc td{margin:5px 0 5px 14px}
.contenttoc a.toclink{text-decoration:none}
.contenttoc a:hover.toclink{color:#0080DD}

.blog td{padding:2px}
.blog_more{margin:0 3px 15px 13px;padding:3px 6px;background:#E6EEF0}
.blog_more div{border-bottom:1px solid #fff}
.blog_more ul{margin:2px 0 2px 30px}
.blog_more ul li a.blogsection{text-decoration:none}

.syndicate div{text-align:center}
select#mod_templatechooser_jos_change_template{margin:1px 0 2px 0;width:142px}
.button{background:#F6F9FB;border:1px solid #225F82}
.poll .button{margin-top:8px}

.sectiontableheader{background:#164677;color:#fff;font-weight:bold;padding:5px 5px 0;height:20px}
.sectiontablefooter{text-align:center}
.sectiontableentry1 label,.sectiontableentry2 label{color:#000}

.pollstableborder{margin:0}
.pollstableborder td{vertical-align:middle}
.pollstableborder input{margin:0}

.sectiontableentry1,.sectiontableentry1 td{padding-left:5px;text-align:left;background:#F5FAE3;color:#000;line-height:20px}
.sectiontableentry1 td a,.sectiontableentry2 td a{color:#000;text-decoration:none;line-height:20px}
.sectiontableentry1 td a:hover,.sectiontableentry2 td a:hover{text-decoration:underline;line-height:20px}
.sectiontableentry2,.sectiontableentry2 td{padding-left:5px;text-align:left;background:url(../images/bg5.gif);color:#000;line-height:20px}

.tips{display:none}

et la feuille CSS spécial IE :

#header{height:145px}
#logo h1{margin:0 0 0 1px}
#navbar{height:32px;padding:4px 0 0 30px}
#sub{height:33px;padding:3px 0 0 308px}
#sub h2{padding:2px 0 0 12px}

#content{width:835px}
#lsheader{margin:1px 2px 2px 1px}
#rsheader{width:218px;margin:1px 2px 2px 0px}
#lsheader .moduletable h3{height:28px}
#rsheader .moduletable h3{height:28px}
#main{padding:1px 0 0 0;background:#fff url(../images/main1.gif) repeat-y}

#lbox{margin:0 1px}
#rbox{margin:0 2px 0 1px;width:176px}
#left .moduletable h3,#right .moduletable h3{height:29px}
#pathway{height:28px;width:631px}
#top,#bottom{width:647px}
#mainbody{width:647px}
#footer_container_inner{margin:2px 1px 0px 1px;width:835px}
#bottom_left{margin:0 0 0 -12px}

Si jamais tu y arrives je te tire mon chapeau.... Smiley biggrin
Ouyouyouye Smiley biggol !

Ne le prends pas mal mais ce code à base de table imbriquées pique les yeux Smiley lol ! Je t'invite fortement à jeter un oeil aux tutos et notamment à Faire une mise en page sans tableaux.

Sinon en attendant tu peux affecter un width:615px au TD qui contient tous les <p>aragraphes (dont les photos) et cela semble régler le problème.


Bonne continuation Smiley smile !


PS : pour le chapeau j'ai une petite préférence pour celui de Merlin (mais celui d'Indiana Jones fera également l'affaire Smiley ravi !)
Merci pour tout!!!!!! Quelle couleur le chapeau de Merlin sinon??? Smiley smile

Et pour le code c'est pa smoi qui l'ai fait... c'est un Template tout fait pour JOOMLA que j'ai récupéré et essayé d'arranger a ma sauce....
Sujet clos
Aller à