IE ne colle pas mon conteneur comme sous Mozilla.

Question

akrogamers

19 Aug 2007 à 23:50

Bonjour à vous,

Je viens sur ce forum pour la première fois, et je vous demande de l'aide: je suis actuellement en train de créer un site web, et bien spur, je suis sous Mozilla. Certes, aucun ou presque aucun problème n'arrive sous ce navigateur.

Mais, vous y pensez peut-être, lorsque je vais vérifier mes résultats sur Internet Explorer, imaginez à chauqe fois la tête: Smiley eek

... Et c'est pour arrêter d'avoir ces têtes là que je m'explique à vous:

En effet, j'ai trouvé un bug de la part de IE, ou bien de moi-même mais je ne pense pas (car sous Mozilla mon site marche). Ce bug est assez étonnant je trouve car il ne colle pas mon conteneur tout à gauche et tout en haut ...
Regardez par vous et comparez avec IE.
Le lien: L'adresses du site

Merci à vous de vos réponses futures.

PS: Si vous n'avez pas encore compris Smiley lol

, c'est comme sous Mozilla que mon site doit s'afficher .

Et je vous donne mon code d'ailleurs Smiley smile

Code XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
        <title>AkrogAmes : Jeux vidéos</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
	 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
	 
<!--[if IE]>
<link type="text/css" rel="stylesheet"  href="design_ie.css" />
<![endif]-->
</head>
<body>

<div class="container">

<div class="img1">
</div>

<div class="img2">
</div>

<div class="img3">
</div>

<div class="img4">
<a href="" ><img src="images/akrojvpsd_04.jpg" /></a>
</div>

<div class="img5">
<a href="" ><img src="images/akrojvpsd_05.jpg" /></a>
</div>

<div class="img6">
<a href="" ><img src="images/akrojvpsd_06.jpg" /></a>
</div>

<div class="img7">
<a href="" ><img src="images/akrojvpsd_07.jpg" /></a>
</div>

<div class="img8">
<a href="" ><img src="images/akrojvpsd_08.jpg" /></a>
</div>

<div class="img9">
<a href="" ><img src="images/akrojvpsd_09.jpg" /></a>
</div>

<div class="img10">
<a href="" ><img src="images/akrojvpsd_10.jpg" /></a>
</div>

<div class="img11">
</div>

<div class="img12">
</div>

<div class="img13">
</div>

<div class="img14">
</div>

<div class="img15"> <!-- Div où l'on peut écrire -->
Als fe,n a fdne a f e kzahf ,ôzgjanùga agôj	gf	 ghoejzhznh zôhjz'  gb'pzighzg hprsjhsehy vfozev
</div>

<div class="img16">
<p> Als a fizhar fvzgfapifhaf vjazifha fapfhapfhaf njçfa fafapohfagf )aghagag aighabg avbgfzpg bàab<br /> oifbhzaofbag ibhag Aibgzibgzag 
UVDaiuvfafbb <a href="">paifhafbafb</a> ....  afhapfa gnjagna<br /><br /> <!-- Div où l'on peut écrire --></p>
<p> Als a fizhar fvzgfapifhaf vjazifha fapfhapfhaf njçfa fafapohfagf )aghagag aighabg avbgfzpg bàab<br /> oifbhzaofbag ibhag Aibgzibgzag 
UVDaiuvfafbb <a href="">paifhafbafb</a> ....  afhapfa gnjagna<br /><br /> <!-- Div où l'on peut écrire --></p>
<p> Als a fizhar fvzgfapifhaf vjazifha fapfhapfhaf njçfa fafapohfagf )aghagag aighabg avbgfzpg bàab<br /> oifbhzaofbag ibhag Aibgzibgzag 
UVDaiuvfafbb <a href="">paifhafbafb</a> ....  afhapfa gnjagna<br /><br /> <!-- Div où l'on peut écrire --></p>
<p> Als a fizhar fvzgfapifhaf vjazifha fapfhapfhaf njçfa fafapohfagf )aghagag aighabg avbgfzpg bàab<br /> oifbhzaofbag ibhag Aibgzibgzag 
UVDaiuvfafbb <a href="">paifhafbafb</a> ....  afhapfa gnjagna<br /><br /> <!-- Div où l'on peut écrire --></p>
<p> Als a fizhar fvzgfapifhaf vjazifha fapfhapfhaf njçfa fafapohfagf )aghagag aighabg avbgfzpg bàab<br /> oifbhzaofbag ibhag Aibgzibgzag 
UVDaiuvfafbb <a href="">paifhafbafb</a> ....  afhapfa gnjagna<br /><br /> <!-- Div où l'on peut écrire --></p>
</div>

<div class="img17"> <!-- Div où l'on peut écrire -->
</div>

<div class="img18"> <!-- Div où l'on peut écrire -->
</div>

<div class="img19"> <!-- Div où l'on peut écrire -->
</div>

<div class="img20">
</div>

<div class="img21"> <!-- Div où l'on peut écrire -->
</div>

<div class="img22">
</div>

<div class="img24">
</div>


<div class="avatar">
</div>

</div>

</body>
</html>

Code CSS:

Pour IE:


div.container
{
float: left; 
}

div.img3
{
background-image: url('images/akrojvpsd_03.jpg');
height: 30px;
width: 153px;
margin-left: 50px;
}

div.img4
{
margin-left: 153px;
margin-top: -30px;
}

div.img5
{
margin-left: 227px;
margin-top: -30px;
}

div.img6
{
margin-left: 307px;
margin-top: -30px;
}

div.img7
{
margin-left: 391px;
margin-top: -30px;
}

div.img8
{
margin-left: 547px;
margin-top: -30px;
}

div.img9
{
margin-left: 627px;
margin-top: -30px;
}

div.img10
{
margin-left: 695px;
margin-top: -30px;
}

div.img11
{
background-image: url('images/akrojvpsd_11.jpg');
height: 30px;
width: 189px;
position: absolute;
margin-left: 811px;
margin-top: -30px;
}

div.img12
{
background-image: url('images/akrojvpsd_12.jpg');
height: 27px;
width: 1000px;
margin-left: 50px;
}


div.img24_ie
{
background-image: url('images/akrojvpsd_25.jpg');
height: 789px;
width: 21px;
position: absolute;
margin-left: 1050px;
margin-top: -171px;
}

div.avatar
{
background-image: url('images/avatar.jpg');
height: 84px;
width: 87px;
margin-left: 0px;
margin-top: 0px;
}

Pour les autres navigateurs:


body
{
background-color: rgb(60,83,114);
}

div.container
{
float: left;
margin-left: -10px;
}

div.img1
{
background-image:url('images/akrojvpsd_01.jpg');
height: 800px;
width: 60px;
margin-left: -10px;
margin-top: -10px;
}

div.img2
{
background-image: url('images/akrojvpsd_02.jpg');
height: 139px; 
width: 1000px;
margin-top: -797px;
margin-left: 50px;
}

div.img3
{
background-image: url('images/akrojvpsd_03.jpg');
height: 30px;
width: 153px;
margin-left: 50px;
}

div.img4
{
position: absolute;
margin-left: 203px;
margin-top: -30px;
}

div.img5
{
position: absolute;
margin-left: 277px;
margin-top: -30px;
}

div.img6
{
position: absolute;
margin-left: 357px;
margin-top: -30px;
}

div.img7
{
position: absolute;
margin-left: 441px;
margin-top: -30px;
}

div.img8
{
position: absolute;
margin-left: 597px;
margin-top: -30px;
}

div.img9
{
position: absolute;
margin-left: 677px;
margin-top: -30px;
}

div.img10
{
position: absolute;
margin-left: 745px;
margin-top: -30px;
}

div.img11
{
background-image: url('images/akrojvpsd_11.jpg');
height: 30px;
width: 189px;
margin-left: 861px;
margin-top: -30px;
}

div.img12
{
background-image: url('images/akrojvpsd_12.jpg');
height: 27px;
width: 1000px;
margin-left: 50px;
}

div.img13
{
background-image: url('images/akrojvpsd_13.jpg');
height: 24px;
width: 364px;
margin-left: 50px;
}

div.img14
{
background-image: url('images/akrojvpsd_14.jpg');
height: 24px;
width: 1px;
margin-left: 414px;
margin-top: -24px;
}

div.img15
{
background-image: url('images/akrojvpsd_15.jpg');
height: 23px;
width: 635px;
margin-left: 415px;
margin-top: -24px;
color: white;
}

div.img16
{
background-image: url('images/akrojvpsd_16.jpg');
height: 553px;
width: 635px;
margin-left: 415px;
}

div.img17
{
background-image: url('images/akrojvpsd_17.jpg');
height: 207px;
width: 365px;
margin-left: 50px;
margin-top: -552px;
}

div.img18
{
background-image: url('images/akrojvpsd_18.jpg');
height: 27px;
width: 365px;
margin-left: 50px;
}


div.img19
{
background-image: url('images/akrojvpsd_19.jpg');
height: 256px; 
width: 364px;
margin-left: 50px;
}

div.img20
{
background-image: url('images/akrojvpsd_20.jpg');
height: 318px;
width: 1px;
margin-left: 414px;
margin-top: -256px;
}

div.img21
{
background-image: url('images/akrojvpsd_21.jpg');
height: 62px;
width: 364px;
margin-left: 50px;
margin-top: -62px;
}

div.img22
{
background-image: url('images/akrojvpsd_22.jpg');
height: 28px;
width: 1000px;
margin-left: 50px;
margin-top: -2px;
}

div.img24
{
background-image: url('images/akrojvpsd_24.jpg');
height: 799px;
width: 21px;
position: absolute;
margin-left: 1050px;
margin-top: -171px;
}

div.avatar
{
background-image: url('images/avatar.jpg');
height: 84px;
width: 87px;
margin-left: 60px;
margin-top: -336px;
}

a img { /* Suppression des bordures-liens de toutes les images avec un lien hypertexte. */
border:0;
}

p
{
margin-top: -1px;
text-indent: 10px;
}

a 
{
color: rgb(231, 170, 72);
text-decoration: none;
}

a:hover
{
text-decoration: underline; 
}

Je vous remercie encore . Désolé de la longueur du message.
Modifié par akrogamers (19 Aug 2007 - 23:51)

Tymlis

20 Aug 2007 à 09:06

Hello,

IE ajoute des marges autour de ses pages, précise simplement dans ton body { } un


padding:0px;
margin:0px;

et ces écarts devraient disparaitre.

akrogamers

20 Aug 2007 à 13:52

Merci beaucoup, je ne le savais pas.
Maintenant, c'est tout bien collé, grâce à toi ^^ ... Smiley lol

Merci encore, akrogamers Smiley smile

Sujet clos

CSS et mise en forme, CSS3

IE ne colle pas mon conteneur comme sous Mozilla.