[CSS] IE n'aime pas mon code...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] IE n'aime pas mon code...

ANViL

yep...definitely ♫

Bonsoir à tous,

Je suis en train de créé un petit site tout simple, avec une mise en page dans les normes (enfin je pense), et une CSS correcte.
Seulement comme rien n'est parfait, mon site ne passe pas du tout comme il faudrait sous IE, alors que Mozilla, Opera l'affiche correctement.

Pour avoir un aperçu de la page:

-

(j'ai rempli les paraphs avec du dummy, fallait bien qu'il y ait un semblant de contenu )

Raccourci vers la feuille de style:

-

Si qqn pouvait m'aider ça serait sympa

Message édité par ANViL le 18-05-2008 à 17:23:33

Publicité

afbilou

pouet your life

Passe en xhtml 1.0 strict pour ta DTD pour avoir le modele de boite Strict du w3c sur IE et gecko ... tu auras deja moins de surprise peut-etre

ANViL

yep...definitely ♫

Ok c'est fait, mais ça ne résoud apperemment rien

Je ne comprends pas pourquoi IE distortionne la boite (quoiqu'avec le nombre de bugs CSS d'iE plus rien ne m'étonne), la largeur est fixée pourtant :??:

Message édité par ANViL le 28-09-2005 à 20:34:59

xtof_83

Freeride Spirit

Réduit de peux la taille du contenu de droite....

Message édité par xtof_83 le 28-09-2005 à 20:37:31

ANViL

yep...definitely ♫

Voilà c'est fait,

mais bon, c'est pas vraiment une solution:

- les boites (div) des listes de menus sont trop larges par rapport aux autres (le titre 'ADMIN' et celle contenant la photo du GSM) donc ça ne rend pas très bien :sweat:

- Ensuite (toujours dans les mystères d'IE) il me saccage le pied de page, que j'ai pourtant déclaré correctement avec un clear: both

Je désespère d'arriver à une solution potable pour les usagers d'IE...

xtof_83

Freeride Spirit

Ben les % sous IE c'est pas top...alors soit tu met le menu en dure et le reste n flottant et ce sera mieux

Moi je pense c'est le plus logique...

ANViL

yep...definitely ♫

Mais le truc c'est que j'ai déjà essayé de mettre une largeur fixe pour le menu (et même de le mettre en position fixe plutot que flottante, c'est ce que j'avais fais initialement) mais ça foirait déjà ! J'ai essayé plusieurs dispositions différentes (absolue, relative...) IE me rajoute toujours 2% de largeur en trop.

IE <- :gun:

Message édité par ANViL le 28-09-2005 à 20:52:23

xtof_83

Freeride Spirit

_margin:0px
_padding:0px

ANViL

yep...definitely ♫

j'ai remplacé les occurences existantes de margin: 0px ainsi que padding: 0px par ce que tu as indiqué, mais ça ne change rien.

C'est un hack pour IE ? et ou faudrait-il le placer pour que ça fonctionne ?

gatsusat

tu vires la merde que xtof t'a filé, c'est du bidouillage sans reflexion

ensuite quand on fait une CSS
on se casse pas la tete, on vire les marges externes (margin) et les marges internes (padding) de tous les éléments

* {
padding: 0;
margin: 0;
}

ton problème vient surtout du fait que pour UL
sous IE c'est un margin qui est effectué pour le décalage
alors que sous Gecko (FF..) c'est un padding qui est effectué (qui a mon sens est plus juste)

donc soit tu vires les padding/margin pour TOUS tes éléments ou tu l'applique que au UL de ton menu

Message cité 1 fois

Publicité

gatsusat

j'ai corrigé une petite largeur, même si ca fait foirer un peu sous ie en 640x480, c'est passage. Mais je pense que tu aurais du te contenter d'un layout fixe. C'est chiant les layout fluides

Code :

/* BLOCS PRINCIPAUX */
* {
padding: 0;
margin: 0;
}
body {
background: url(images/background.jpg) fixed no-repeat top left;
text-align: center;
}
.conteneur {
width: 100%;
}
#main {
margin: 10px auto;
width: 80%;
border: 1px black solid;
background: rgb(160,159,152);
}
/* HEADERS 1-6 */
h1,h2,h3 {
margin: 0px;
padding: 1em 0em;
border: 1px black none;
border-bottom-style: solid;
}
h1 {
background: url(images/header1_gradient.jpg) repeat-x top left;
font: normal 25px Verdana, sans-serif;
text-align: center;
}
h2 {
background: rgb(190,190,190);
font: bold 16px Verdana, sans-serif;
text-align: left;
text-indent: 30px;
}
h3 {
font: bold 11px Verdana, sans-serif;
border-bottom-style: none;
}
h4,h5 {
background: rgb(178,186,195) url(images/header_gradient.jpg) repeat-y top right;
font: bold 10px Verdana, sans-serif;
vertical-align: middle;
border: 1px black none;
color: rgb(45,63,85);
line-height: 20px;
text-indent: 20px;
text-align: left;
margin: 0px;
}
h4 {
border-bottom-style: solid;
}
h5 {
border-bottom-style: solid;
border-top-style: solid;
}
h6 {
background: rgb(100,100,100);
font: bold 10px Verdana, sans-serif;
color: rgb(200,200,200);
border-top: 1px black solid;
text-align: center;
margin: 0px;
padding: 0.5em 0em;
clear: both;
}
/* PARAGRAPHES */
p {
margin: 0px;
padding: 0.5em 0em;
}
#conteneur_menu_gauche {
float: left;
width: 18%;
}
/* MENU GAUCHE 1 */
#liste_haut {
border: 1px black solid;
border-left: none;
font: bold 12px Verdana, sans-serif;
}
#liste_haut ul {
list-style: none;
border: none;
}
#liste_haut li {
text-indent: 15px;
text-align: left;
}
#liste_haut li a {
border-left: 15px solid rgb(38,75,113);
background: rgb(220,220,220);
color: rgb(130,130,130);
vertical-align: middle;
text-decoration: none;
line-height: 32px;
display: block;
width: 100%;
}
html>body #liste_haut li a {
width: auto;
}
#liste_haut li a:hover {
border-left: 15px rgb(245,153,14) solid;
background-color: rgb(205,205,205);
color: black;
}
/* PAGE DROITE */
#page_droite {
float: right;
width: 78%;
margin-right:0.5%;
border: 1px black solid;
margin-bottom: 10px;
background: rgb(200,200,200) url(images/texte_gradient.jpg) repeat-y top right;
}
.texte_page {
font: normal 14px Verdana, sans-serif;
margin: 10px 20px;
text-align: left;
color: black;
}
/* MENU GAUCHE 2 */
#admin_cpl {
border: 1px black solid;
border-left: none;
font: bold 12px Verdana, sans-serif;
margin: 10px 0px;
}
#admin_cpl ul {
list-style: none;
border: none;
margin: 0;
padding: 0;
}
#admin_cpl li {
margin: 0;
text-indent: 15px;
text-align: left;
}
#admin_cpl li a {
display: block;
vertical-align: middle;
line-height: 32px;
border-left: 15px solid rgb(38,75,113);
background: rgb(220,220,220);
color: rgb(130,130,130);
text-decoration: none;
width: 100%;
}
html>body #admin_cpl li a {
width: auto;
}
#admin_cpl li a:hover {
border-left: 15px rgb(23,115,253) solid;
background: rgb(205,205,205);
color: black;
}
/* BLOCS ANNEXES */
#admin_cpl_header {
text-align: left;
text-indent: 30px;
border: 1px black solid;
border-left-style: none;
font: bold 16px Verdana, sans-serif;
margin: 10px 0px;
background: rgb(190,190,190);
}
#astel_logo {
text-align: center;
border: 1px black solid;
border-left-style: none;
margin: 10px 0px;
padding: 15px 0px;
background: rgb(190,190,190);
}

xtof_83

Freeride Spirit

gatsusat a écrit :

tu vires la merde que xtof t'a filé, c'est du bidouillage sans reflexion

:cry: :cry: :cry: :cry:

:lol: je doute bien que ce truc est de la merde...mais j'avais vu ça sur un des sites des cadors...

Enfin n'étant pas accepter par xhtml1.1 je pense que je vais devoirt y remedier...

C'est quoi the Soluce...la même que tu viens d'éxposer.??

Message édité par xtof_83 le 28-09-2005 à 21:52:20

ANViL

yep...definitely ♫

Merci pour les explications.

Pour la technique de virer tous les padding / margin directement avec un * c'est pas mal, je n'y avait pas pensé.

Mais sinon, je ne saisi pas très bien la solution fournie (j'ai supprimé les margin & padding comme indiqué, et j'ai c/c le reste des modifications que tu avais effectué, mais le problème persiste sous IE, j'ai toujours la largeur non respectée par rapport aux autres blocs de gauche)

Les blocs flottants sont peut-être chiants, mais c'est tout ce que j'ai trouvé pour faire un design tel que celui là.

xtof_83

Freeride Spirit

Ben tu veux quoi sous IE, sa marche bien chez moi....???

EDIT : en petit taille c'est vrais que sa bugue..

Comme dis précédement menu, width:FIXE

C'est mieux, car parait il sous grosse résolution parfois ça fait des trucs affreux... :sarcastic:

Message édité par xtof_83 le 28-09-2005 à 22:00:35

gatsusat

ANVIL as tu pensé au boxModel Microsoft ?
c'est à dire :

BoxModel Microsoft :
Quand tu fais un width, le width concerne le padding, le border et le contenu

BoxModel W3C, un width ne concerne que le contenu.
donc la largeur d'une boite sera Width+padding+border

http://openweb.eu.org/articles/dimensions_boites_css/

ANViL

yep...definitely ♫

Chez moi c'est toujours décalé par rapport aux autre boites tel que '.ADMIN'

http://img258.imageshack.us/img258 [...] est8ec.jpg

EDIT: gatsusat, je n'y avais pas songé, je vais regarder ça de suite

Message édité par ANViL le 28-09-2005 à 22:06:34

ANViL

yep...definitely ♫

Yeepee !
-> j'ai modifié le design de sorte que tous les navigateurs (et surtout IE) s'accorde sur la largeur.

(En gros j'ai utilisé un background pour reproduire les bordures - que le boxModel MS comptabilisait dans la largeur :gun: - et les effets de hover, et là c'est good)

Vives les conventions du W3C non respectées :sweat:

bl@p_psx

Admin G15-france

tu aurais pu utilisé un hack ... plutot que des images pour les bordures :

http://www.communitymx.com/content [...] 53B6F20B41

@+

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.

gatsusat

oué
A {
border-left:15px;
width:85px; /*Pour tout le monde, 85+15=100*/
_width:100px; /*Pour cette grosse pute de IE*/
}

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] IE n'aime pas mon code...

Sujets relatifs
CSS Petit éclaircissement	Accès au code d'une page html...
[CSS] div & float	[CSS] propriété nécessaire ?
Durée de vie d'un a:visited en CSS	CSS IE mini prob...déjà vu mais jarrive pas à mettre la main dessus
pb de menu CSS	Avec AutoIt V3 comment récupérer le code d'erreur d' exécution
[CSS] bug IE ?	Héritage de taille em (CSS).
Plus de sujets relatifs à : [CSS] IE n'aime pas mon code...

Page générée en 0.078 secondes