28173 sujets

CSS et mise en forme, CSS3

Hello,
j'ai un petit probleme avec IE ( comme d'hab )...
J'ai un menu que j'affiche sur m'a page en positon absolue car il se supperpose a un flash.. De temps en temps ( il n'y a pas de régles precises pour afficher ce bug ) et uniquement sur IE 6 et 7, quand je reviens sur cette page qui contient ce menu en faisant des back-1 via le navigateur le menu a purement et simplement disparu hors que la css est bien chargée vu que le reste de la page est bien affiché et l' html du menu et du reste de la page est bien présent ...

Quelqu'un aurait une idée d'ou cela pourrait il venir ?

Merci d'avance ...
Juste
voici le code HTML, ce qui ne s'affiche pas ce sont les div qui porte comme id : menuFirstlevel et menuSecondlevel

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
@import url("design/css/style.css");
-->
</style>
<script src="Scripts/functions.js" type="text/javascript"></script>
</head>

<body>

	<div id="header">
		<div id="headerContent">
			<div id="logo"><a href="#"><img src="design/images/header/logo.jpg" alt="" width="262" height="95" /></a></div>
			<div id="topTools">
				<div id="topLink"><a href="#">Sitemap</a></div>
				<div id="search">
					Search <input type="text" value="" name="0" /> in 
					<select name="">
						<option>Site</option>
						<option>Support</option>
					</select>
					<a href="#"><img src="design/images/content/btn_go.gif" alt="" /></a>			
				</div>
				<div id="lang"><a href="#">fr</a> | <a href="#">nl</a> | <a href="#">de</a></div>
			</div>
			<div class="clr"></div>
		</div>
	</div>
	
	<div id="menuFirstlevel">
		<ul>
			<li><a href="#" class="firstItem"><img src="design/images/topMenu/en/menu/private_on.jpg" alt="" /></a></li>
			<li onmouseover="javascript:menuVisibility(this,'professional')" onmouseout="javascript:menuVisibility(this,'professional')"><a href="#"><img src="design/images/topMenu/en/menu/professional_off.jpg" width="187" height="29" alt="" id="professional" /></a>
				<ul>
					<li><a href="#" onmouseout="swapImage('sme_selfEmp')" onmouseover="swapImage('sme_selfEmp')"><img src="design/images/topMenu/de/submenu/sme_selfEmp_off.gif" id="sme_selfEmp" alt="" /></a></li>
					<li><a href="#" onmouseout="swapImage('largeEnt')" onmouseover="swapImage('largeEnt')"><img src="design/images/topMenu/de/submenu/largeEnt_off.gif" id="largeEnt" alt="" /></a></li>
					<li><a href="#" onmouseout="swapImage('wholesale')" onmouseover="swapImage('wholesale')"><img src="design/images/topMenu/de/submenu/wholesale_off.gif" id="wholesale" alt="" /></a></li>
				</ul>
			</li>
			<li><a href="#" onmouseout="swapImage('bgcGroup')" onmouseover="swapImage('bgcGroup')"><img src="design/images/topMenu/en/menu/bgcGroup_off.jpg" width="187" height="29" alt="" id="bgcGroup" /></a></li>
		</ul>
	</div>

	<div id="menuSecondlevel">
		<ul>
			<li class="firstItem"><a href="#">packs</a></li>
			<li><a href="#">telephony</a></li>
			<li><a href="#">internet</a></li>
			<li><a href="#">television</a></li>
			<li><a href="#">mobile</a></li>
			<li><a href="#">promotions</a></li>
			<li><a href="#">e-services</a></li>
			<li class="lastItem"><a href="#">newsletters</a></li>
		</ul>
	</div>

	<table cellpadding="0" cellspacing="0" border="0" id="container">
		<tr>
			<td id="left"><div>&nbsp;</div></td>
			<td id="middle">
				<div id="content">
					<div id="leftContent">
						<div id="flashPromos">
							<script type="text/javascript">
								AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','683','height','255','src','flash/flashPromos','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','flash/flashPromos', 'flashvars' ,'path=flash/&promos1=un.swf&promos2=deux.swf&promos3=trois.swf&promos4=quatre.swf' ); //end AC code
							</script>
							<noscript>
								<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="683" height="255">
									<param name="movie" value="flash/flashPromos.swf" />
									<param name="quality" value="high" />
									<param name="wmode" value="transparent" />
									<param name="flashvars" value="path=flash/&promos1=un.swf&promos2=deux.swf&promos3=&promos4=" />
									<embed src="flash/flashPromos.swf" flashvars="path=flash/&promos1=un.swf&promos2=deux.swf&promos3=&promos4=" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="683" height="255" wmode="transparent"></embed>
								</object>
							</noscript>
						</div>
						<div id="webDeals">
						
							<div id="titleWebDeals">
								<h1>Belgacom web deals</h1>
							</div>
							
							<div>
								
								<div class="webDealHeadingContainer">
									<div class="webDealsHeading">
										<img src="design/images/content/picto/telephony.gif" alt="" />
										<h1>telephony</h1>
										<div class="link"><a href="#">Consult the whole telephony product range</a></div>
									</div>
									<div class="webDealsHeading">
										<img src="design/images/content/picto/internet.gif" alt="" />
										<h1>internet</h1>
										<div class="link"><a href="#">Consult the whole internet product range</a></div>
									</div>
									<div class="clr"></div>
								</div>
									
								<div class="webDealContentContainer">	
									<div class="webDealsContent">
										<div class="webDealsContentBg">
											<div class="illu"><a href="#"><img src="design/content/bgc_hhomeDEFINITIVE4_30.jpg" alt="" /></a></div>
											<div class="description">
												<h2><a href="#">Twist 917</a></h2>
												<div class="info">
													<p>A new, high-range cordless phone with a sleek design.cordless phone with a sleek design.</p>
													<a href="#" class="moreInfo"><span>></span> more info</a>
												</div>
												<div class="price"><sup>€</sup>129.95 <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
												<span>instead of <span>€ 149.95</span></span>										
											</div>
											<div class="clr"></div>
										</div>
									</div>
									
									<div class="webDealsContent">
										<div class="webDealsContentBg">
											<div class="illu"><a href="#"><img src="design/content/bgc_hhomeDEFINITIVE4_32.jpg" alt="" /></a></div>
											<div class="description">
												<h2><a href="#">Wireless modem</a></h2>
												<div class="info">
													<p>Wireless range up to 30m inside;</p>
													<a href="#" class="moreInfo"><span>></span> more info</a>
												</div>
												<div class="price"><sup>€</sup>105.00 <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
												<span>instead of <span>€ 149.95</span></span>									
											</div>
											<div class="clr"></div>
										</div>
									</div>
									
									<div class="clr"></div>
								</div>
								<div class="footerWebDealsBox"></div>
								
								<div class="webDealHeadingContainer">
									<div class="webDealsHeading">
										<img src="design/images/content/picto/telephony.gif" alt="" />
										<h1>television</h1>
										<div class="link"><a href="#">Consult the whole telephony product range</a></div>
									</div>
									<div class="webDealsHeading">
										<img src="design/images/content/picto/internet.gif" alt="" />
										<h1>internet</h1>
										<div class="link"><a href="#">Consult the whole internet product range</a></div>
									</div>
									<div class="clr"></div>
								</div>
									
								<div class="webDealContentContainer">	
									<div class="webDealsContent">
										<div class="webDealsContentBg">
											<div class="illu"><a href="#"><img src="design/content/bgc_hhomeDEFINITIVE4_30.jpg" alt="" /></a></div>
											<div class="description">
												<h2><a href="#">mobile</a></h2>
												<div class="info">
													<p>A new, high-range cordless phone with a sleek design.</p>
													<a href="#" class="moreInfo"><span>></span> more info</a>
												</div>
												<div class="price"><sup>€</sup>129.95 <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
												<span>instead of <span>€ 149.95</span></span>										
											</div>
											<div class="clr"></div>
										</div>
									</div>
									
									<div class="webDealsContent">
										<div class="webDealsContentBg">
											<div class="illu"><a href="#"><img src="design/content/bgc_hhomeDEFINITIVE4_32.jpg" alt="" /></a></div>
											<div class="description">
												<h2><a href="#">Wireless modem</a></h2>
												<div class="info">
													<p>Wireless range up to 30m inside;<br />Wireless range up to 30m inside;<br></p>
													<a href="#" class="moreInfo"><span>></span> more info</a>
												</div>
												<div class="price"><sup>€</sup>105.00 <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
												<span>instead of <span>€ 149.95</span></span>									
											</div>
											<div class="clr"></div>
										</div>
									</div>
									
									<div class="clr"></div>
								</div>
								<div class="footerWebDealsBox"></div>
															
							</div>
							
							
							
						</div>
					</div>
					<div id="rightContent">
						<div id="customerZone">
							<div id="headerCustomerZone"><img src="design/images/content/en/titleCustomerZone.gif" alt="" /></div>
							<div id="contentCustomerZone">
								<div id="myEservices">
									<h1><a href="#">my e-services</a></h1>
									
									<div id="login">
										<p><label>Login</label><input type="text" name="0" value="" /></p>
										<p><label>Password</label><input type="text" name="0" value="" /> <a href="#"><img src="design/images/content/goBtnCZ.gif" alt="" /></a></p>
										<div>
											<a href="#" class="loginLink"><span>></span> register</a><br />
											<a href="#" class="loginLink"><span>></span> forgotten login/password</a>										
										</div>
									</div>
								</div>
								<div id="onlineServices">
									<h1><a href="#">online services</a></h1>
									<p>
										<a href="#" class="linkList"><span>></span> see my last bill</a><br />
										<a href="#" class="linkList"><span>></span> manage my internet account</a><br />
										<a href="#" class="linkList"><span>></span> my Belgacom</a><br />
									</p>
									<div class="allLink"><a href="#">>> all e-services</a></div>
								</div>
								<div id="onlineSupport">
									<h1><a href="#">online support</a></h1>
									<p>
										<a href="#" class="linkList"><span>></span> see my last bill</a><br />
										<a href="#" class="linkList"><span>></span> manage my internet account</a><br />
										<a href="#" class="linkList"><span>></span> my Belgacom</a><br />
									</p>
									<div class="allLink"><a href="#">>> go to online support</a></div>
								</div>
							</div>
							<div id="footerCustomerZone"></div>
						</div>
						<div id="comZone"><a href="#"><img src="design/content/banner.jpg" alt="" /></a></div>
						<div id="otherWebSite">
							<h1>Other belgacom's websites</h1>
							<a href="#"><img src="design/content/proximus.gif" alt="" /> <span>Proximus</span></a>
							<a href="#"><img src="design/content/bgcTV.gif" alt="" /> <span>Belgacom TV</span></a>
							<a href="#"><img src="design/content/telindus.gif" alt="" /> <span>Telindus Belgacom ICT</span></a>						
						</div>
					</div>
					<div class="clr"></div>
				</div>			
			</td>
			<td id="right"><div>&nbsp;</div></td>
		</tr>
	</table>
	
<div id="footer">
		All rights reserved, Belgacom 2006. | <a href="#">Legal Warnings</a> - <a href="#">Privacy Policy</a> - <a href="#">Company data</a>.<br />
		This site was created and is managed in accordance with Belgian law. Boulevard du Roi Albert II, 27 - B-1030 Brussels.	
</div>
	
</body>
</html>



et voici la css



/*
 *	General style
 */
 
body{ padding:0 0 18px 0; margin:0; font:11px Arial, Helvetica, sans-serif; background:#f8f8fa}
.clr{ clear:both; padding:0; margin:0; height:0; font-size:0; line-height:0}
ul,li, h1, h2, p{ margin:0; padding:0}
	
	/*
	 *	Header
	 */
	 
	#header{ width:100%; height:95px; background:#57A2DB}
		#headerContent{ width:936px; margin:0 auto}
			#headerContent input,#headerContent select{ vertical-align:middle}
			#headerContent img{ border:none}
			#headerContent #logo{ float:left; width:150px;}
			
			#headerContent #topTools{ float:right; width:520px; margin-top:10px; color:#FFF}
				#headerContent #topTools #topLink{ float:left; width:111px}
				html*#headerContent #topTools #topLink{ *padding-top:3px; _padding-top:2px;}
					#headerContent #topTools #topLink a,
					#headerContent #topTools #topLink a:link,
					#headerContent #topTools #topLink a:active,
					#headerContent #topTools #topLink a:visited{ background:url(../images/header/arrowHeader.gif) no-repeat left; color:#fff; padding-left:8px; text-decoration:none}
					#headerContent #topTools #topLink a:hover{ text-decoration:underline}
				#headerContent #topTools #search{ float:left; margin-right:20px; width:280px;}
					#headerContent #topTools #search img{ vertical-align:middle}
					#headerContent #topTools #search input{ width:98px; font-size:11px; color:#fff; background:url(../images/header/bgInput.gif) repeat-x; padding:1px 3px; margin:0 4px; border:1px solid #fff}
					#headerContent #topTools #search select{ font-size:11px; background:#00A3DE; color:#fff; border:1px solid #fff}
						#headerContent #topTools #search option{ font-size:11px;}
				#headerContent #topTools #lang{ float:left; text-align:right; color:#fff; padding:2px 20px 0 0; margin:0 0 0 15px; width:65px}
					#headerContent #topTools #lang a,
					#headerContent #topTools #lang a:link,
					#headerContent #topTools #lang a:active,
					#headerContent #topTools #lang a:visited{ color:#fff; text-decoration:none}
					#headerContent #topTools #lang a:hover{ text-decoration:underline}
			/*
			 *	Menu
			 */
			
			#menuFirstlevel img,#menuSecondlevel img{ border:none}
				/* First Nav */
				#menuFirstlevel{ position:absolute; z-index:100; left:50%; margin:-29px 0 0 -280px; width:561px;}
					#menuFirstlevel ul{margin:0; padding:0; list-style-type:none; display:block; float:left;}
					#menuFirstlevel ul li{position:relative; display:inline; float:left; margin:0; text-align:center}
						#menuFirstlevel ul li ul{left:0; padding:0; margin-top:-3px; position:absolute; z-index:100; width:187px; visibility:hidden}
						html*#menuFirstlevel ul li ul{ _margin-top:29px; *margin-top:29px;}
							#menuFirstlevel ul li ul li{ float:none; display:block; z-index:100; font-size:0; line-height:0;}
				
				/* Second Nav */
				#menuSecondlevel{ position:absolute; width:936px; padding-top:1px; left:50%; margin-left:-468px; background:url(../images/topMenu/spaceLineMenu.gif) center top no-repeat;}
					#menuSecondlevel ul{left:0; padding:0; min-width:150px; height:30px; background:url(../images/topMenu/bgSecondNav.gif) repeat-x;}
						#menuSecondlevel ul li{ width:117px; text-align:center; float:left; list-style:none}
							#menuSecondlevel ul li.firstItem{ background:url(../images/topMenu/bgLeftSecondNav.gif) no-repeat left;}
							#menuSecondlevel ul li a,
							#menuSecondlevel ul li a:link,
							#menuSecondlevel ul li a:active,
							#menuSecondlevel ul li a:visited{ color:#FFF; font-size:13px; padding-top:5px; background:url(../images/topMenu/separatorSecondNav_25.gif) no-repeat right; font-weight:bold; display:block; height:25px; text-decoration:none}
							#menuSecondlevel ul li a:hover{ color:#002b8f}
							#menuSecondlevel ul li.lastItem{ background:url(../images/topMenu/bgRightSecondNav.gif) no-repeat right;}
								#menuSecondlevel ul li.lastItem a,
								#menuSecondlevel ul li.lastItem a:link,
								#menuSecondlevel ul li.lastItem a:active,
								#menuSecondlevel ul li.lastItem a:visited{ background:none;}
								
					
				
	/*
	 *	Content
	 */
	 
	#container{ width:100%; float:left; margin-top:-2px; background:url(../images/content/bgContainer.gif) repeat-x top}
	html*#container{ margin-top:1px;}
		#left, #middle, #right{ width:33%; vertical-align:top}
		#left div{ float:right; height:255px; width:100%; background:url(../images/content/left.jpg) no-repeat top right;}
		#right div{ float:left; height:255px; width:100%; background:url(../images/content/right.jpg) no-repeat top left;}
		#middle{}
			#content{ width:936px;}
			
			 /*
			  *	Left Content
			  */
			  
				#leftContent{ float:left; width:683px; background:url(../images/content/bg_left.jpg) no-repeat top;}
				
					/* 
					 *	Flash Banner
					 */
					
					#flashPromos{}
					
					/*
					 *	Web deals
					 */
					 
					#webDeals{margin-top:20px; padding-left:6px;}
							#webDeals #titleWebDeals{}
								#webDeals #titleWebDeals h1{ position:absolute; margin:-21px 0 0 10px; font-size:24px; color:#bcbcbc;}
							
							.webDealHeadingContainer{}
								.webDealsHeading{ float:left; margin:22px 0 0 13px;}
									.webDealsHeading img{ float:left; vertical-align:middle}
									.webDealsHeading h1{ float:left; font-size:20px; margin:3px 0 0 5px; color:#3157a8;}
									.webDealsHeading .link{ clear:both; width:290px; _width:289px; padding:0 0 0 30px;}
										.webDealsHeading .link a,
										.webDealsHeading .link a:link,
										.webDealsHeading .link a:active,
										.webDealsHeading .link a:visited{ background:url(../images/content/arrowLinkContent.gif) transparent no-repeat left; padding-left:10px; color:#666; text-decoration:none}
										.webDealsHeading .link a:hover{ text-decoration:underline}
								  
								div[class="webDealContentContainer"]{background:url(../images/content/bgWebdealsContainer.gif) 2px top repeat-y;}
								html*.webDealContentContainer{_background:url(../images/content/bgWebdealsContainerIE6.gif) 5px top repeat-y;}
									.webDealsContent{float:left; margin:0 5px; _margin:0 4px; padding:0 3px; background:url(../images/content/bgBorderWebDealsBox1.jpg) repeat-x top; width:321px; _width:320px; min-height:159px; _height:159px;}
									.webDealsContentBg{background:url(../images/content/bgBorderWebDealsBox2.jpg) repeat-x top;}

										.webDealsContent .illu{ width:115px; padding:10px 0 0 5px; float:left; font-size:0; line-height:0}
											.webDealsContent .illu img{ border:none;}
										.webDealsContent .description{ float:left; width:198px;}
											.webDealsContent .description h2{ font-size:18px; padding:15px 0 0 0;}
												.webDealsContent .description h2 a,
												.webDealsContent .description h2 a:link,
												.webDealsContent .description h2 a:active,
												.webDealsContent .description h2 a:visited{ color:#5ca3db; text-decoration:none}
												.webDealsContent .description h2 a:hover{ text-decoration:underline}
											.webDealsContent .description p{ margin:15px 0 5px 0}
											.webDealsContent .description a.moreInfo,
											.webDealsContent .description a.moreInfo:link,
											.webDealsContent .description a.moreInfo:active,
											.webDealsContent .description a.moreInfo:visited{color:#3157a8; text-decoration:none}
											.webDealsContent .description a.moreInfo:hover{ text-decoration:underline}
											.webDealsContent .description a.moreInfo span{color:#00A5DE; text-decoration:none; font-size:12px; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif; display:inline}
											.webDealsContent .description .price{color:#fa0029; margin:5px 0 0 0; font-size:20px; font-weight:bold; margin-top:5px;}
											.webDealsContent .description .info{ height:60px;}
											html*.webDealsContent .description .info{ height:80px;}
												.webDealsContent .description div img{ border:none}
												.webDealsContent .description div sup{ font-size:14px; padding:1px 0 0 0; display:block; float:left}
											.webDealsContent .description span{ display:block; color:#666}
												.webDealsContent .description span span{ text-decoration:line-through; display:inline; color:#000}
								.footerWebDealsBox{ clear:both; height:7px; font-size:0; line-height:0}
								div[class="footerWebDealsBox"]{background:url(../images/content/footerWebdealsBox.gif) no-repeat;}
								html*.footerWebDealsBox{_background:url(../images/content/footerWebdealsBoxIE6.gif) 3px top no-repeat;}
			   /*
			 	*	Right Content
			  	*/	
								
				#rightContent{ float:left; width:253px; background:url(../images/content/bg_right.jpg) no-repeat top; padding:45px 0 0 0;}
					
					/*
					 *	Customer Zone
					 */
					 
					#customerZone{ background:url(../images/content/bgContentCZ2.jpg) bottom repeat-x; margin-bottom:18px;}
						#customerZone h1{ font-size:15px; padding-left:3px;}
						#customerZone h1 a,
						#customerZone h1 a:link,
						#customerZone h1 a:active,
						#customerZone h1 a:visited{ text-decoration:none; color:#002e68}
						#customerZone h1 a:hover{ text-decoration:underline}
						#customerZone a,#customerZone input{ position:relative}
						#headerCustomerZone{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='design/images/content/bgHeaderCZ.png', sizingMethod='scale'); height:17px; padding:9px 0 0 16px;}
						div[id="headerCustomerZone"]{background:url(../images/content/bgHeaderCZ.png) repeat-x;}
						#contentCustomerZone{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='design/images/content/bgContentCZ1.png', sizingMethod='scale'); border:solid #dbdbdb; border-width:0 1px; padding:14px 0 0 17px; _height:351px; min-height:351px}
							#contentCustomerZone a.linkList,
							#contentCustomerZone a.linkList:link,
							#contentCustomerZone a.linkList:active,
							#contentCustomerZone a.linkList:visited{ text-decoration:none; color:#577e91}
							#contentCustomerZone a.linkList:hover{ text-decoration:underline}
							#contentCustomerZone a.linkList span{ color:#00A5DE; text-decoration:none; font-size:12px; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif;}
							
							/*
							 *	my E-Services
							 */
							 
							#contentCustomerZone #myEservices{ margin-bottom:18px; line-height:17px;}
								#contentCustomerZone #myEservices h1{ margin-bottom:5px;}
									#contentCustomerZone #myEservices #message{ padding-left:5px;}
										#contentCustomerZone #myEservices #message span{ display:block; background:url(../images/content/mail.gif) no-repeat left; color:#fa0029; padding-left:20px;}
										#contentCustomerZone #myEservices a.promo,
										#contentCustomerZone #myEservices a.promo:link,
										#contentCustomerZone #myEservices a.promo:active,
										#contentCustomerZone #myEservices a.promo:visited{ color:#69abde; text-decoration:none}
										#contentCustomerZone #myEservices a.promo:hover{ text-decoration:underline}
								#contentCustomerZone #login{ padding-left:30px; margin-top:20px;}
									#contentCustomerZone #login img{ border:none; vertical-align:middle}
									#contentCustomerZone #login a.loginLink,
									#contentCustomerZone #login a.loginLink:link,
									#contentCustomerZone #login a.loginLink:active,
									#contentCustomerZone #login a.loginLink:visited{ color:#577e91; text-decoration:none}
									#contentCustomerZone #login a.loginLink:hover{ text-decoration:underline}
									#contentCustomerZone #login a.loginLink span{color:#9DD2EF; text-decoration:none; font-size:12px; font-weight:bold; font-family:Geneva, Arial, Helvetica, sans-serif;}
									#contentCustomerZone #login p{ margin-bottom:5px; padding-left:8px;}
									#contentCustomerZone #login label{ display:block; float:left; width:54px; color:#696b6c}
									#contentCustomerZone #login input{ width:85px; border:1px solid #4d6b86; color:#4d6b86; font-size:11px; vertical-align:middle}
									#contentCustomerZone #login div{ margin-top:6px;}
							/* 
							 *	Online services & online support
							 */
							 
							 #contentCustomerZone #onlineServices,#contentCustomerZone #onlineSupport{margin-bottom:14px; line-height:15px;}
							 	#contentCustomerZone #onlineServices h1,#contentCustomerZone #onlineSupport h1{ margin-bottom:5px;}
								#contentCustomerZone #onlineServices p,#contentCustomerZone #onlineSupport p{padding-left:5px;}
									#contentCustomerZone #onlineServices .allLink,#contentCustomerZone #onlineSupport .allLink{ text-align:right; padding-right:20px; margin-top:7px}
									#contentCustomerZone #onlineServices .allLink a,#contentCustomerZone #onlineSupport .allLink a,
									#contentCustomerZone #onlineServices .allLink a:link,#contentCustomerZone #onlineSupport .allLink a:link,
									#contentCustomerZone #onlineServices .allLink a:active,#contentCustomerZone #onlineSupport .allLink a:active,
									#contentCustomerZone #onlineServices .allLink a:visited,#contentCustomerZone #onlineSupport .allLink a:visited{ text-decoration:none; color:#29a2db}
									#contentCustomerZone #onlineServices .allLink a:hover,#contentCustomerZone #onlineSupport .allLink a:hover{ text-decoration:underline}
							 
						div[id="contentCustomerZone"]{background:url(../images/content/bgContentCZ1.png) repeat-x;}
						#footerCustomerZone{ background:url(../images/content/bgFooterCZ.gif) no-repeat top; height:8px; font-size:0; line-height:0}
					
					/*
					 *	ComZone
					 */
					 
					#comZone{ margin-bottom:18px;}
						#comZone img{ border:none}
					
					/*
					 *	OtherWebSite
					 */
					 
					#otherWebSite{}
						#otherWebSite h1{font-size:18px; color:#bcbcbc; margin-bottom:8px}
						#otherWebSite div{ margin-bottom:8px;}
						#otherWebSite img{ border:none; vertical-align:middle; margin-right:13px;}
						#otherWebSite a,
						#otherWebSite a:link,
						#otherWebSite a:active,
						#otherWebSite a:visited{ display:block; text-decoration:none; color:#577e91; margin-bottom:3px}
						#otherWebSite a:hover{ _text-decoration:underline}
						
						div[id="otherWebSite"] a:link span,
						div[id="otherWebSite"] a:active span,
						div[id="otherWebSite"] a:visited span{text-decoration:none;}
						div[id="otherWebSite"] a:hover span{ text-decoration:underline}
	
	/* 
	 *	Footer
	 */
	 
	#footer{ text-align:center; color:#779fae; font-size:10px; padding-top:20px; line-height:15px; clear:both}
		#footer a,
		#footer a:link,
		#footer a:active,
		#footer a:visited{ color:#779fae;}
		#footer a:hover{ text-decoration:none}


voila voila ...