[CSS] Espace en trop entre deux blocs sous IE

Tout est impec sous FF

Sujet résolu

31 janvier 2006 à 20:03:07

salut,

j'ai un problème de css énervant sur mon site en création
=> <lien>http://oliviergm.free.fr/bleach_tech/bleachtech.php </lien>

je veu mettre des bordures a mon site mais IE lui trouve une largeur de 773 ou 774 px et laisse un espace entre la bordure la bannière.

Tout marche sous FF, j'ai essayé les marges négative ( 3px jog), d'enlever le menu, le float mais rien n'y fait

#site {
width: 770px;
height: 100%;
margin: 0px auto;
padding: 0px;
border-left: 8px solid #770077;
border-right:8px solid #770077;

}

#content {
width: 595px; /* lageur du site moins les menus*/
height: 900px;
float: right;
background: url("images/papillon.gif") no-repeat right bottom;
padding: 0px;
background-color: #fffff;
overflow: hidden;
}

#header {
width: 770px;
height: 300px;
padding: 0px;
background:url("images/banniere.png") no-repeat;
}

#footer {
width: 100%;
height: 17px;
position: relative; /* needed for Safari (to position the footer correctly) */
margin: 0px auto;
padding: 2px;
background-color: #770077;
color: #ffffff;
text-align: center;
clear: both;
}

body {
margin: 0px;
padding: 0px;
border: 0px;
text-align: left;
font-family: Verdana, Arial, Helvetica, serif;
font-size: 10px;
color: #000000;
}

.bord_ext {
width: 786px;
margin: 0px auto;
border-left: 4px solid #999999;
border-right: 4px solid #999999;

}

/*les liens*/
a {
text-decoration:none;
color: #000000
}

a:visited {color:#000000; }

a:hover {
color: #a800a8;
letter-spacing: 1px;
}

/* les menus */

#menu {
width: 170px;
float: left;
border-right : 1px solid #770077;
border-bottom : 1px solid #770077;
}

#menu ul {
margin: 0px;
padding: 3px;
list-style: none;
}

.titre_menu {
border-bottom: 1px solid #69006b;
}

#menu .element_menu:first-letter {color:#69006b;}

voila merci de votre aide !

[Edit] Nyro Xeo > Titre imprécis, édité.

gcyrillus

31 janvier 2006 à 22:43:43

bonjour,

petit piege du padding et IE qui comprend height et width comme min-width et min-heigth.

pour footer tu met: width:100%; et padding:2px; donc ton footer aura une largeur de 100% + 2 px a droite et 2px a gauche !ce qui aggrandira le footeur de 4 px et etirera d'autant le conteneur dans IE et pas dans les autres navigateur.
le width:100%; n'est pas vraiment utile car ton div occupera par defaut 100% de la largeur tant qu'il n'est ni en float, position absolute ou declaré en display:inline.

Si tu veut le dimensionné a 100% ou 770px (dans ta page) donne lui alors une largeur de 766px auquel s'ajouteront les padding de 2px de droite et de gauche pour te donner un total de 770px.

a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

atwight

1 février 2006 à 23:01:04

tout juste, merci beaucoup pour ton aide, j'ai appris un truc grace à toi..