body position problem with IE6 and IE7

**iv4o** · 01-21-2010, 12:08 PM

Hi all,
I have problem with IE6 and IE7 my body container doesn't appear centered in my page, in IE8 looks fine but in IE6 and 7 the body goes under the menu navigation. Here is the page example http://www.ivo.netau.net , and the encoding seems wrong, i try to add encoding= utf-8 to the header but this doesnt work

Help Please

index.html

HTML Code:

<!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" lang="en" xml:lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DF-consulting</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>
<body> 
<div id="maincontainer">
<div id="menu_nav"> 
<a href="#">Accueil</a>
<a href="#">Les projets de mobilité</a>
<a href="#">Le space planning</a>
<a href="#">L'outil i.Transferts®</a>
<a href="#">Former et Conseiller</a>
<a href="#">Réalisations</a>
<a href="#">Nous contacter</a>
</div>
<div id="header_top"><div class="innertube"><strong><h1 style="text-shadow: black 0.1em 0.1em 0.2em">Les spécialistes de l'espace </h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><h1><p align="right">Présentation</h1></p></div>
<h3>&nbsp;&nbsp;La priorité de DF Consulting</h3>
<div class="shadows">
<div class="background">
<div class="transbox"> 
<p class="myparagraph">Dans une période où l'Entreprise vit de profondes et rapides mutations, la mobilité des salariés contribue à la réussite des changements stratégiques engagés. La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l’Entreprise.</p>
</div>
</div>
</div>
<h3>&nbsp;&nbsp;Ses services</h3>
<div class="shadows">
<div class="background">
<div class="transbox"> 
<ul> 
<p align="left"><font color="#f88205">Les projets de mobilité :</font>Adapter des méthodes spécifiques dans le cadre :</p>
  <li>  de locaux occupés à réorganiser</li>
  <li>  de locaux vides : en rénovation ou en construction</li>
</ul> 
<ul type="circle">
<p align="left"><font color="#f88205">Le space planning :</font>Collecter, sélectionner et gérer tous les types d’informations liées:</p>
 <li>  de locaux occupés à réorganiser</li>
 <li>  de locaux vides : en rénovation ou en construction</li>
</ul> 
<td align="center">
<ul type="disc">
<p align="left"><font color="#f88205">  L'outil i.Transferts® :</font>Collecter, sélectionner et gérer tous les types d’informations liées :</p>
<li>  au projet de mobilité</li>
<li>  a la gestion logistique des salariés</li>
</ul> 
<ul type="upper-roman">
<p align="left"><font color="#f88205">Former et Conseiller :</font>Adapter des programmes de formation Autocad en fonction :</p>
<li>  des objectifs souhaités</li>
<li>  du niveau des stagiaires</li>
</ul>
<br /> 
</div> 
</div>
</div>
<h3>&nbsp;&nbsp;Ses Clients</h3>
<div class="shadows">
<div class="background">
<div class="transbox">
<ul type="lower-alpha"> 
<li>  Les dirigeants des entreprises PME</li>
<li>  Les responsables des services de logistique et d'informatique</li>
<li>  Les responsables des services immobiliers des entreprises</li>
<li>  Les responsables d'Asset Management: valorisation des espaces à la vente ou à la location</li>
</ul>
<br />
</div> 
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">© 2010 DF-consulting.fr</a></div>
</div>
</body>
</html>

style.css

Code:

body{
font: bold 13px Verdana;
font-color: #292421;
margin:0px 50px 0px 50px;
line-height: 1.5em;
background-color: #FFF;
height:100%;
}

* html .body {
text-align:center;
}

h1 {color:#C8332A;}
h3 {color:#C8332A;}

#header_top{
font: bold 13px Verdana;
color: #FFF;
background-image: url('/images/bg.png');
background-repeat: repeat-x;
margin:2px 2px 2px 205px;
/*margin-top: 1px;
margin-left: 207px;*/
padding: 10px;
height: 120px; /*Height of top section*/
border-right: 1px solid #848484;
}

#header_top h1{
color: #FFF;
padding-top: 40px;
font-size: 20px;
}

#contentwrapper{
width: 100%;
}

#contentcolumn{
font: bold 13px Verdana;
text-align: left;
padding: 20px;
height: 1000px;
margin: 1px 2px 1px;
margin-left: 205px; /*Set left margin to LeftColumnWidth*/
background:#d9d9d9;
border-right: 1px solid #848484;
}

#menu_nav{
float:left;
width:200px;
height: 1182px;
margin: 0px 2px 0px 2px;
text-decoration: none;
background-image: url('/images/menu_background.png');
background-repeat: repeat-x;
border-left: 1px solid #848484;
}

#menu_nav a{
font: bold 13px Verdana;
display: block;
padding: 10px;
padding-left: 20px;
color: #292421;
text-decoration: none;
border-bottom: 1px solid #848484;
}

#menu_nav a:hover{
background-color: #f88205;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}

#footer{
clear: center;
margin: 0px 2px 0px 2px;
padding: 4px 1px;
height: 20px;
background-image: url('/images/bg.png');
background-repeat: repeat-x;
color: #000;
text-align: center;
text-shadow: black 0.1em 0.1em 0.2em;
}

#footer a{
color: #FFF;
text-decoration: none;
}

.innertube{
font: bold 13px Verdana;
margin: 0px 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

div.background
{
  width: auto;
  height: auto;
  top: 50px;
  background: url(klematis.jpg) repeat;
  border: 1px white;
}

div.transbox
{
  width: auto;
  height: auto;
  margin: 3px 0px;
  background-color: #FFF;
  border: 1px solid #848484;
  border-style: solid ;
  filter:alpha(opacity=60);
  opacity:0.9;
}

div.transbox p
{
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
}

.shadows{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}

.myparagraph:first-letter {
font-size:200%;
float:left top;
color: #C8332A;
}

**stringcugu** · 01-22-2010, 02:38 AM

see what s looks like
<style>
body{
font: bold 13px Verdana;
font-color: #292421;
margin:0px 50px 0px 50px;
line-height: 1.5em;
background-color: #FFF;
height:100%;
}
* html .body {
text-align:center;
}
h1 {color:#C8332A;}
h3 {color:#C8332A;}
#header_top{
font: bold 13px Verdana;
color: #FFF;
background-image: url('/images/bg.png');
background-repeat: repeat-x;
margin:2px 2px 2px 205px;
/*margin-top: 1px;
margin-left: 207px;*/
padding: 10px;
height: 120px; /*Height of top section*/
border-right: 1px solid #848484;
}
#header_top h1{
color: #FFF;
padding-top: 40px;
font-size: 20px;
}
#contentwrapper{
width: 100%;
}
#contentcolumn{
font: bold 13px Verdana;
text-align: left;
padding: 20px;
height: 1000px;
margin: 1px 2px 1px;
margin-left: 205px; /*Set left margin to LeftColumnWidth*/
background:#d9d9d9;
border-right: 1px solid #848484;
}
#menu_nav{
float:left;
width:200px;
height: 1182px;
margin: 0px 2px 0px 2px;
text-decoration: none;
background-image: url('/images/menu_background.png');
background-repeat: repeat-x;
border-left: 1px solid #848484;
}
#menu_nav a{
font: bold 13px Verdana;
display: block;
padding: 10px;
padding-left: 20px;
color: #292421;
text-decoration: none;
border-bottom: 1px solid #848484;
}
#menu_nav a:hover{
background-color: #f88205;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
#footer{
clear: center;
margin: 0px 2px 0px 2px;
padding: 4px 1px;
height: 20px;
background-image: url('/images/bg.png');
background-repeat: repeat-x;
color: #ccffcc;
text-align: center;
text-shadow: black 0.1em 0.1em 0.2em;
}
#footer a{
//font: bold 13px Verdana;
font-size:20pt;
color: #ccFFcc;
text-decoration: none;
}
.innertube{
font: bold 13px Verdana;
margin: 0px 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}
div.background
{
width: auto;
height: auto;
top: 50px;
background: url(klematis.jpg) repeat;
border: 1px white;
}
div.transbox
{
width: auto;
height: auto;
margin: 3px 0px;
background-color: #FFFccc;
border: 1px solid #848484;
border-style: solid ;
filter:alpha(opacity=60);
opacity:0.9;
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #cc0000;
}
.shadows{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid

XImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
.myparagraph:first-letter {
font-size:200%;
float:left top;
//color: #C8332A;
color: #Ccffcc;
}
</style>

**stringcugu** · 01-22-2010, 02:39 AM

see what this looks like
<body>
<div id="maincontainer">
<div id="menu_nav">
<a href="#">Accueil</a>
<a href="#">Les projets de mobilité</a>

<a href="#">Le space planning</a>
<a href="#">L'outil i.Transferts®</a>
<a href="#">Former et Conseiller</a>
<a href="#">Réalisations</a>
<a href="#">Nous contacter</a>
</div>
<div id="header_top"><div class="innertube"><strong><h1 style="text-shadow: black 0.1em 0.1em 0.2em">Les spécialistes de l'espace </h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><h1><p align="right">Présentation</h1></p></div>

<div id="footer"><a href="http://www.df-consulting.fr">La priorité de DF Consulting</a></div>
<div class="shadows">
<div class="background">
<div class="transbox">
<p class="myparagraph">Dans une période où l'Entreprise vit de profondes et rapides mutations, la mobilité des salariés contribue à la réussite des changements stratégiques engagés. La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l’Entreprise.</p>
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">Ses services</a></div>
<div class="shadows">
<div class="background">
<div class="transbox">
<ul>
<p align="left"><font color="#f88205">Les projets de mobilité :</font>Adapter des méthodes spécifiques dans le cadre :</p>

<li>de locaux occupés à réorganiser</li>
<li>de locaux vides : en rénovation ou en construction</li>
</ul>
<ul type="circle">
<p align="left"><font color="#f88205">Le space planning :</font>Collecter, sélectionner et gérer tous les types d’informations liées:</p>
<li>de locaux occupés à réorganiser</li>
<li>de locaux vides : en rénovation ou en construction</li>
</ul>
<td align="center">

<ul type="disc">
<p align="left"><font color="#f88205">L'outil i.Transferts® :</font>Collecter, sélectionner et gérer tous les types d’informations liées :</p>
<li>au projet de mobilité</li>
<li>a la gestion logistique des salariés</li>
</ul>
<ul type="upper-roman">
<p align="left"><font color="#f88205">Former et Conseiller :</font>Adapter des programmes de formation Autocad en fonction :</p>
<li>des objectifs souhaités</li>
<li>du niveau des stagiaires</li>

</ul>
<br />
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">Ses Clients</a></div>
<div class="shadows">
<div class="background">
<div class="transbox">
<ul type="lower-alpha">
<li>Les dirigeants des entreprises PME</li>
<li>Les responsables des services de logistique et d'informatique</li>
<li>Les responsables des services immobiliers des entreprises</li>

<li>Les responsables d'Asset Management: valorisation des espaces à la vente ou à la location</li>
</ul>
<br />
</div>
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">© 2010 DF-consulting.fr</a></div>
</div>
</body>
</html>

**iv4o** · 01-22-2010, 10:37 AM

Thank u for the codes stringcugu yesterday i fix the possition issues with IE6 & IE7, i just change some positions in the .html file and clean a bit the code. I still have the econding problem (: please somebody to help me.

**molendijk** · 01-22-2010, 02:46 PM

I don't think there's an encoding problem. In the code you give above, you have La priorité de DF Consulting. But the link you provide goes to a page which has La prioritÃ© de DF Consulting in the source.
===
Bonne chance,
Arie Molendijk

**iv4o** · 01-22-2010, 03:30 PM

IE7 showing the encoding wrong , i know for the La prioritÃ© de DF Consulting i just miss to change the "Ã©" to "é" but is not big problem, i will change it later when i finish with the IE7 problems to auto-detect the encoding.
Here i attach one screenshot:

http://img5.imagebanana.com/view/hcf...pcialistes.png

and i have to manually change the encoding to UTF-8 after i load the page.

**molendijk** · 01-22-2010, 05:23 PM

I also see a wrong meta tag in the source of the page referred to by your link. It has <meta http-equiv="content-type" content="""text/ht; charset=UTF-8" >. Replace that with <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
===
Arie.

**iv4o** · 01-23-2010, 10:24 AM

Thanks for the reply molendijk
i correct the wrong meta tag, im surprised i did't see at before

..
For the encoding charset=iso-8859-1 doesn't work and i must keep the encoding UTF-8 to work. What i add now is :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="keywords" content="DF Consulting,amenagement bureaux,spaceplanning,formation autocad,projet mobilite,i.transferts">
<meta name="description" content="La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan
que toutes les actions qui visent à améliorer la productivité dans l'Entreprise">
<title>DF-Consulting.fr</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" >
</head>

and work for now. I just receiving few errors if i try to pass the validator but they are not big deal :P. If anybody have better idea which DOCTYPE to us, please let me know

I fix the problem with IE6 and IE7... by play around with the menu div and now everything looks fine in all the browsers

Thanks

Thread: body position problem with IE6 and IE7

Thread Tools

Search Thread

body position problem with IE6 and IE7

Bookmarks

Bookmarks

Posting Permissions