hjælp til div/span/css - firefox problem
HejJeg er ved at få grå hår af det her - Jeg har brygget noget kode sammen til et layout uden brug af tabeller, men som I kan se af nedenstående kode vises den ikke korrekt i firefox
Koden er Valid XHTML 1.0 Transitional!
Håber der er nogen der kan give mig et peg i den rigtige retning.
Koden:
<?xml version="1.0" encoding="iso-8859-1"?><!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">
<head>
<title>test af centrering af divs vertikalt og horisontalt</title>
<style type="text/css" media="screen"><!--
body{
background-color: #8EBAC5;
background-image: url(images/bg.jpg);
background-position: top left;
background-repeat: repeat-x;
margin-top: 0px;
}
#container {
position: relative;
margin: 0 auto;
width: 750px;
text-align: left;
padding: 0 0 0 0;
overflow: visible;
border-left: 2px solid #666666;
border-right: 2px solid #666666;
border-bottom: 2px solid #666666;
background-color: white;
z-index:5;
}
#ramme {
position: relative;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: left;
overflow: visible;
background-color:#505F72;
z-index:5;
}
#indre_ramme {
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: left; /*corrects for IE hack*/
overflow: visible;
background-color:#505F72;
z-index:5;
}
#header{
position: relative;
top: 0px;
margin-left: -20px;
margin-right: -20px;
margin-bottom: 20px;
height: 150px;
border-bottom: 1px solid white;
z-index:5;
}
#left{
position: relative;
right: 0px;
top: 0px;
width: 500px;
vertical-align: top;
border-bottom: 1px solid white;
border: 1px solid black;
background-color: #ECE8DD;
z-index:5;
}
#right{
position: relative;
top: 0px;
left: 10px;
vertical-align: top;
width: 185px;
border: 1px solid white;
z-index:5;
}
#shadow-top-left{
position: absolute;
left: -22px;
top: -1px;
width: 25px;
z-index:2;
}
#shadow-top-right{
position: absolute;
right: -27px;
top: -1px;
width: 25px;
z-index:2;
}
#shadow-left-right{
position: relative;
left: 0px;
top: -1px;
margin-bottom: -1px;
width: 770px;
z-index:12;
background-image: url(images/shadow-left-right.jpg);
background-repeat: repeat-y;
}
#shadow-bottom{
position: relative;
right: 0px;
bottom: 1px;
margin-bottom: -1px;
width: 770px;
hright: 10px;
z-index:12;
}
--></style>
</head>
<body background="/templates/fji/images/bagblue.jpg">
<div align="center">
<div id="shadow-left-right">
<div id="container">
<div id="shadow-top-left"><img src="images/shadow-top-left.jpg" alt="" /></div>
<div id="shadow-top-right"><img src="images/shadow-top-right.jpg" alt="" /></div>
<div id="ramme">
<div id="indre_ramme">
<div id="header">header</div>
<span id="left">Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br />Venstre<br /></span>
<span id="right">test</span>
</div></div>
</div>
</div>
<div id="shadow-bottom"><img src="images/shadow-bottom.jpg" alt="" /></div>
</div>
</body>
</html>
