28173 sujets

CSS et mise en forme, CSS3

Probleme interprétation IE/Firefox (décalage)

Salut à tous!!

Alors voila je suis étudiant et je fais dans le cadre de mon stage la migration d'un intranet en structure frame / tableaux Smiley kc vers une interface full css.

Je dois m'adapter la structure imposée par le groupe. J'ai rencontré un petit probleme de placement sous Internet explorer:

Je place mes éléments en relatif afin qu'ils apparaissent l'un en dessous de l'autre; résultat nickel sous FF mais IE décalle mes éléments Smiley mur

J'ai vérifier mes margin, padding et autres mais je n'ai pas trouvé la cause. Je vous joint le code (je n'ai laissé que l'essentiel).

Code de la page:

<!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>BlaBla Home</title>
   <link rel="stylesheet" type="text/css" href="./main.css" media="screen">
 </head>				
 <body>
  <div id="container">
   <div id="header">  
    <div class="headerbox-left">
    </div>
    <div class="headerbox-center">
     <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Search</a></li>
     </ul>
    </div>
    <div class="headerbox-right">
    </div>
    <div class="headerbox-redbar">
	</div>
   </div>
   <div id="menu-bar">
   </div>
   <div id="content">
    Code de ma page
   </div>	
   <div id="footer">
    <ul>
     <li><a href="">elt 1</a></li>
     <li><a href="">elt 2</a></li>
    </ul>
   </div>
  </div> 
 </body>
</html>


Code de la css:

body, div, ul, li { 
margin: 0; 
padding: 0; 
}

body {
font-family: Arial, Helvetica, sans-serif; 
background-color: #CCC;
}

ul {
list-style-type: none;
}

a {
text-decoration: none;
}

/*******   Container style   *********/
#container {
width: 976px;
margin: 0 auto; 
}

/*********   Header style   *********/
#header {
height: 160px;
background-color: #99CCCC;
}

.headerbox-left {
float: left;
height: 160px;
width: 248px;
background-color: #FFF;
}

.headerbox-center {
float: left;
height: 160px;
width: 248px;
background-color: #000;
}

.headerbox-center ul {
margin: 5px 0 0 7px;
font-size: 0.6em;
color: #FFF;
}

.headerbox-center a {
color: #FFF;
}

.headerbox-center a:hover {
color: #F00;
}

.headerbox-right {
height: 160px;
float: left;
}

.headerbox-redbar {
position: relative; 
height: 23px; 
width: 485px;  
left: 0; 
background-color: #F11A29;
}

/********   Menu  bar style   ********/
#menu-bar {
position: relative;
background-color: #999;
height: 25px;
}

/*********   Content style   ********/
#content {
position: relative;
background-color: #FFF;
}

/*********   Footer style   *********/
#footer {
position: relative;
height: 30px;
background-color: #CCC;
color: #000;
}

#footer ul{
font-size: 0.6em;
}

#footer li {
display: inline;
margin-left: 15px;
}

#footer a{
color: #000;
}


Voila j'espère que quelqu'un pourra m'aider en attendant moi je continue de chercher! Smiley smile
Sujet clos
Aller à