Forum Clubic

Probleme de css avec IE

bonjour a tous,

je suis entrain de realiser une template pour un site internet et j utilise les css. le probleme est que ca marche parfaitement bien sur Firefox mais sur IE ca ne ressemble a rien. ca ne fait qu un mois que j ai appris que les css existaient et a travers internet et les bouquins j ai quand meme reussi a faire ce qu il a ete demande sur Firefox, mais maintenant sur IE je ne sais meme plus comment avance, car a chaque fois que je change un parametre tout devient bizzare meme sur Firefox. voici mon code css si vous pouvez m aider. c`est tres urgent. merci d avance.

body {
text-align:center;
text-align:justify;
cursor:hand;
}

/*css for the party containing for example the link “impressum” */
div#css1 {
background-color:white;
margin-left:auto;
margin-right:auto;
width:990px;
height:20px;
text-align:right;

}

div#css1 a {
color: #5C514C;
}

div#css1 a:hover {
color:#A44221;
}

/* small horizontal bar underneath css1*/
div#css6 {

float:left;
margin-left:auto;
margin-right:auto;
border-width:100px;

}

/* invisible bar underneath css6 */
div#css2{
background-color: white;
width:20px;
height:20px;
}

/* css for the party of the logo */
div#logo{
float:left;
width:250px;
height:133px;
background-color:white;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
}

/css for the party to the right of the logo containing for example “service, news, unternehmen”/

div#css3{
float:left;
width:740px;
height:143px;
background-color:white;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
text-align:left;

}

div#css3 a {
color:#5C514C;
}

div#css3 a:hover {
color:#A44221;
}
div#css3 ul {
margin-left: -4.5em ;
margin-bottom:5em;
list-style-type: none;
}

div#css3 li {
display:inline;/* pour aligner les liens horizontalement*/
margin-left:2em;
background-image: url(…/gfx/punkt2.gif);
background-repeat: no-repeat;/pour ne pas repeter plusieurs fois l image/
background-position: 0 0.6em;/deplacement vers le bas du point/
padding-left: 0.7em;
}

div#css3 li:hover{background-image: url(…/gfx/punkt4.gif); background-position:0 -0.2em;}
/div#css3 li a:active{background-image: url(…/gfx/punkt4.gif); background-position:0 -0.2em; background-repeat:no-repeat;}/

/*css for the menu */

div#menu{
float:left;
width:250px;
height:600px;
/background-color:red;/
background-image:url(…/gfx/grau.gif);
background-repeat:no-repeat;
/margin-left:auto;
margin-right:auto;
border-top:3px;
/
}

div#menu a {
color:white;

}
div#menu a:hover {color:#A44221;}
/* div#menu a:active{color:#42e510;} lorsqu on clique sur le lien*/
/div#menu a:focus{color:#42e510;}en appuyant sur la touche TAB/
div#menu ul{
list-style-type: none;/* supprimer les puces devant les liens*/
padding: 0;
margin-left: 2em;

}

div#menu li{
/list-style-type: square;/
background-image: url(…/gfx/punkt.gif);
background-repeat: no-repeat;/pour ne pas repeter plusieurs fois l image/
background-position: 0.1em 0.6em;/deplacement vers le bas du point, ca c parce qu on a definit une image a la place des points predefinis(

  • )
/
padding-left: 0.9em;
padding-top:0em;
color:white;
}

div#menu li:hover{color:#A44221; background-image: url(…/gfx/punkt4.gif); background-position:0 0.02em;}

/css pour le contenu : contents/

div#contents{
float:left;
/width:510px;/
width:500px;
min-height:560px;
/height:500px;/
background-color:white;
background-repeat:no-repeat;
margin-left:20px;
margin-right:auto;
margin-bottom:40px;

}

/* css for the party of the drawings */

div#design {
float:left;
width:200px;
/height:500px;/
background-color:white;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
/margin-top:30px;/
}

/* the layer*/

div.myframe{
/float:left;/
float:right;
width:745px;
margin-top:-580px;
/background-color:red;/
background:url(…/gfx/rahmen.gif)no-repeat bottom left;

}

div#myframe2{
float:right;
width:745px;
margin-top:-600px;
background:url(…/gfx/01.jpg)top left;
background-repeat:no-repeat;
color:white;
}

/*css for the vertical bar of middle */

div#css5{
float:left;
width:2px;
min-height:560px;
background-color:#C0C0C0;
/background-repeat:no-repeat;/
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
}

/* empty space underneath the logo */
div#css7{
float: left;
width:200px;
height:30px;
margin-left:auto;
margin-right:auto;
background-color:white;
}

/* navigation /
div#nav {
float: left;
width:50%;
margin: 0 -0.5px;
padding:10px 0 0 46px;
list-style:none;
background:white;/
couleur du grand contour.*/
margin-left:auto;
margin-right:auto;
}

div#nav ul{
list-style-type: none;/* supprimer les puces devant les liens*/
padding: 0 ;
margin-left: -0.4em;

}
div#nav li {
float: left;
margin:0 1px 0 0;
padding:0;
font-family: “Lucida Grande”, sans-serif;
font-size:80%;
list-style-type: none;/pour enlever les puces des liens/
border:2px;
white-space:nowrap;/* indiquer les retours a la ligne*/
}

div#nav a {
float: left;
display:block;
margin: 0;
padding:6px 38px;
/text-decoration:none; pour ne pas faire apparaitre le trait des liens./
/border:2px solid #9B8748;/
background:url(…/gfx/reiter.gif) 4px no-repeat ; /couleur du contour ou se trouve les liens./
font-style: normal;
text-align: center;
font-family: Arial;
border-bottom:none;
}

div#nav a:hover{
color:white;
padding-bottom:5px;
border-color:#727377;
background:#660033;
}

/div#nav a:active{
color:white;
padding-bottom:5px;
border-color:#727377;
background:blue;
}
/

/div#menu li{
list-style-type: square;
list-style-image:url("…/gfx/punkt2.gif");
list-style-position: 8px;
padding:0px;
padding-left:5px;
margin-bottom:5px;}
/

Salut,

Désolé mais c’est illisible ton truc.

D’une manière générale, si tu veux que ajuster des styles spécifiquement à Internet Explorer et pas à des navigateurs standards w3c, ben google + hack css internet explorer.

Non. Ensuite ça fait des sites comme le site de Microsoft qui il y a une époque détectait le navigateur pour faire un micmac infernal.

File nous plutôt une page d’essai de ton thème graphique, et éventuellement des copies écrans des différences entre IE & Fx. De visu, j’ai l’impression que tu fais trop de choses compliquées pour IE (notamment float).

Bonjour a tous,
désolé, j’interviens ici pour demander de l’aide , non pour aider ! J’ai un probleme similaire à Trovillone : mon site ne marche pas sur IE, il manque toute la partie menu. bouh !

voici l’adresse du site en question : www.hazart.info…
les styles sont ici : www.hazart.info…
(
Le résultat du test avec captures d’ecran : browsershots.org…

si il y a un spécialiste des dysfonctionnements IE, merci d’avance !

tout le monde dort !
j’ai modifié le positionnement du conteneur 1 : position: absolute;

mon message a ete coupé !
j’ai donc modifié le positionnement du conteneur 1 : position: absolute -> float: left
je pense que ca deverait marcher, mais je ne peux pas le tester pour l’instant .
bonne journée !

Crée un nouveau topic s’il te plaît.

On peut pas vraiment faire un float, avec un margin-left:auto; margin-right:auto;

Vu que c’est un bloc que tu centre horizontalement non ?