Text in Transparent Box align problem in IE

**iv4o** · 02-22-2010, 02:13 PM

Hi,
Im trying to add Text in Transparent Box but i have some problem with IE7 position if the browser is not in maximize window. My div.transbox and div.transbox p dont resize with the window (: this make the box and text appear outline the body in unmaximize window in IE. Any suggestions what to do ?

url:// http://deli.webuda.com

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=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>DF-consulting</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body> 
<div id="maincontainer">
<div id="contentwrapper">
<div class="header_top"><div class="header_intro">"DF Consulting, amenagement bureaux, spaceplanning, formation autocad, projet mobilite, i.transferts"<p></p>"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"</div><h1> Les spécialistes de l'espace</h1><div class="innertube"></div></div>
<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="contentcolumn">
<div class="innertube"><h1 align="right">Présentation</h1></div>
<h3>&nbsp;&nbsp;La priorité de DF Consulting</h3>
   <div class="background">
    <div class="transbox"> 
     <p>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>
<h3>&nbsp;&nbsp;Ses services</h3>
<div class="background">
 <div class="transbox">
   <p><font color="#f88205">Les projets de mobilité :</font>&nbsp;&nbsp;Adapter des méthodes spécifiques dans le cadre :</p>
     <ul>
       <li>  de mobilité interne en gestion courante : 1 à 10 salariés</li>
       <li>  de mobilité en mode projet : 10 à 2 000 salariés : réorganisation d’entreprise , fusion interentreprises</li>
     </ul> 
   <p><font color="#f88205">Le space planning :</font>&nbsp;&nbsp;Proposer des emménagements d’espaces dans le cadre : </p>
     <ul type="circle">
       <li>  de locaux occupés à réorganiser</li>
       <li>  de locaux vides : en rénovation ou en construction</li>
     </ul> 
   <p><font color="#f88205">  L'outil i.Transferts® :</font>&nbsp;&nbsp;Collecter, sélectionner et gérer tous les types d’informations liées : </p>
     <ul type="disc">
       <li>  au projet de mobilité</li>
       <li>  a la gestion logistique des salariés</li>
     </ul> 
   <p><font color="#f88205">Former et Conseiller :</font>&nbsp;&nbsp;Adapter des programmes de formation Autocad en fonction :</p>
     <ul type="upper-roman">
       <li>  des objectifs souhaités</li>
       <li>  du niveau des stagiaires</li>
     </ul>
 </div>
</div>
<h3>&nbsp;&nbsp;Ses Clients</h3>
<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>

Code:

* {
font-family: Verdana, sans-serif;
font-size: 13px;
}

body{
margin:0 auto;
width: 1200px;
background-color: #eee4c6;
line-height: 1.5em;
border-top: 0;
border: 1px solid #96907d;
border-bottom: 0;
}

h1 {color:#c8332a;font-size:150%;}
h3 {color:#c8332a;}

#maincontainer{
overflow: auto;
width: 0 auto; /*Width of main container*/
background-color: #ffffff;
margin: 0 auto; /*Center container on page*/
}

.header_top{
position:relative;
font-style: italic;
font: bold 13px Verdana;
color: #ffffff;
background: #F62217;
padding: 10px;
height: 150px; /*Height of top section*/
}

.header_top h1{
font-style: italic;
font: 20px;
color: #ffffff;
padding-top: 100px;
width: 400px;
font-size: 20px;
text-align: 50%;
}

.header_intro{
font-style: italic;
font: bold 13px;
width: 500px;
height: 120px;
padding: 20px 10px;
color: #ffffff;
float: right;
}

#contentwrapper{
width: 100%;
}

#contentcolumn{
padding: 50px 20px 0;
height: 940px;
border-top: solid 3px #fea21a;
border-bottom: solid 3px #fea21a;
margin-left: 230px; /*Set left margin to LeftColumnWidth*/
background-image: url('images/fdp.gif');
background-repeat:repeat-none;
}

#menu_nav{
float:left;
width: 230px;
height: 890px;
padding-top: 100px;
text-decoration: none;
background: #fea21a;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
}

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

#menu_nav a:hover{
color: #423f37;
text-transform:uppercase;
text-decoration: underline;
border-bottom: 3px solid #f62217;
}

#footer{
clear: center;
border-left: solid 5px #f62217;
border-right: solid 5px #f62217;
padding: 10px 1px;
height: 20px;
background-color: #f62217;
text-align: center;
}

#footer a{
font: bold 13px Verdana;
color: #ffffff;
text-decoration: none;
}

#footer a:hover{
text-decoration:underline;
}

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

div.transbox
{
position:relative;
width: auto;
margin: 0 auto;
background-color: transparent;
border: 1px solid #96907d;
/* for IE*/
filter:alpha(opacity=60);
/* CSS3 standart*/
opacity:0.9;
}

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

**simcomedia** · 02-22-2010, 04:27 PM

Try changing the width of your .transbox to a percentage like 90%. Keep in mind that margins, padding and borders add to the width. Therefore when you use a fixed width, as an example, of 400px then add 40px of padding then 30px of margin the actual width is 540px;

**iv4o** · 02-22-2010, 06:18 PM

Thank you for the reply simcomedia

Here is what i did to fix the problem:

I remove the position from the class and add margin: 30px; to center the box.
Second, i add in pixels the weight of the transbox. The result been the same as if i add the weight in percentage (92%) i keep the percentage as simcomedia advice me to try. I also saw another problem with IE, my last transbox on the page appear without padding, any advice how to solve the problem?

Thread: Text in Transparent Box align problem in IE

Thread Tools

Search Thread

Text in Transparent Box align problem in IE

Bookmarks

Bookmarks

Posting Permissions