Problème alignement du header sous IE7/ FF

Question

Rickey

1 Mar 2008 à 14:26

Bonjour à tous
Voilà quelque temps que je navigue sur le web pour trouver une réponse à mon soucis,celui-ci est bien banal puisqu'il revient régulièrement sur le forum sous d'autre forme
je viens de créer mon site avec joomla, je l'ai modifié pour qu'il soit d'une plus grande largeur
Je viens de mettre mon header perso , sur FF pas de soucis mais voilà que sur IE7 il me décale mon menu flash sur la droite
A mon travail sous IE6 Et IE5 pas de problème,je m'en remet à vous pour me dire une piste voir la soluce ce serait bien car je ne suis pas un pro de la programmation
Mon site http//www.usnantiat.com

Je voudrai bien mettre un fichier zip de mon css et l'index php mais je vois pas comment

Merci

Rickey

1 Mar 2008 à 14:32

Voici mon code

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
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 mosShowHead(); ?>
<?php
if ( $my->id ) {
	initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos

//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
	$user1 = 2;
	$user2 = 2;
	$colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
	$user1 = 1;
	$colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
	$user2 = 1;
	$colspan = 1;
}

//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
	$right = 1;
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
	<table border="0" cellpadding="0" cellspacing="0" width="960">
		<tr>
			<td class="outline">
		  		<div id="buttons_outer">
		  		  <div id="buttons_inner">
						<div id="buttons">
						<?php mosLoadModules ( 'user3', -1); ?>
						</div>
					</div>
		  		</div>
		  		<div id="search_outer">
		  		  <div id="search_inner">
		  		  <?php mosLoadModules ( 'user4', -1 ); ?>
		  		  </div>
		  		</div>
		  		<div class="clr"></div>
		  		<div id="header_outer">
		  			<div id="header">
		  			 
		  			</div>
		  			<div id="top_outer">
						<div id="top_inner">
						<?php
			  			if ( mosCountModules( 'top' ) ) {
			  				mosLoadModules ( 'top', -2 );
			  			} else {
			  				?>
			  				<span class="error">Top Module Empty</span>
			  				<?php
			  			}
			  			?>
						 </div>
				  </div>
		  		</div>
		  		<div id="left_outer">
		  			<div id="left_inner">
		  			<?php mosLoadModules ( 'left', -2 ); ?>
		  			</div>
		  		</div>
		  		<div id="content_outer">
					<div id="content_inner">
					<?php
		  			if ( mosCountModules ('banner') ) {
		  				?>
		  				<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
						<tr>
								<td>
									<div id="banner_inner">
									<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement.png" alt="advertisement.png, 0 kB" title="advertisement" border="0" height="8" width="468" /><br />
			  					<?php mosLoadModules( 'banner', -1 ); ?><br />
									</div>
									<div id="poweredby_inner">
										<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/powered_by.png" alt="powered_by.png, 1 kB" title="powered_by" border="0" height="68" width="165" /><br />
									</div>
								</td>
							</tr>
							</table>
							<?php
		  			}
		  			?>
		  			<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
						<tr valign="top">
							<td width="99%">
								<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">

								<?php
								if ($colspan > 0) {
								?>
									<tr valign="top">
										<?php
				  					if ( $user1 > 0 ) {
				  						?>
				  						<td width="50%">
				  							<div class="user1_inner">
				  							<?php mosLoadModules ( 'user1', -2 ); ?>
				  							</div>
				  						</td>
				  						<?php
				  					}
				  					if ( $colspan == 3) {
										 ?>
											<td width="2">
												<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2" />
											</td>
										<?php
										}
				  					if ( $user2 > 0 ) {
				  						?>
				  						<td width="50%">
				  							<div class="user2_inner">
				  							<?php mosLoadModules ( 'user2', -2 ); ?>
				  							</div>
				  						</td>
				  						<?php
				  					}
										?>
									</tr>
									<tr>
										<td colspan="<?php echo $colspan; ?>">
											<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100" /><br />
										</td>
									</tr>
									<?php
									}
								?>
								<tr>
									<td colspan="<?php echo $colspan; ?>">
										<div id="pathway_text">
										<?php mosPathWay(); ?>
										</div>
									</td>
								</tr>
								<tr>
									<td colspan="<?php echo $colspan; ?>" class="body_outer">
				  					 <?php mosMainBody(); ?>
									</td>
								</tr>
								</table>


							</td>
							<?php
							if ( $right > 0 ) {
		  				?>
		  				<td>
			  				<div id="right_outer">
			  					<div id="right_inner">
			  					<?php mosLoadModules ( 'right', -2 ); ?>
			  					</div>
			  				</div>
		  				</td>
		  				<?php
		  			}
		  			?>

						</tr>
						</table>
		  		</div>
		  	</div>
		  </td>
	  </tr>
  </table>
</div>
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>

Pour le CSS


/* CSS Document */

html {
	height: 100%;
}

body {
	height: 100%;
	margin-bottom: 1px;
	}
} 
.clr {
	clear: both;
}

.outline {
  border: 1px solid #e8eae7;
  background: #transparent;
	padding: 2px;
}

#buttons_outer {
	width: 787px;
  	margin-bottom: 2px;
	margin-right: 2px;
	float: left;

}

#buttons_inner {
	border: 1px solid #e8eae7;
	height: 21px !important;
	height: 23px;
}

#pathway_text {
  overflow: visible;
	display: block;
	height: 25px;
	line-height: 25px !important;
	line-height: 22px;
	padding-left: 4px;
	border: 1px solid #ccc;
	margin-bottom: 2px;
}

#pathway_text img {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 6px;
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	font-size: 11px;
	line-height: 21px;
	white-space: nowrap;
	border-right: 1px solid #e8eae7;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #333333;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #fff;
	background: #cc0000;
}


#search_outer {
	float: left;
	width: 165px;
}

#search_inner {
  border: 1px solid #e8eae7;
	padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: visible;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	border: 0px;
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #c64934;
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
}

#header {
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 787px;
	height: 150px;
	background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
}

#top_inner {
  border: 1px solid #e8eae7;
  padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: visible;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
	margin-top: 2px;
	width: 165px;
}

#left_inner {
  border: 1px solid #e8eae7;
	padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/** border: 1px solid #e8eae7; **/
	float: left;
	width: 787px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: left;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: right;
	padding: 0px;
	margin-left: 0px;
	height: 70px;
}

#right_outer {
	margin-left: 2px;
	width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #e8eae7;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #e8eae7;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #e8eae7;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #e8eae7;
	background: #99cc66;}

.maintitle {
	color: #99cc66;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}


/** old stuff **/

.back_button {
	float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #e8eae7;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #e8eae7;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	text-align: left;
	font-size: 11px;
}

body {
	margin: 15px;
	height: 100%;
	padding: 0px;
	font-family: Arial, Helvetica, Sans Serif;
	line-height: 120%;
	font-size: 11px;
	color: #333333;
	background:#e8eae7;
}

/* Joomla core stuff */
a:link, a:visited {
	color: #cc0000; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #339933;	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
  color: #cc0000;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #e8eae7;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #e8eae7;
	background-color: #ffffff;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;

	color: #cc0000;
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #e8eae7;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #cc0000;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #ffffff;
}

.sectiontableentry2 {
	background-color : #f9f9f9;
}

.small {
	color: #e8eae7;
	font-size: 11px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #e8eae7;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #e8eae7;
	font-size: 11px;
}

table.contenttoc {
  border: 1px solid #e8eae7;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}

a.mainlevel#active_menu {
	color:#fff;
	font-weight: bold;
}

a.mainlevel#active_menu:hover {
	color: #fff;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #cc0000;
	text-align: left;
}

a.sublevel:hover {
	color: #339933;
	text-decoration: none;
}

a.sublevel#active_menu {
	color: #333;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #e8eae7;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #e8eae7;
}

span.article_seperator {
	display: block;
	height: 1.5em;
}

Felipe

Administrateur

1 Mar 2008 à 18:04

Bonjour et bienvenue,

le code PHP ne nous est d'aucune utilité pour régler un problème HTML/CSS Smiley cligne

Mais tu donnes l'URL de la page donc tout va bien Smiley smile

Si tu veux tester ton site dans plusieurs navigateurs et notamment IE7 ET IE6 sur la même machine, tu peux lire un récent billet de blog: Installer différents navigateurs pour tester vos pages (Multiple IE, Safari 3 pour Windows et Opera notamment)

Question subsidiaire: quel est le bloc qui est décalé à droite? Il est où sur la page précisément?
Modifié par Felipe (01 Mar 2008 - 18:04)

Rickey

1 Mar 2008 à 22:03

Bonjour
Je te remercie de me répondre, le bloc qui est décaler sous IE7 est le bloc info et le "go to Firefox qui sont poussés par le header, ils ne sont pas alignés avec la montre par exemple à droite
Enfin c'est sous mon PC tu m'inquiète de ne pas l'avoir vu car il se voit comme un nez au milieu de la figure
Sur les PC du travail il y a IE6 Et IE5 pas de soucis sous fire fox chez moi pas de soucis
Donc je sais pas
Tu peux me confirmer
Merci pour tout
Rickey

Sujet clos

CSS et mise en forme, CSS3

Problème alignement du header sous IE7/ FF