28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'espacement sous IE

Bonjour a toutes et tous et bonnes fêtes de fin d'année

Voilà je suis en cours de dev et j'essaye (enfin ?) de coder en comprenant tout ce que je fais, jusqu'a présent je bidouillais toujours mes CSS pour que l'affichage soit correct.

Donc apres avoir parcouru les différents tuto, et debbuger j'ai pu arriver a un résultat quasi-parfait (conforme W3C) a un point près.

Voici la structure de ma page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>"Variable de titre"</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
		<link rel="SHORTCUT ICON" href="./images/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="./includes/macss.css" />
	</head>
	<body>
		<div id='menu'>Plouf&nbsp;&nbsp;|&nbsp;&nbsp;PLouf&nbsp;&nbsp;|&nbsp;&nbsp;PLouf&nbsp;&nbsp;|&nbsp;&nbsp;?&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;Options&nbsp;&nbsp;|</div>
			<div id='tree'>
				<table class='tab_mef'>
					<tr class='violet-moyen'>
						<td class='reduire'></td>
						<td>Titre</td>
					</tr>
					<tr class='violet-clair'>
						<td></td>
						<td>
						</td>
					</tr>
				</table>
			</div>
			<div id='content-head'>
				<table class='tab_mef'>
					<tr class='violet-moyen'>
						<td>Titre</td>
						<td class='hd'></td>
					</tr>
					<tr class='violet-clair'>
						<td colspan='2'>
						</td>
					</tr>
					<tr class='violet-clair'>
						<td></td>
						<td class='bdc'></td>
					</tr>
				</table>
			</div>
			<div id='content-separator'>
				<table class='tab_mef'>
					<tr><td class='hgc'></td></tr>
					<tr><td class='bg'></td></tr>
				</table>
			</div>
			<div id='content-foot'>
				<table class='tab_mef'>
					<tr class='violet-moyen'>
						<td>Titre</td>
						<td class='hd'></td>
					</tr>
					<tr class='violet-clair'>
						<td colspan='2'>
						</td>
					</tr>
				</table>
			</div>
		<div id='connex'>
		</div>
	</body>
</html>


J'utilise les tableaux pour arrondir mes coins de div et pour poser mes couleurs plus facilement/rapidement


Mon problème est que ma div tree a un léger espace qui la sépare du bord de la fenêtre sous IE
Sous FF j'utilise une position absolute pour tree, fixed pour menu et connex, et relative pour les autres
Sous IE menu et connex sont absolute (merci !important), les autres ne changent pas, mais tree me pose des problemes :

Si je met en relative/static le positionnement de ses frères (si j'ai bien tout compris) se fait correctement mais il y a l'espace.

Voici ma CSS
/*##########################################
 * Couleurs standard du site : 
 * Blanc : white /ou/ #FFFFFF
 * Violet foncé : #3A0928
 * violet moyen : #621044
 * violet clair : #7E1557
 *##########################################*/

/*##########################################
 *
 * BALISES GLOBALES
 *
 *##########################################*/

body
{
background-color:white;
color:black;
/* fonctionne que sous IE
scrollbar-face-color: #621044;
scrollbar-highlight-color: #621044;
scrollbar-shadow-color: #621044;
scrollbar-3dlight-color: #3A0928;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #7E1557;
scrollbar-darkshadow-color: #621044;
scrollbar-base-color: #621044; */
}

table
{
border:1px solid black;
width:100%;
border-collapse:collapse;
}

td.text
{
border:1px dotted gray;
padding-right:5px;
padding-left:5px;
}

img, form
{
border:1px dashed blue;
}

h1, h2, h3, h4, h5, h6, p
{
border:1px solid yellow;
margin:0;
}

ul
{
border:1px solid green;
}

/*##########################################
 *
 * ID MENU
 * si IE
 * padding-bottom à 2px
 *
 * si FF
 * padding-bottom à 1px
 *
 *##########################################*/

#menu
{
background-color:#621044;
position:fixed!important;
position:absolute;
visibility:visible;
color:white;
font-weight:bold;
left:0;
top:0;
width:99%;
padding-bottom:2px;
padding-left:10px;
cursor:pointer;
z-index:1;
}

/*##########################################
 *
 * ID TREE
 * si IE
 * position marche normalement static;
 *
 * si FF
 * position va devoir être mis à absolute;
 *
 *##########################################*/

#tree
{
background-color:#7e1557;
color:white;
position:absolute!important;/* cette ligne sera considerer comme la valeur a considerer pour position */
position:relative;/* IE n'a pas compris que la ligne precedante etait celle qui etait importante , et prendra celle ci (la derniere ) en compte */
visibility:visible;
overflow:visible;
float:left;
left:0;
top:0;
width:30%;
height:90%;
margin-top:50px;
}

#tree .reduire
{
background-image:url(../images/reduire2.gif);
background-repeat:no-repeat;
background-color:#621044;
background-position:center center;
cursor:pointer;
color:white;
width:25px;
height:25px;
}

#tree .restaurer
{
background-image:url(../images/restaurer2.gif);
background-repeat:no-repeat;
background-color:#621044;
background-position:center center;
cursor:pointer;
color:white;
width:25px;
height:25px;
}

/*##########################################
 *
 * ID CONTENT HEAD, SEPARATOR, FOOT
 * si IE
 * left va devoir être mis à -3px
 *
 * si FF
 * left marche normalement à 0px
 *
 *##########################################*/

#content-head
{
background-color:#7e1557;
color:white;
position:relative;
visibility:visible;
overflow:visible;
left:-3px;
top:0;
width:60%;
margin-top:50px;
margin-left:30%;
}

#content-head .hd
{
background-image:url(../images/coin_hd.gif);
background-repeat:no-repeat;
background-position:top right;
width:10px;
height:25px;
}

#content-head .bdc
{
background-image:url(../images/coin_bdc.gif);
background-repeat:no-repeat;
background-position:bottom right;
width:10px;
height:10px;
}

#content-separator
{
background-color:white;
color:black;
position:relative;
visibility:visible;
left:-3px;
top:0;
width:60%;
margin-left:30%;
}

#content-separator .hgc
{
background-image:url(../images/recoin_hgc.gif);
background-repeat:no-repeat;
background-position:top left;
width:10px;
height:10px;
}

#content-separator .bg
{
background-image:url(../images/recoin_bg.gif);
background-repeat:no-repeat;
background-position:bottom left;
width:10px;
height:10px;
}

#content-foot
{
background-color:#7e1557;
color:white;
position:relative;
visibility:visible;
overflow:visible;
left:-3px;
top:0;
width:60%;
margin-left:30%;
margin-bottom:0;
}

#content-foot .hd
{
background-image:url(../images/coin_hd.gif);
background-repeat:no-repeat;
background-position:top right;
width:10px;
height:25px;
}

/*##########################################
 *
 * ID CONNEX
 *
 *##########################################*/

#connex
{
background-color:white;
color:#3A0928;
position:fixed!important;
position:absolute;
visibility:visible;
left:90%;
top:75%;
width:10%;
text-align:center;
}

/*##########################################
 *
 * CLASSES GLOBALES
 *
 *##########################################*/

.violet-moyen
{
background-color:#621044;
color:white;
width:100%;
font-weight:bold;
padding-bottom:5px;
padding-left:10px;
}

.violet-clair
{
background-color:#7e1557;
color:white;
width:100%;
padding-bottom:5px;
padding-left:10px;
}


Merci d'avance *arrache son dernier cheveux*

Autre petits points sombres pour moi :
- Je suis obligé de mettre un margin left de la taille de mon #tree sinon le BG de ses freres lui passent dessus. Mis a part en trichant avec z-index y a t'il une solution pour que le positionnement soit correct et sans débordement ?
- Comment faire pour que mes div #tree et #content-foot s'allongent automatiquement jusqu'en bas de ma page ?
Modifié par Nagaroth (09 Mar 2006 - 08:42)
Bon j'ai inclue mon tree dans une nouvelle div relative et mes content dans une autre et certains problèmes ont disparus, mais subsiste encore cet espacement à gauche de la première sur les deux navigateurs, et que je sais pas comment faire pour que mes div aillent jusqu'en bas de ma page
Bon avec le sélecteur universel
*
{
margin:0;
padding:0;
}

Le problème a disparu et l'affichage général s'en est vu amélioré sur les deux navigateurs Smiley lol

Topic Résolu
Sujet clos
Aller à