No replies
anakin2hawk
Offline
newbie
Last seen: 12 years 7 weeks ago
Joined: 2009-08-06
Posts: 1
Points: 0

Hello,
I am developping a site using position:relative and position:absolute I have many problems whereas browsers should respect the css 2.1 rules.

Here is a page test tested in Firefox Safari Chrome and opera and the results are different in all browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr"xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<style type="text/css">
#corpstop {
margin-left : auto;
margin-top : 2%;
margin-right : auto;
width : 995px;
background-color:#143a9a;
height : 150px;
margin-bottom : 0px;
bottom : 0px;
}
#corps {
padding:-2px;
top:0px;
margin-left : auto;
margin-top : 0px;
margin-right : auto;
background-color:pink;
width : 995px;
background-repeat : repeat-y;
}
#corpsbottom {
margin-left : auto;
margin-right : auto;
background-color:black;
background-position : 0 0;
height : 65px;
}
 
#menu {
margin-left : 16px;
margin-right : auto;
background-color : #01243f;
width : 960px;
height : 45px;
height : 35px;
margin-left : 16px;
margin-bottom : 30px;
}
 
 
 
 
.smalldiv {
width : 110px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-color:cyan;
}
.smalldivover {
width : 110px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-color:white;
}
 
 
#menu1 {
width : 103px;
position : relative;
z-index : 1600;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
}
#menu2 {
width : 130px;
padding-top : 8px;
padding-left : 38px;
font-size : 14px;
position : relative;
overflow : hidden;
z-index : 1900;
margin-left : -15px;
}
#menu3 {
width : 142px;
padding-top : 8px;
padding-left : 38px;
font-size : 14px;
position : relative;
z-index : 1800;
margin-left : -15px;
}
#menu4 {
width : 109px;
position : relative;
z-index : 1900;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
overflow : hidden;
}
#menu5 {
width : 100px;
position : relative;
z-index : 2000;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
}
#menu6 {
width : 85px;
position : relative;
z-index : 3000;
margin-left : -15px;
padding-top : 8px;
padding-left : 45px;
font-size : 14px;
}
#menu7 {
width : 140px;
position : relative;
z-index : 500;
margin-left : -15px;
padding-top : 8px;
padding-left : 30px;
font-size : 14px;
float : left;
height : 32px;
font-family : Comic Sans MS;
color : white;
background-repeat : repeat-x;
background-color:yellow;
}
 
#ombre_menu {
clear:both;
background-color:green;
position : absolute;
width : 960px;
height : 10px;
margin-top:40px;
}
 
 
 
#toggle {
background-color:red;
width : 417px;
margin-top : 20px;
margin-left : 273px;
height : 100px;
position : relative;
z-index : 20000;
 
}
</style>
</head>
 
<body >
  <div id="corpstop" >
         <a href="#" name="hautdepage"></a>
  </div>
 
  <div id="corps" style="height:500px;">
			<div id="menu">
 
			<div class="smalldiv" id="menu1" > <a class="amenu" href="#">Accueil</a> </div>
 
			<div class="smalldiv" id="menu2" ><a class="amenu" href="#">Notre Societe</a></div>
 
			<div class="smalldiv" id="menu3" ><a class="amenu" href="#">Les Programmes</a></div>
 
			<div class="smalldiv" id="menu4" ><a class="amenu" href="#">Les lois</a></div>
 
			<div class="smalldiv" id="menu5" ><a class="amenu" href="#">Contact</a></div>
 
			<div class="smalldiv" id="menu6" ><a class="amenu" href="#">Actu</a></div>
 
			<div id="menu7" > 
			</div>
 
			<img  id="ombre_menu" width="960" height="10"  />
 
			<br />
 
 
			<div id="toggle">
			</div>
			</div>
   </div>
 
 
   <div id="corpsbottom"> 
   </div>
 
 
 
</body> 
</html>

Can you please look in your browser to see if it works or no. And perhaps explain me if i make mistakes

Thank you in advance.

Eric VErlet