28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mon texte ne prend pas toute la largeur sous IE7

Bonjour,

J'ai un souci avec du texte sous IE7. Ce dernier est dans un balise SPAN imbriquée dans une balise DIV. Sous Firefox aucun pb d'affichage, mon texte est bien justifié et prend toute la largeur de la DIV en question.
Mais sous IE7 et IE6 le comportement est différent (non sans blague Smiley rolleyes )...

Voici le code "épuré" sans PHP...

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link href="styletest.css" rel="stylesheet" type="text/css" />
</head>

<body class="allcont">
<div id="container">
  <div id="header">
     <div id="headtw"><a href=""><img src="header.jpg" alt="ici une image" /></a>
	 </div><!--#headtw-->
  </div><!--#header -->
  <div id="sidebar1">
    <div class="gap">
		<span><br /></span>
	</div>
    <div class="headdiv">Links</div><!--.headdiv-->
	<div class="pieddiv"></div><!--.headdiv-->
    <div class="headdiv">Contacts</div><!--.headdiv-->
	<div class="pieddiv"></div><!--.headdiv-->
  </div><!--#sidebar1-->
  <div id="sidebar2">
    <div class="gap">
	</div><!--.gap-->
    <div class="headdiv">Blabla</div><!--.headdiv-->
	<div class="pieddiv"></div><!--.pieddiv-->
    <div class="headdiv">Blablabla</div><!--.headdiv-->
	<div class="pieddiv"></div><!--.pieddiv-->
  </div><!--#sidebar2 -->
 <div id="mainContent">
    <div class="gap"></div>
	<div class="news">
		<ul class="ulnews">
			<li class="lititre">
				<h3>Titres</h3>
            </li>
            <li class="lidate">
                 <h5>&nbsp;par:&nbsp;
                      <span style="color:#FFCC00; font-style:normal;">
						Machin
                       </span>
                  </h5> 
			</li>
			<li class="liimgs">
				<span class="spimgs">
                    <img src="image.jpg" alt="ici une image" title="ici une image" />
                 </span>										
            </li>
		  	<li class="litext">
				<p class="sptexte">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                </p>
				<p class="sptexte">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                 </p>
			</li>
            <li class="licomm">		
					<a class="acom" href="comments.php">
					<h6>
                       <span style="color:#FF9900">
						5&nbsp;
						</span>
						commentaires
					</h6>
					</a>					
			</li>
		</ul><!-- .ulnews-->
	</div><!-- .news-->
	<div class="gapp"></div>
</div><!--#mainContent-->
 <div id="mainContent">
    <div class="gap"></div>
	<div class="news">
		<ul class="ulnews">
			<li class="lititre">
				<h3>Titres</h3>
            </li>
            <li class="lidate">
                 <h5>&nbsp;par:&nbsp;
                      <span style="color:#FFCC00; font-style:normal;">
						Machin
                       </span>
                  </h5> 
			</li>
			<li class="liimgs">
				<span class="spimgs">
                    <img src="image.jpg" alt="ici une image" title="ici une image" />
                 </span>										
            </li>
		  	<li class="litext">
				<p class="sptexte">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                </p>
				<p class="sptexte">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                 </p>
			</li>
            <li class="licomm">		
					<a class="acom" href="comments.php">
					<h6>
                       <span style="color:#FF9900">
						5&nbsp;
						</span>
						commentaires
					</h6>
					</a>					
			</li>
		</ul><!-- .ulnews-->
	</div><!-- .news-->
	<div class="gapp"></div>
</div><!--#mainContent-->
<br class="clearfloat" />
	<div id="footone">
		<div id="contbar">
	 	conteur de pagess
		</div><!--#contbar-->
	</div><!--footone-->
 	<div id="footer">
	</div><!--#footer -->
</div><!--#container -->
</body>
</html>


et la CSS "épuré" également...

@charset "utf-8";
body  {
	margin: 0;
	padding: 0;
	background-color: #666666;
    }
h3 {
	color:#00CCFF;
	font-size:1.5em;
	font-weight:bold;
	letter-spacing:0.1em;
	margin-bottom:0.2em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: silver;
	text-align: left;
}
h5 {
	color:#FFFFFF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: silver;
	font-style: italic;
	font-size: 0.9em;
	padding: 0px;
	margin-right: 0px;
	margin-bottom: 0.3em;
	margin-left: 0px;
	font-weight: lighter;
	margin-top: 0.1em;
}
h6 {
	color:#FFFFFF;
	padding: 0px;
	margin-right: 0px;
	margin-bottom: 0.3em;
	margin-left: 0px;
	margin-top: 2em;
	text-align: right;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: silver;
	font-weight: lighter;
	font-size: 0.9em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: silver;
	line-height: 1.3em;
}
.allcont #container {
	width: 80%;
	border: 1px solid #000000;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #333333;
    } 
.allcont #header {
	background-repeat: repeat-x;
	background-position: left top;
	height: 250px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	background-image: url(bodyup.jpg);
    } 
#headtw {
	height: 180px;
	position: relative;
	top: 90px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#headtw img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.allcont #sidebar1 {
	float: left;
	width: 22%; 
	padding: 15px 0;
	font-size: 100%;
    }
.allcont #sidebar2 {
	float: right;
	width: 23%; 
	padding: 15px 0;
	font-size: 100%;
    }
.allcont #sidebar1 p, .allcont #sidebar1 div, .allcont #sidebar2 p, .allcont #sidebar2 div {
	margin-left: auto;
	margin-right: auto;
    }
.allcont #mainContent {
	margin-top: 0;
	margin-right: 24%;
	margin-bottom: 0;
	margin-left: 23.5%;
    }
.allcont #footer {
	height: 35px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	background-color: #006600;
    } 
#footone {
	margin: 0; 
	height: 40px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
    }
#footer #piedul {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 35px;
}
.piedli img {
	display: block;
	padding: 0px;
	float: left;
	height: 15px;
	border: 1px solid #FFFFFF;
	margin: 0px;
}
.gap {
	padding: 0px;
	height: 30px;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	left: 0px;
	top: 0px;
}
.gap span {
	font-size: 12px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
/*[if IE]>
.allcont #sidebar2, .allcont #sidebar1 { padding-top: 30px; }
.allcont #mainContent { zoom: 1; padding-top: 15px; }
<![endif]*/
#rssfl {
	background-color: #666666;
	margin: 0px;
	padding: 0px;
	width: 178px;
	height: 178px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid #FF0000;
}
#rssfl #corrss {
	overflow: auto;
	width: 178px;
	margin: 0px;
	padding: 0px;
	height: 155px;
}
.headdiv {
	height: 15px;
	width: 180px;
	margin-top: 10px;
	text-align: center;
	color: #FFFFFF;
	background-color: #666600;
}
.pieddiv {
	height: 15px;
	width: 180px;
	margin-bottom: 10px;
	background-color: #663399;
}
.news {
	margin: 0px;
	padding: 0px;
	width: 100%;
}
.ulnews {
	margin: 0px;
	padding: 0px;
}
.ulnews li {
	list-style-type: none;
	font-size: 1em;
}
.lititre {
	list-style-type: none;
	padding: 0px;
	border-bottom-width: 1px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.lidate {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.liimgs {
	list-style-type: none;
	padding: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-top: 10px;
	text-align: center;
}
.spimgs {

	
}
.litext{
	list-style-type: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.sptexte {
	color: #FFFFFF;
	font-size: 14px;
	letter-spacing: 1px;
}
.licomm {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.acom h6:hover {
	background-color: #404040;
	text-decoration: none;
}
#contbar {
	text-align: center;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 400px;
}


Pour les deux images:bodyup.jpg (1024x250) et header.jpg (600x180)
Il y a quelque chose qui m'echappe !!
Sous IE7/IE6 la DIV #news et tout ce qu'elle contient ne prend pas toute la largeur de la DIV #maincontent...sous Firefox c'est OK.

Si quelqu'un voit le problème. MERCI Smiley biggrin
Modifié par zest (09 Feb 2008 - 14:23)
bonjour
tu as plusieurs div#maincontent, dans ce cas il faut mettre class au lieu de id.

où sont les propriétés css de #maincontent ?
La CSS de #mainContent est bien dans le code Smiley cligne
je te la remets...


.allcont #mainContent {
	margin-top: 0;
	margin-right: 24%;
	margin-bottom: 0;
	margin-left: 23.5%;
    }


a écrit :


tu as plusieurs div#maincontent, dans ce cas il faut mettre class au lieu de id.


Pour le reste c'est normal...en fait il y a une boucle en PHP...pour la simuler j'ai fait un copier/coller.
Mais le problème ne vient pas de là. Merci quand même
Modifié par zest (26 Jan 2008 - 14:27)
Bon en fait en "épurant" le code j'ai enlevé la partie qui me met le souk Smiley decu 


 <div id="sidebar2">
    <div class="gap">
		<span><br />Résolution: <SCRIPT type="text/JavaScript">document.write(largeur,"x",hauteur);</SCRIPT>
		</span>
	</div><!--gap-->
    <div class="headdiv"></div><!--.headdiv-->
  		<div id="rssfl">
			<div id="titrss"></div><!--#titrss-->
  	  		<div id="corrss">
				<?php
				require_once("feedparser.php");
				echo FeedParser("http://www.lequipe.fr/Xml/Football/Titres/actu_TRF_rss.xml");
				?>
			</div><!--#corrss-->	
  		</div><!--.rssfl-->
	<div class="pieddiv"></div><!--pieddiv-->
    <div class="headdiv">Nos Sponsors</div><!--headdiv-->
		<div id="lnk4">
......


Il s'agit d'utiliser "magpierss" pour récuperer des fluxrss.
C'est cette partie qui gêne sous IE7

http://magpierss.sourceforge.net/[/url]

En fait il n'y pas de formatage des balises dans "magpierss"...
Je désire récuperer le flux rss de L'Equipe.com
Comment faire pour que ce dernier n'interfère pas dans ma mise en page ?

A noter que le comportement sous Firefox 2.0.0.11 est impécable !!!
Modifié par zest (26 Jan 2008 - 17:25)
Bon j'ai mis le code en ligne:


http://www.evonz.fr/fclioujas/fclioujas.php


Sous Firefox 2.0.011 c'est impeccable, fluide de 1024x768 à 1280x1024 Sans aucun problème...
Sous IE7 la colonne centrale ne réagit pas comme je le souhaite...
Le texte se compresse vers la gauche, et le passage de 1024x768 vers 1280x1024 ne transforme pas cette DIV mainContent...;
Sous IE6 je crois que c'est pareil (mais bon je ne désire pas developper pour cette m****)

Je ne trouve pas de solution, si je mets 'mainContent' en float:left; le décalage vers la droite disparait...mais la DIV descend vers le bas !!!
Si alors je la passe en relatif, et la remonte...c'est le bas qui ne suit pas !!

Les sites fluides c'est vraiment Smiley fache Smiley fache
Modifié par zest (26 Jan 2008 - 20:23)
Bon j'ai tout simplement "hacké" IE7....

<!--[if IE]>
<style type="text/css"> 
 .news {
	margin: 0px;
	padding: 0px;
	width: 130%;
   	float: left;
 }
</style>
<![endif]-->


Bon c'est pas terrible mais bon !!! Smiley bawling

Pour OPERA c'est OK Smiley biggrin
Sujet clos
Aller à