2010-08-24 7 views
1

IE6,7 me donne des griefs sur l'affichage du navigateur. Je n'ai pas eu de problèmes avec Safari ni FF. Je ne suis pas un expert CSS et j'ai besoin de conseils pour ces problèmes d'alignement de colonnes sur IE. Et je ne sais pas par où commencer parce que j'ai essayé de déconner avec les fichiers CSS et le sélecteur de navigateur CSS CSS et encore je ne peux pas le faire fonctionner sur IE.Problème de navigateur croisé CSS

Les problèmes que je crois centrent autour des titres doc doc, bd, yui-principal, yui-b, box et box. Pour des raisons imprécises, les tailles s'affichent différemment dans IE à partir d'autres navigateurs de meilleure qualité. Les valeurs de largeur et de hauteur sont différentes.

<body> 
    <div id="doc" class="yui-t2"> 
    <div id="bd"> 
     <div id="yui-main"> 
     <div class="yui-b"> 
      <div id="header" class="yui-g"> 
      <a href="index.php"> 
: 
: 

Malheureusement, les 2 fichiers CSS sont un peu écrasante sur moi pour comprendre. J'ai essayé de le coller ici, mais le format est sorti de l'ordinaire.

Quelqu'un pourrait-il aider?

Toute aide est appréciée.

app.css

body { 
    font-size: 85%; 
    font-family: "georgia"; 
} 

.yui-t2, #bd, #yui-main { 
    z-index: -5; 
} 

.yui-b, .yui-g { 
    z-index: auto; 
} 

div.yui-b div.box { 
    color: #333333; 
    border: 1px solid #c6e1ec; /* this controls the left boxes on front page */ 
    margin-top: 15px; 
} 

div.yui-b div p.box-title { 
    /* background: #0590C7; 
    border-bottom: 2px solid #c6e1ec; */ 
    background: #6f6f6f; 
    border-bottom: 2px solid #c6e1ec; 
    color: #FFFFFF; 
    display: block; 
    font-size: 93%; 
    font-weight: bold; 
    margin: 1px; 
    padding: 2px 10px; 
} 

div.yui-b div ul { 
    margin: 0; 
} 

div.yui-b div ul li { 
    border-bottom: 0px solid #fff; 
    list-style-type: none; 
} 

div.yui-b div ul li a { 
    color: #333333; 
    display: block; 
    text-decoration: none; 
    padding: 3px 10px; 
} 

div.yui-b div ul li a:hover { 
    background: #c6e1ec; 
    color: #333333; 
} 

grilles-min.css

body 
{text-align:center;} 

#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7 
    {margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;} 

.yui-b{position:relative;} 
.yui-b{_position:static;} 

#yui-main .yui-b{position:static;} 
#yui-main 
    {width:100%;} 

.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main 
    {float:right;margin-left:-25em;} 

.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main 
    {float:left;margin-right:-25em;} 

: 
: 

plus mais le format est mauvais ici à stackoverflow pour le rendre lisible.

Je m'excuse pour je ne souhaite pas tomber dans ce message comme inutile ou impoli.

Sincèrement

+3

La première chose que vous voulez faire est de le distiller jusqu'aux informations de format appropriées. Essayez de trouver le plus petit ensemble HTML/CSS qui reproduit le problème. Assurez-vous de sauvegarder une copie de l'original! En outre, il existe un certain nombre de bonnes références documentant la mise en œuvre CSS horrible d'IE. Vous pouvez regarder à travers ces sites, et essayer de comprendre ce qui correspond le mieux à votre problème: http://haslayout.net/ http://quirksmode.org/ http://www.positioniseverything.net/ explorer.html Aussi, utilisez le plugin Firebug pour FF, même si le problème est IE, pour voir quels styles s'appliquent. IE8 outils de développement aident aussi – RMorrisey

+0

Chaque fois que quelqu'un dit qu'ils ont des problèmes "cross browser", ils signifient vraiment des problèmes d'IE. Sans un lien, ou le balisage complet, tout ce que nous disons maintenant n'est qu'une supposition éclairée. – Rob

+0

Hi RMorrisey, Rob Morrisey J'ai essayé votre approche et je n'arrivais toujours pas à comprendre comment déplacer les colonnes de gauche vers la gauche et le contenu pour me déplacer un peu vers la droite. Pourriez-vous me fournir des adresses e-mail pour que je puisse vous montrer mes problèmes? J'ai peur de pirater le public sur le site. – chz

Répondre

1

Il y a beaucoup de nombreux possibles IE6/7 questions. Particulièrement IE6.

La première chose à vérifier est-ce que votre code HTML inclut une déclaration <!DOCTYPE> valide? Sinon, votre page ira en mode bizarreries, ce qui rendra toutes les versions d'IE (mais IE6 en particulier) dingues. Le mode Quirks est en fait un mode de compatibilité IE5. Il est très endommagé, alors assurez-vous d'avoir un doctype. La deuxième chose à faire est de lire quelques-uns des problèmes d'IE qui peuvent vous donner des problèmes, et sur la prise en charge du navigateur pour certaines des fonctionnalités que vous utilisez peut-être. Il y a un très bon site Web appelé (de manière appropriée) Quirksmode.org qui a un ensemble complet de tables de compatibilité pour un large éventail de fonctionnalités du navigateur.

Les sites suivants peuvent également aider:

Google est votre ami ici aussi. ;-)

Conseil suivant, essayez d'affiner votre problème.Supprimez les bits qui fonctionnent jusqu'à ce que vous finissiez avec une page qui montre le problème avec le minimum d'autres choses gênant. Enregistrez cet exemple sur un site tel que JSFiddle. Il sera plus facile de résoudre le problème si vous savez exactement quel est le problème. Enfin, si les problèmes restants sont des problèmes d'affichage mineurs qui n'empêchent pas l'utilisation de la page, vous devez vous autoriser à les ignorer. La part de marché d'IE6 et de 7 a rapidement diminué au cours de la dernière année et continuera de baisser. Il y a très peu à gagner en passant trop de temps sur des problèmes mineurs dans ces navigateurs.

Voir ici pour la mise à jour des statistiques d'utilisation du navigateur: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011 (évidemment si votre site a des données démographiques sensiblement différentes, vous devrez peut-être accorder plus d'attention à IE6 et 7, mais si tel est le cas, vous saurez déjà

Questions connexes