5568 sujets

Sémantique web et HTML

Problème div et float ie

Salut !

J'ai un soucis sur le site que je suis en train de créer. C'est la première fois que je m'attaque a monter un site div/css.
Le problème est le suivant :
Sous ie, le float ne se fais pas, sous firefox et chrome, j'ai un décalage de ma div "corps" de 16 pixel vers le bas, j'ai régler le problème avec un margin-top:-16px; mais je sais pas d'où vient cet écart...
Voilà mon code, le site est visible ici : http://borgoysie.free.fr/asp/
html :
<!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" lang="fr">
<head>
<title>template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>

     <div id="logo">
     </div>
     <div id="menu"><p><a href="">Accueil</a> | <a href="">Les produits</a> | <a href="">Les références</a> | <a href="">Contact</a></p>
     </div>

  <div id="banniere">
  </div>
  <div id="sous_menu"><p><a href="">Présentation</a><br/><a href="">Coordonnées</a></p>
  </div>
  <div id="corps"><p></p>
  </div>
  </body>
</html>

et le css :
@charset "utf-8";
/* CSS Document */

body
{
   width: 942px;
   margin: auto;
   margin-top: 20px;
}

img
{
border:none;
}

#logo
{

height: 132px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
margin-left:450px;
}

#menu
{
text-align:right;
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#33cccc;
}

#menu a
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#33cccc;
text-decoration:none;
}

#menu a:hover
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#99cc00;
text-decoration:none;
}

#banniere
{

height: 100px;
border:2px solid black;
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
}


#sous_menu
{
display: inline;
float:left;
width:164px;
min-width:164px;
height: 450px;
margin-left:44px !important;
margin-left:22px;
border-left:2px solid black;
border-right:2px solid black;
}

#sous_menu a
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#000000;
text-decoration:none;
}

#sous_menu a:hover
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#33cccc;
text-decoration:none;
}

#corps
{
margin-top:-16px;
width: 938px;
height: 450px;
border-left:2px solid black;
border-right:2px solid black;
border-bottom:2px solid black;
}


merci d'avance pour votre aide.
Biroute
Bon ben j'ai réussi tout seul a contourner tous mes problèmes.
Je sais pas comment on met "régler" sur ce forum.
Le problème de décalage des 16 pixel était du a une balise <p></p> en trop, quand au float sous ie, je l'ai réglé en en créant un de plus(enfin moi je me comprend ça fait 4h que je suis dessus....).
Voilà le code actuel :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ASP : Atelier de Signalétique et Publicité</title>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
   <div id="logo"></div>
   <div id="menu"><p><a href="">Accueil</a> | <a href="">Les produits</a> | <a href="">Les références</a> | <a href="">Contact</a></p></div>
  <div id="banniere"></div>
  <div id="t_left"></div>
  <div id="sous_menu"><a href="">Présentation</a><br/><a href="">Coordonnées</a></div>
  <div id="corps"></div>
  </body>
</html>




/* CSS Document */

body
{
   width: 942px;
   margin: auto;
   margin-top: 20px;
}

img
{
border:none;
}

#logo
{

height: 132px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
margin-left:450px;
}

#menu
{
text-align:right;
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#33cccc;
}

#menu a
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#33cccc;
text-decoration:none;
}

#menu a:hover
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#99cc00;
text-decoration:none;
}

#banniere
{

height: 100px;
border:2px solid black;
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
}

#sous_menu a
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#000000;
text-decoration:none;
}

#sous_menu a:hover
{
font-family:Arial, Verdana, serif;
font-size:1.2em;
color:#33cccc;
text-decoration:none;
}

#t_left
{
float:left;
width:42px;
height: 450px;
border-left:2px solid black;
border-bottom:2px solid black;
}

#sous_menu
{
float:left;
width:164px;
height: 450px;
border-left:2px solid black;
border-right:2px solid black;
border-bottom:2px solid black;
}

#corps
{
float: left;
width: 728px;
height: 450px;
border-right:2px solid black;
border-bottom:2px solid black;
}


A bientôt pour de nouvelles aventures XD
Sujet clos
Aller à