CSS Layout

1

Hi, I did a layout for my website in Photoshop, but I can’t make it real. I managed to almost make it look right in Firefox, but what I saw in IE7 was a nightmare…


<!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>
<title>Estonian SoF 2 clan</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="heading">
                        <div class="right"><img src="images/logo.jpg" alt="">
<form><input type="text" size="15" /><input type="submit" value="Sisene" /><input type="password" size="15" /></form>
                    </div>                 <img src="images/hermann.jpg" alt="" class="right">

                    <p>
                         SoF II EST on uus klann m&auml;ngule Soldier of Fortune II. Me m&auml;ngime seda 
                         koos ja aitame &uuml;ksteisel areneda ja kokkuv&otilde;ttes on meil eesm&auml;rgiks, 
nagu ikka, parimate klannide hulka kuulumine. Nimest v&otilde;ib v&auml;lja lugeda ka, et me v&auml;&auml;rtustame k&otilde;rgelt 
                    oma isamaad ja parimate hulka kuulumisega tahame me tutvustada teistele m&auml;ngjatele
                    Eestit heast ja tugevast k&uuml;ljest.
                    </p>

</div>
<div id="navigation_bar"><p>Navigeeri: </p>
</div>
<div id="bottom">
<div id="list_menu"><ul>
<li><a href="#">Esileht</a></li>
<li><a href="#">Liikmed</a></li>
<li><a href="#">Sisekord</a></li>
</ul></div><h1>SoF II EST</h1>
<p>Tervitus, kaasv&otilde;itleja!</p>
</div>
</body>
</html>

html,body {
height: 100%;
padding: 0;
margin: 0;
}

body {
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
background-color: #acf;
}

div {
padding: 0;
margin: 0;
}

#bottom { 
width: 100%;
background-image: url(images/bottom.jpg);
background-repeat: repeat-x;
}

#heading {
width: 100%;
height: 242px;
background-image: url('images/hermann_bar.jpg');
}

#list_menu {
margin: 15px;
float: left;
}

#list_menu ul {
margin: 0px;
padding: 0;
list-style-type: none;
}

#list_menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none; /*lets remove the link underlines*/
}

#list_menu li {
margin: 2px 0 0;
}

#list_menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

#list_menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}

#navigation_bar {
color: #fff;
background-color: #000;
width: 100%;
}

.left {
float: left;
}

.right {
float: right;
}

form {
margin: 0;
width: 100%;
text-align: center;
}