CSS ne fonctionne pas sous IE?

Votre code html est non valide dans de nombreuses façons. Veuillez corriger cela d'abord.

La Solution Rapide: Supprimer "overflow: auto;" de #wrapperbig et #wrapper.

Cette obtiendrez le contenu à afficher.

Cependant, assurez-vous de regarder les autres réponses. Ils ont de bons points.

J'ai moi aussi connu le même problème et trouvé une solution après quelques recherches.

1. Ne pas le code CSS sur le fichier HTML
2. Faire un distinct CSfile et de la lier à l'aide de <link href="css/style.css">
3. Et toujours ajouter <!DOCTYPE> balise pour chaque page HTML //*C'est la principale solution

Je n'ai pas de FireBug sur moi en ce moment (si vous n'avez pas cette extension - l'obtenir!) Mais à l'aide d'images dans la façon dont vous êtes en ce moment est le problème.

Utiliser CSS pour appliquer un "background-image" de l'attribut de votre site de contenu principale. Par exemple:

<style>
.Page
{
    background-image : url(../images/site_bg.png) no-repeat;
    width : 600px; /* Image width here */
    heigth : 500px; /* Image height here */
    padding-top : 15px; /* top text offset here */
    padding-left : 15px; /* left text offset here */
    padding-right : 15px; /* right text offset here */
    padding-bottom : 15px; /* bottom text offset here */
}
</style>

...

<div class = "Page">
 <!-- Content -->
</div>

Qui fonctionnera beaucoup mieux, et fonctionne dans tous les navigateurs parfaitement 🙂

En réponse au commentaire

Je ne veux pas dire que votre mal, mais quand je peux cliquer et faire glisser les images d'arrière-plan avec mon curseur de souris qui signifie que vous utilisez une balise IMG pour afficher l'arrière-plan au lieu de (ou en collaboration avec) l'image de fond d'écran de l'attribut. Je peux presque gurentee que c'est votre problème. Supprimer tous vos balises img et de les remplacer avec des divs et l'image de fond d'écran de style et votre problème sera résolu.

Si j'avais firebug sur moi, je pourrais aller plus en détail.

Deuxième édition avec des exemples de code

Voici un aperçu de code qui peut vous aider à supprimer votre unneccecary sur l'utilisation des images.

<style>
.Container { margin : auto; width : 600px; /* BG and Header Width here */ }
.Header
{
background-image : url(../images/site_header.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
.Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
{
width : 60px;
heigth : 60px;
display : block;
float : left;
margin : 10 20px;
}
.Header .Link1:link, .Header .Link1:visited
{
background-image : url(../images/link1.jpg);
}
.Header .Link2:link, .Header .Link2:visited
{
background-image : url(../images/link2.jpg);
}
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Container">
<div class = "Header">
<a href = "link1" id = "Link1"></a>
<a href = "link2" id = "Link2"></a>
</div>
<div class = "Page">
Content
</div>
</div>

🙂

Merci pour toutes vos suggestions, tout le monde. La majorité du contenu s'affiche (relativement comme il se doit) sur IE maintenant, autre que le pied de page qui est diviser ma page dans un brut de la mode (haha). Je vois ce que vous êtes dit, Nelson LaQuet, sur les images d'en-tête, je vais essayer de jouer avec eux, je suis encore nouveau pour le CSS, et d'imaginer que de les avoir tous placés correctement avec une carte-image a été des maux de tête assez est. Comme pour le Doctype, je l'ai ajouté comme vous m'avez dit et il semblait à la boue vers le haut de certains contenus, même sur Firefox, donc je sais que je dois en avoir plus des erreurs de passer à travers. Lorsque je le supprime, tout paraissait normal. Le "woowoo de l'" avec le positionnement absolu n'ont pas été nécessaires, comme le positionnement de la méthode utilisée était la SEULE façon que j'ai pu trouver pour travailler avec les images de fond et des images d'en-tête dans le tact, avec la colonne divs dans le bon endroit. Au moins j'ai fait des progrès positifs, mais je suppose que j'ai plus de travail devant moi :/souhaite Juste qu'il était un peu plus facile de corriger comme il semble très bien dans Firefox. Eh bien, merci encore à tous pour votre aide les gars!

Shannon

Pas juste un espace blanc avant:

    <!DOCTYPE html>

mais aussi supprimer les espaces avant les accolades dans votre feuille de style (fichier CSS).
Exemple d'une simple feuille de style (l'imaginer à la marge de gauche de votre éditeur de texte):

    h1{
font-family:Arial;
color:purple;
}