Largeur div sans bordure et IE

einqui

Membre actif
27 Janvier 2003
657
30
48
Tokyo, Japon
www.ealight.com
Bonjour,

J'ai developpe le site d'une association en XHTML 1.0 strict et en definissant le style par css. Evidemment, si Firefox affiche tout sans probleme, ce n'est pas le cas de IE6.0 sous Windows XP.

En fait, voila mon probleme : j'ai une barre de menu a gauche (le div appele "gauche") qui contient elle-meme trois cadres avec du texte. Ces cadres doivent tous avoir la meme largeur : ils ont un attribut width en css et une valeur en pixels :

div#gauche {
background-color: white;
margin-top: 0px;
width: 210px;
border-style: none;
font: 12px Gilsans, sans-serif;
float: left;
}

Mais sous IE, chaque cadre a une largeur differente en fonction de ce qu'il contient : un texte, un bouton a cliquer,.... en particulier, ils sont plus larges que prevu!

Et donc, a droite, le contenu du texte (le div appele "corps") n'a plus la place de s'afficher et se retrouve rejete en bas de page.

div#corps {
margin-left: 5px;
margin-top: 10px;
width: 546px;
background-color: white;
padding: 10px;
color: black;
border-style: solid;
border-width: 1px;
border-color: #EF130B;
float: left;
}

Et je dois avouer que je suis un peu perdu pour faire en sorte que l'affichage se fasse correctement sous IE et sous Firefox. Je sais qu'il existe des hacks, mais la recherche sur les forums indique que IE rend generalement les cadres plus petits que ce qu'ils devraient etre. Et dans mon cas c'est l'inverse.

Mon css serait-il erronne?

Merci d'avance pour votre aide.
 
Je pense que l'erreur est ailleurs dans ta feuille de style.. J’ai fait un test en copiant-collant tes styles ci-dessus… ben ça fonctionne sous ie6/winxp :zen:

heliotrope a dit:
salut,

tu nous dis que div#gauche contient trois cadres avec du texte mais tu ne nous donnes pas le style associé à ces derniers.

peux tu préciser?


:coucou:

Oui, je n&#8217;étais pas trop précis mais le problème peut venir des <div> inclu(e?)s dans #gauche
 
Oups, effectivement, je joins les div contenus dans gauche. Le but est que ces div s'empilent verticalement les uns en dessous des autres. Ces div sont donc dans le div "gauche" :

div#index {
background-color: #F7EBEC;
margin-top: 10px;
width: 200px;
border-style: solid;
border-width: 1px;
border-color: #EF130B;
font: 12px Gilsans, sans-serif;
}

div#index_news {
background-color: #F7EBEC;
margin-top: 10px;
width: 200px;
border-style: solid;
border-width: 1px;
border-color: #EF130B;
font: 12px Gilsans, sans-serif;
}


div#rejoindre {
background-color: #F7EBEC;
margin-top: 10px;
width: 200px;
border-style: solid;
border-width: 1px;
border-color: #EF130B;
font: 12px Gilsans, sans-serif;
}

Les deux premier(e)s div contiennent du texte, et le troisieme un bouton.
 
malheureusement je peux pas tester mais essaie le code suivant:
(le pb vient peut-être du padding par défaut d'IE)
div#gauche {
position:relative;
float: left;
background-color: white;
margin: 0;
padding:0;
width: 210px;
border-style: none;
font: 12px Gilsans, sans-serif;
}

pour les div contenus tes styles sont identiques alors tu peux préférer une classe à une id

.maclasse{
position:relative;
float:left;
width: 200px;
margin: 10px 0 0 0;
padding:0;
background-color: #F7EBEC;
border: 1px solid #EF130B;
font: 12px Gilsans, sans-serif;
}

pour firefox et autres navigateurs aux standards tes divs contenus auront une taille totale (width+border=202px) mais IE comptera 200px et retranchera la bordure.

Vérifie également la taille de ton image contenue dans le dernier div.
 
heliotrope a dit:
pour les div contenus tes styles sont identiques alors tu peux préférer une classe à une id

Oui, effectivement, j'aurais du utiliser une classe. Je testerai ca demain (decalge horaire...) et je reviendrai poster le resultat.

Pour la largeur, la difference que je vois sous IE est bien superieure a 2 pixels. Et est-ce qu'IE6.0 a toujours ce probleme?
 
Je viens d'essayer&#8230; ben ça marche :confused: sauf si la fenêtre est trop étroitre mais c&#8217;est normal. Il faut que tu "sécurises" tes deux colonnes en les mettant dans un élément de type block dont la largeur est fixée.

voilà le code utilisé pour les tests:

Bloc de code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>page de test</title>
</head>

<body>

<style type="text/css">
div#gauche {
    background-color: white;
    margin-top: 0px;
    width: 210px;
    border-style: none;
    font: 12px Gilsans, sans-serif;
    float: left;
    }

div#corps {
    margin-left: 5px;
    margin-top: 10px;
    width: 546px;
    background-color: white;
    padding: 10px;
    color: black;
    border-style: solid;
    border-width: 1px;
    border-color: #EF130B;
    float: left;
}


div#index {
    background-color: #F7EBEC;
    margin-top: 10px;
    width: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: #EF130B;
    font: 12px Gilsans, sans-serif;
}

div#index_news {
    background-color: #F7EBEC;
    margin-top: 10px;
    width: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: #EF130B;
    font: 12px Gilsans, sans-serif;    
}


div#rejoindre {
    background-color: #F7EBEC;
    margin-top: 10px;
    width: 200px;
    border-style: solid;
    border-width: 1px;
    border-color: #EF130B;
    font: 12px Gilsans, sans-serif;
}


</style>

<div id="gauche">
<div id="index">Long texte qui ne sert à rien sinon à dépasser</div>
<div id="index_news">Long texte qui ne sert à rien sinon à dépasser</div>
<div id="rejoindre"><input type="button" value="rejoindre" name="joindre"></div>
</div>
<div id="corps">Long texte qui ne sert à rien sinon à dépasser</div>

</body>

</html>

vi je sais c&#8217;est pas propre mais j&#8217;ai fait vite :rose:
 
Salut,

Merci pour vos reponses.
Mais je ne comprends toujours pas. Je n'ai pas d'acces direct a IE6 Windows, mais un collegue a verifie pour moi : le code de Nephou marche parfaitement bien, mais la page de l'asso qui utilise le m
meme code donne ca :

Prob-IE6.jpg

Ce sont les div contenant le texte qui sont les plus larges :confused:

En fait, toutes le colonnes sont contenus dans un element "content" centre horizontalement et dont la largeur est suffisante pour contenir l'ensemble des mes div (width:800px).

Le contenu de ces div est en fait gere par SPIP grace a des boucles. Est-ce que cela pourrait venir de la?
 
Ces 2 notations ne sont pas tout à fait équivalente ! cf normes W3C

La première indique que les marges top et bottom = 0px et que left et right = 40px !
 
molgow a dit:
Ces 2 notations ne sont pas tout à fait équivalente ! cf normes W3C

La première indique que les marges top et bottom = 0px et que left et right = 40px !

Oui, je m'en suis rendu compte en verifiant sur http://fr.selfhtml.org/ (ma Bible)

Mais je ne comprends pas pourquoi cela rendait les div "index" et "indexnews" plus large que leur contenant!! :eek:

Excellent, le CSS sur l'iPod. Ca tue les heures creuses dans le metro :)