Mais qui a inventé IE????

Problème de float sous IE

Sujet résolu

matt99006

8 mars 2007 à 0:49:41

Bonsoir à tous!

Je viens de finaliser mon site sous FF et je viens de me rendre compte qu'IE déformait énormément :-°

/*triste et fatale découverte du newbie*/

Il y a plusieurs petits problèmes: déjà il y a mes liens rigolos-sophistiqués-grace-au-css qui s'affichent mal du genre ca s'affiche au milieu au lieu de s'afficher à droite et quand on met le pointeur dessus ca se barre sur la droite :euh:

...

Mais ca c'est pas trop grave, c'est anodin. J'ai organisé mon site comme sur le tutos: en tete, menu flottant à gauche du corps et footer en bas. Sous FF c'est tout mignion mais sous IE ca donne ceci: de haut en bas: en tete, menu a gauche (rien a droite), corps (rien à gauche), footer. o_O

/*désolation du newbie face à l'anéantissement quasi instantanée de dizaines d'heures de travail acharné*/

Au passage, ce site est ma production de TPE à rendre pour mardi donc je flippe un peu à l'idée de rendre un bout de papier sur lequel est écrit l'adresse de mon site avec comme note de bas de page: POUR PROFITER PLEINEMENT DES CAPACITES GRAPHIQUES DE NOTRE SITE, IL EST IMPERATIF D'UTILISER MOZILLA FIREFOX.

Merci de votre aide!

Matt

serial

8 mars 2007 à 0:51:58

a tient mo aussi j'avais fait un site a l'epoque!....

euh ben la pour t'aider c pas facile....pas de source pas d'adresse enfin pas grand chose quoi!

A++

matt99006

8 mars 2007 à 1:05:17

Voila mon code HTML, j'ai enlevé tout ce qu'il y a dans le #corps, c'est que des titres et des paragraphes et ca prend plein de place..

<!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>Accueil - La plongée sous-marine - TPE 2007</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/design.css" />
</head>

<body>
<div id="en_tete"></div>

<div id="menu">

<div class="element_menu">
   <a href="index.html"><h3>Accueil</h3></a>
</div>

<div class="element_menu">
   <h3>Physique</h3>
   <ul>
   <li><a href="lois_physiques.html">Lois physiques</a></li>
   <li><a href="contraintes_physiques.html">Contraintes physiques</a></li>
   <li><a href="solutions.html">Solutions techniques et médicales</a></li>
   </ul>
</div>

<div class="element_menu">
   <h3>Médecine</h3>
   <ul>
   <li><a href="barotraumatismes.html">Barotraumatismes</a></li>
   <li><a href="ivresse.html">Ivresse des profondeurs</a></li>
   <li><a href="maladies.html">Maladies de décompression</a></li>
   </ul>
</div>

<div class="element_menu">
   <h3>Histoire</h3>
   <ul>
   <li><a href="naissance.html">La naissance de la plongée</a></li>
   <li><a href="personnages.html">Les grands personnages de la plongée</a></li>
   </ul>
</div>

<div class="element_menu">
   <h3>Art</h3>
   <ul>
   <li><a href="cinématographie.html">Cinématographie</a></li>
   <li><a href="litterature.html">Litterature</a></li>
   </ul>
</div>
</div>

<div id="corps">

<img src="design/fond_accueil.jpg" alt="Fonds sous-marins" id="image"/>

</div>

<div id="pied_de_page">
<a href="mailto:linus_240@hotmail.com">Nous contacter</a>
</div>

</body>

</html>

Et voila le code css qui va avec

/*Général*/
p
{
text-align: justify;
font-family: "comic sans ms", serif;
}

q { font-style: italic; }
a:hover { font-style: italic;}
.blue{color:blue;}

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #d1d8ed;
}

img
{
border: 0px;
padding: 0px;
margin: 15px;
}

/*En-tête*/
#en_tete
{
width: 800px;
height: 197px;
margin-bottom: 20px;
background-image: url('titre.jpg');
border-right: 2px solid black;
border-bottom: 2px solid black
}

/*Pied de page*/
#pied_de_page
{
width: 800px;
height: 120px;
margin-top:20px;
margin-bottom: 20px;
background-image: url('pied.jpg');
border-right: 2px solid black;
border-bottom: 2px solid black
}

/*Menu*/
#menu a
{
font-family: "comic sans ms", "Times new roman", serif;
font-weight: bold;
color:#dcdde4;
text-decoration: none;
font-size: small;
}

#menu a h3
{
color:black;
}

#menu a:visited
{
color:black;
}

h3
{
text-indent:20px;
font-family:arial, "times new roman", serif;
font-size:4mm;
color:black;
}

h3:first-letter
{
color:#d58935;
font-size: x-large;
font-weight: bold;
}

#menu
{
float: left;
width: 175px;
margin-right:15px;
}

.element_menu
{
border-right: 2px solid black;
border-bottom: 2px solid black;
margin-bottom: 20px;
padding: 5px;
background-image: url('menu.jpg');

}

/*corps*/
#corps
{
margin-top: 0px;
margin-left: 195px;
margin-bottom: 0px;
padding: 7px;
background-image:url('body.jpg');
background-repeat:repeat-y;
border-right:2px solid black;
border-bottom:2px solid black;
width: 592px
}

Anonyme

8 mars 2007 à 6:38:06

Est-ce que tu peut donner un lien, si tu en a un bien sûr

A+

Dudu

8 mars 2007 à 6:56:27

Utilise une feuille de style pour chaque Bowser (FF et IE)

matt99006

8 mars 2007 à 12:29:02

Voila:

http://website.hebergement.lycos.fr/www.plongeeautonome.fr/

Je viens juste de le mettre en ligne, vous êtes les premiers à y aller. Vous verrez la difference est flagrande entre FF et IE

Et si vous voulez le css:
http://website.hebergement.lycos.fr/www.plongeeautonome.fr/design/design.css

Citation : dudu

Utilise une feuille de style pour chaque Bowser (FF et IE)

N'est ce pas un problème plus simple?

Merci de votre aide!

Felor

8 mars 2007 à 12:36:44

Citation

Citation : dudu

Utilise une feuille de style pour chaque Bowser (FF et IE)

N'est ce pas un problème plus simple?

C'est une des solutions en tout cas

Anonyme

8 mars 2007 à 12:44:34

ca m'avait fait la meme chose,rajoute un </div>
à la fin du corps,il remontera!
mais c'est pas valide....

matt99006

8 mars 2007 à 12:52:45

Citation : lucaslezer0

ca m'avait fait la meme chose,rajoute un </div>
à la fin du corps,il remontera!

J'ai déjà un </div> pour fermer <div id="corps">! o_O

MilkaMac

8 mars 2007 à 13:08:05

J'ai le même problème que toi sous IE pour PC

Candygirl

8 mars 2007 à 13:10:44

Tu donnes un width de 760px à ton body. Si on aditionnes la largeur de ton corps + la marge gauche + le padding + la bordure droite:
592 + 195 + 14 + 2 = 803px

Donc autrement plus large que les 760 du body d'où la décision de IE de placer le corps en-dessous puisqu'il estime qu'il n'y a pas la place.

Ensuite, une fois tes dimensions revues, je te conseille de positionner ton corps en float:right plutôt qu'avec une marge (et en ajoutant un clear:both sur ton footer), tu éviteras ainsi le bug des 3px sur IE6.

autrement tu ne peux pas mettre une balise h3 à l'intérieur d'un lien. (cf ton menu)

matt99006

8 mars 2007 à 14:05:31

Problème résolu! Merci beaucoups Candygirl.

Pour tous les autres petits bugs je vais tout simplement revoir tout mon html parce que je suis d'accord que le h3 à l'interieur des <a> c un peu du bricolage. ..

Encore merci!