[Résolu] Problème d'affichage sous IE8

Bien le bonjour ^^

Je me permet de vous exposer mon souci, qui à mon avis, doit être assez répandu...
Je suis entrain de créer un petit site web en php/css. Je commence tout juste à comprendre comment réagi mon index.php avec le css (et oui ! pas facile les début)

J'ai donc créé mes premiers fichiers de mon site, les ai uploader sur Mon hébergement free (qui m'a donné du fil à retordre notamment avec les pseudo-frames) mais je n'ai pas le résultat voulu sur IE8. Les tests sur Firefox 3.5 et Safari 4 se sont avérés être positif mais pas avec IE. J'ai essayé pas mal de chose mais sans succès...

Je sollicite donc votre aide afin de comprendre là ou j'aurai éventuellement fauté. Je ne saurai vous dire si la façon dont j'ai codé mon site est propre ou non (mais il faut bien commencé quelque part pour comprendre et surtout apprendre )

Voici le site web en question : http://finalfantasyfansite.free.fr

Merci par avance
Modifié par youby (04 Aug 2009 - 10:07)

Salut,

Et bienvenue dans le monde merveilleux d'internet explorer
Ce problème est récurrent, essaye avec :

display: inline;

en CSS sur tes balise <li>.

Aussi il y a 2 div mal fermées dans le code source de la page je ne crois pas que cela soit normal :

<div style="font-size:10px;"

J'ai inséré le "display:inline;" comme tu me l'a conseillé dans mon css du menu horizontal mais aucun résultat...

J'ai également fermé les balises <div style... (petit bug du script cutenews ^^)

Vérifie bien car chez moi le display:inline enlève l'effet d'escalier sous IE. (sur le menu)

Je suis sous ie8 je peux pas vérifier sous le 7 (ou le 6)
Modifié par Fabious (04 Aug 2009 - 10:44)

Pardonne mon incompréhension mais cela ne fonctionne pas chez moi TT

Peux-tu me dire où exactement je dois insérer ce display dans mon css car je me suis peut-être tromper dans son emplacement.

Je l'ai mis au niveau des ul#menu_hori_btnX li a

/*--BOUTON 1 (accueil)--*/
ul#menu_hori_btn1 {
    list-style: none;
	margin: 0;
	padding: 0;
	margin-top: 5px;
}
ul#menu_hori_btn1 li a {
    color:#000;
    width:160px;
    height:40px;
    /*display:block !important;*/
    [b]display:inline;[/b]
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: tahoma;
    font-size: 12px;
    font-weight: bold;
    line-height:40px;
    overflow:hidden;
	background:url(img/site/btn01.png) no-repeat;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#menu_hori_btn1 li a:hover {
    background: url(img/site/btn01bis.png) no-repeat;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}


/*--BOUTON 2 (final fantasy; ff cc; ia)--*/
ul#menu_hori_btn2 {
    list-style: none;
	margin: 0;
	padding: 0;

}
ul#menu_hori_btn2 li a {
    color:#000;
    width:160px;
    height:40px;
    /*display:block !important;*/
    [b]display:inline;[/b]
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: tahoma;
    font-size: 12px;
    font-weight: bold;
    line-height:40px;
    overflow:hidden;
	background:url(img/site/btn02.png) no-repeat;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#menu_hori_btn2 li a:hover {
    background: url(img/site/btn02bis.png) no-repeat;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}


/*--BOUTON 3 (spin off)--*/
ul#menu_hori_btn3 {
    list-style: none;
	margin: 0;
	padding: 0;
}
ul#menu_hori_btn3 li a {
    color:#000;
    width:160px;
    height:40px;
    /*display:block !important;*/
    [b]display:inline;[/b]
    text-align:center;
    float:left;
    text-decoration:none;
    font-family: tahoma;
    font-size: 12px;
    font-weight: bold;
    line-height:40px;
    overflow:hidden;
	background:url(img/site/btn03.png) no-repeat;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#menu_hori_btn3 li a:hover {
    background: url(img/site/btn03bis.png) no-repeat;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

Il faut mettre le display:inline sur les LI et pas sur les A
(si tu fais "ul li a" tu ciblera tes A !)

Ensuite il faut tu réorganise ton menu plutôt comme cela :

<ul id="mon_menu_principal">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Désolé pour le manque d'info, je ne fais que te donner une piste car je suis à moitié là
Bon courage

Merci ^^ Ton aide m'a été précieuse. Le souci du menu est résolu !!

Il me reste donc plus que le footer à régler et ca sera tout bon.

Bonjour,

Je crois être dans un cas de dysfonctionnement d'ie8 (excusez-moi pour le pléonasme): j'ai malheureusement un effet d'escalier sur un tableau non ordonné... avec une balise display: inline sur le li correspondant.
Mon fil d'arianne s'affiche correctement sous firefox.
Une bonne âme viendrait-elle à mon aide?

pour l'image. Je vous mets le reste du css:

/* Breadcrumbs 
.breadcrumbswr { position: relative; top:-42px; left:-120px; z-index:130;} */
.breadcrumbswr { position: relative; top: -33px; z-index:130;}
.breadcrumbs { font-size: 1em; line-height:1.25em; color:#aaaaaa; font-weight:bold; margin: 0 auto 0px; width: 930px; padding-bottom: 13px; padding-left: 10px; text-align: left; }
.breadcrumbs ul { display:inline; }
.breadcrumbs li { display:inline; color:#f0ffff; width:180px; text-decoration:underline; }
.breadcrumbs a { font-size: 1em; line-height:1.25em; color:#f0ffff; text-decoration:underline;  }
.breadcrumbs li.active > a { color:skyblue; }
.breadcrumbs a:hover { color:skyblue; }
.breadcrumbs li.over > a { color:skyblue; }
.breadcrumbs #slash { text-decoration:none;}

<div class="col-left side-col">
<?php if($crumbs && is_array($crumbs)): ?>
<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
<ul class="breadcrumbs">
        <li class="<?php echo $_crumbName ?>" >
            <?php if($_crumbInfo['link']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
            <?php elseif($_crumbInfo['last']): ?>
                <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
            <?php else: ?>
               <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
            <?php endif; ?>
        </li>
        <?php if(!$_crumbInfo['last']): ?>
        <li id="slash"> &nbsp;/&nbsp; </li>
        <?php endif; ?>
<?php endforeach; ?>
</ul>
<?php else: ?>
<h4 class="no-display"><?php echo $this->__("You're currently on:") ?></h4>
<ul class="breadcrumbs">	
        <li class="<?php echo $this->__("home") ?>">
	    <a href="<?php  echo Mage::getBaseUrl() ?>" title="<?php echo Mage::helper('catalog')->__('Go to Home Page') ?>"><?php echo Mage::helper('catalog')->__('Home') ?></a>
		</li>
</ul>
<?php endif; ?>
...

Le display:inline sur ul n'a servi à rien non plus.

et l'attribution d'un width au <li> non plus. Modifié par Bad_Max (27 Aug 2009 - 10:32)[/edit]

Une réponse serait agréable...

Bad_Max, pour commencer il aurait été préférable de créer ton propre sujet. Ton problème est différent de celui de youby, et tu remarqueras que le sien est résolu et pas le sien. Si youbi avait pris la peine de marquer son sujet comme [Résolu] (ce que je vais faire), ça aurait encore diminué tes chances de voir quelqu'un répondre.

Par ailleurs, tu donnes un code PHP inexploitable (tu as déjà tenté d'exécuter quelques lignes de code PHP extraites d'un site complet, hum?), et une fraction de tes styles CSS. Pas d'URL de la page pour analyser directement le code HTML et CSS complet (avec des outils qui vont bien comme Firebug ou les Developer Tools d'IE8...).

Je vais donc marquer ce sujet comme résolu et le fermer, et je t'invite à ouvrir un nouveau sujet exposant ton problème... et donnant plus d'informations exploitables.