28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Decalage vertical : menu horizontal IE/firfox

Bonjour à tous !

J'ai un problème de décalage vertical de mon menu horizontal avec IE. J'ai essayé différentes modifs de mon CSS mais sans succès. Si je change les paramètres pour qu'ils s'affiche correctement sous IE, le décalage se créer sous firefox.

Mon template est sous cmsmadesimple, mais même sans cms j'ai le même problème.

Si quelqu'un a une idée, voici la source de mon code :

{process_pagedata}
<!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" >

<head>
	<title>{sitename} - {title}</title>
	{metadata}
	{stylesheet}
        {literal}
         <script type="text/javascript" src="favoris.js"></script>
        {/literal}
</head>

<body>

<div id="site">
	<div id="header">
    	<!-- [DEBUT] BARRE INFOS -->
    	<div id="barre-infos">
        	<p><a href="http://harasdepresles.free.fr">Le Haras de Presles</a> !&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<a href="javascript:void(favoris());">Ajouter à vos favoris</a></p>
        </div>
        <!-- [FIN] BARRE INFOS -->
    	<div id="menuh">
{menu}
        </div>
    </div>
    <div id="content">
    	<div id="left">
        	<div id="left-p">
            	<!-- [DEBUT] Zone de contenu -->
                {content}
                <!-- [FIN] Zone de contenu -->
            </div>
        </div>
        <div id="right">
        	<div id="right-p">
            	<div class="rss">
                	<p>Ne rattez aucune news, inscrivez vous au flux RSS !</p>
                </div>
                
                <div id="news">
                <h3>Les news</h3>
                {news number="5"}
                </div>
                
                <!-- [DEBUT] Rubrique -->
                <h3>Rubrique</h3>
                <div class="rubrique">
                	<div class="rubrique-top"></div>
					<div class="rubrique-content">
                       {menu}
                    </div>
                	<div class="rubrique-bottom"></div>
                </div>
                <!-- [Fin] Rubrique -->
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
<div id="footer">
        	<h3>Copyright</h3>
            &copy; 2009 Haras de Presles - Juliette Thory. Tous droits réservés.
            <br/>Ce site à été réalisé par <a href="mailto:k4l5u@free.fr">K4l5u</a>
</div>

</body>

</html>



body {
	background: #fef5e4 url(images/fond.jpg) repeat-x 0 0;
	font: normal 80% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: black;
	margin: 0;
	padding: 0 0 0 0;
	text-align: center;
        height: 100%
}

#site {
	margin:0 auto;
	width: 1000px;
}

/* ------------------------------------ */
/*               Header                 */
/* ------------------------------------ */


#header {
	position: relative;
	width: 1000px;
	height: 181px;
	background: url(images/header.jpg) left top no-repeat;
	margin: 0 auto;
}

#barre-infos {
	height: 23px;
	width: 267px;
	background: url(images/barre-infos.jpg) left top no-repeat;
	color: #bfbfbf;
	float: right;
	padding: 2px 12px 0 12px;
	text-align: left;
	font-size: 0.9em;
}

#barre-infos p {
	margin: 0;
	padding: 0;
}

#barre-infos a {
	color: #bfbfbf;
}

#menuh {
                position: absolute;
	top: 134px;
	left: 2px;
}

#menuh ul li {
                float: left;
	list-style: none;
	width: 110px;
	text-align: left;
                color: #FFF;
                text-align: center;
                margin-right: 11px;
}

#menuh li a {
                color: #FFF;
	padding: 0 0 0 0px;
}

#menuh li:hover {
	font-weight: bold;
}

/* ------------------------------------ */
/*               Content                */
/* ------------------------------------ */

#content {
	background: url(images/corp.jpg) no-repeat;   
	text-align: left;
	width: 100%;
                min-height: 320px;
	margin: 0 auto;
                padding-top: 0px;
}

#left {
	float: left;
	width: 703px;
}

#left-p {
	padding: 0px 20px 0 41px;
}

h2 {
	margin: 1.6em 0 1.1em 0;
	font-weight: bold;
	font-size: 1.5em;
	color: #79a004;
}

#right {
	float: left;
	width: 297px;
}

#right-p {
	padding-left: 19px;
}

#right h3 {
	margin: 1.6em 0 1.1em 0;
	font-weight: bold;
	font-size: 1.3em;
	color: #79a004;
}

.rss {
	height: 70px;
	width: 258px;
	background: url(images/right-rss.jpg) left top no-repeat;
	margin: 10px 0 10px 0;  	
}

.rss p {
	font-weight: bold;
	color: #e55300;
	margin: 0;
	padding: 20px 60px 0 18px;
}

//#news .NewsSummary {
        width: 225px;
	height: 22px;
	background: url(images/footer-li-bg.png) no-repeat;
	margin-bottom: 10px;
}

.rubrique {
	background: url(images/rubrique-bg.jpg) repeat-y;
}

.rubrique-top {
	height: 12px;
	background: url(images/rubrique-top.jpg) no-repeat;
}

.rubrique-bottom {
	height: 12px;
	background: url(images/rubrique-bottom.jpg) no-repeat;
}

.rubrique-content {
	padding: 5px 0 5px 20px;
}

.rubrique ul {
	margin: 0px;
	padding: 0;
}

.rubrique li {
	list-style: none;
	color: #836b61;
	margin-bottom: 5px;
}

.rubrique li a {
	color: #836b61;
}


/* ------------------------------------ */
/*               Footer                 */
/* ------------------------------------ */

#footer {
	background: #FFFFFF url(images/footer.jpg) repeat-x left top;
	height:100px;
	margin-top:40px;
	text-align: center;
                color: #FFF;
}

#footer a {
	color: #FFF;
}

#footer h3 {
	margin: 10px 0 0.8em 5px;
	font-weight: bold;
	font-size: 1.3em;
	color: #FFF; 
}



/* ------------------------------------ */

a {
	color: #836b61;
	text-decoration: none;
}

.clear {
	width: 807px;
	height: 14px;
	margin: 0 auto;
	font-size: 1px;
                clear: both;
}


Merci
Modifié par cypher (30 Oct 2009 - 16:04)
Bonjour,

De quel IE parles tu ? Il y a de grande différences d'interprétation entre IE6, 7 et 8 ; sans savoir duquel tu parle cela va être plus difficile de t'aider.

Pour faire des modification qui ne doivent être prise en compte que par IE (ou une version précise d'IE) tu peux utiliser des commentaires conditionnels.
Avec une capture d'écran , ça serai bcp mieux pr voir de prés ton problème ou un lien vers la page !
Modifié par integrateurweb2 (30 Oct 2009 - 12:37)
Merci Laurie-Anne je vais tester ce que tu viens de me proposer.
Sinon voici les screenshots du menu suivant le navigateur utilisé.
Je parlai de IE8... autant pour moi.

Sous Firfox :
upload/24781-menusousfi.gif

Sous IE8 :
upload/24781-menusousie.gif
integrateurweb2 a écrit :
Avec une capture d'écran , ça serai bcp mieux pr voir de prés ton problème ou un lien vers la page !


integrateurweb2 > Te serait-il possible d'éviter le language SMS ? Je comprend que ça aille plus vite à taper, mais en terme d'accessibilité, "bcp" et "pr" ne sont pas vraiment pratiques ; et très certainement difficiles à comprendre pour certains utilisateurs.
Je viens de tester les commentaires conditionnels. Par contre je ne peux pas rajouter du css. Ca m'oblige à créer une 2ème feuille de style spécialement pour IE.
Existe t-il une possibilité via la css ?

Merci en tout cas pour cette idée.
Non via CSS, la seule possibilité qui existe n'est pas recommandable.

Avec les commentaires conditionnels il faut effectivement créer une seconde feuille de style, mais correctionnele, uniquement avec les valeur qui doivent être modifiée ; cette feuille est donc normalement très courte.
Sujet clos
Aller à