Side vises fint i Firefox, men ikke i IE
Som overskriften siger vises min side fint i Firefox, men ikke i IE. Alt valideres fint af W3C (både XHTML og CSS).Hvad kan der være galt?
// ---------------------- KODE XHTML START -----------------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="js/global.js" />
</head>
<body>
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start Header -->
<div class="header">
<div id="logo">
<span></span>
</div>
<!-- Start Navigation Bar -->
<div id="nav-bar">
<ul>
<li><a href="index.php?page=nyheder">Nyheder</a></li>
<li><a href="index.php?page=traening">Træning</a></li>
<li><a href="index.php?page=spillere">Spillere</a></li>
<li><a href="index.php?page=opret">Opret spiller</a></li>
</ul>
</div>
<!-- End Navigation Bar -->
</div>
<!-- End Header -->
<!-- Start Left Column -->
<div id="leftcolumn">
<!-- Start Box -->
<div class="in-the-news">
<div class="left-heading">Log ind</div>
<div class="left-mid">
<form method="post" action="actions/userLoginAction.php?page=nyheder" id="loginForm" class="form">
<!--<input type="hidden" id="page" name="page" value="nyheder" />-->
<dl>
<dt><label for="email">Email:</label></dt>
<dd><input type="text" id="email" name="email" /></dd>
<dt><label for="passwd">Password:</label></dt>
<dd><input type="password" id="passwd" name="passwd" /></dd>
<dt><input type="submit" class="submitBtn" alt="Log ind" value="Log ind" /></dt>
</dl>
</form>
</div>
</div>
<!-- End Box -->
<!-- Start Box -->
<div class="in-the-news">
<div class="left-heading">Links</div>
<div class="left-mid">
<ul id="daily-links">
<li><a href="http://www.hattrick.org">Hattrick</a></li>
<li><a href="http://www.bold.dk">bold.dk</a></li>
</ul>
</div>
<p>
<a href="http://www.getfirefox.com"><img alt="Get Firefox" title="Get Firefox" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/ff2o80x15.gif"/></a>
</p>
</div>
<!-- End Box -->
</div>
<!-- End Left Column -->
<!-- Start Right Column -->
<div id="rightcolumn">
<!-- Start Main Content -->
<div class="maincontent">
<div class="content-mid">
<h1>Velkommen til...</h1>
<p>Velkommen til...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolois nostrud e xercitation ullamco</p>
<p class="border"><span class="user"> | </span><span class="date">25/06-2007 | </span><span class="time">20:33 | </span><span class="comments"></span></p>
</div>
</div>
<!-- End Main Content --> </div>
<!-- End Right Column -->
<!-- Start Footer -->
<div id="footer">© mseest[at]gmail[dot]com - ver. 0.2</div>
<!-- End Footer -->
</div>
<!-- End wrapper -->
</body>
</html>
// -------------------- KODE XHTML SLUT -----------------------
// -------------------- KODE CSS START ------------------------
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, sans-serif;
color: #666666;
background: #f3f1e9;
font-size: 11px;
/*background-image:url(images/bg-tile.gif);*/
background-repeat:repeat;
}
.wrapper {
width: 800px;
margin: 0 auto;
}
* html #border {height:776px} /* IE Min-Height Hack */
/* ------------------------ Start Header -----------------*/
.header {
text-align: center;
margin: 0;
padding: 0;
background: #31363e;
height: 120px
}
/* ------------------------ End Header -----------------*/
/* ------------------------ Logo -------------------------*/
#logo {
width: 792px;
margin: 0;
padding: 20px 0 0 0;
}
#logo span, #logo a {
display: block;
width: 800px;
height: 55px;
padding: 0;
margin: 0;
border-style: none;
/* background: url(../images/fuzz.jpg) no-repeat; */
/* background-position: top 80%; */
}
#logo img {
display: block;
width: 0;
}
#logo a:hover {
}
/*--------------------- Logo --------------------------------------*/
/* ------------------------ Start Navigation Bar -----------------*/
#nav-bar {
margin: 10px 0 0 0;
padding: 0;
}
#nav-bar ul {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #464a52;
background: #383d44;
}
#nav-bar li {
float: left;
margin: 0;
padding: 0;
font-family: Georgia, serif;
font-size: 80%;
letter-spacing: 2px;
text-transform: uppercase;
}
#nav-bar li a {
float: left;
padding: 10px 12px;
text-decoration: none;
color: #e7e3d9;
border: none;
background: url(../images/nav-bg.gif) no-repeat bottom right;
}
#nav-bar li a:hover {
color: #fff;
background: #464a52;
}
#nav-bar li a.active {
font-weight: bold;
color: #fff;
background: #292d34 url(../images/nav-on-bg.gif) repeat-x top left;
}
/* ------------------------ End Navigation Bar -----------------*/
/* ------------------------ Start Images -----------------*/
img {
display: inline;
border: none;
}
img.block {
display: block;
}
img.float {
float: left;
margin: 4px 14px 5px 0px;
}
/* ------------------------ End Images -----------------*/
/* ------------------------ Start Main Columns -----------------*/
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 6px 0px 0px 4px;
display: inline; /* IE Hack */
width: 240px;
float: left;
/* background-image:url(images/search-box.gif);*/
background-repeat: no-repeat;
min-height: 300px;
padding: 0;
}
#leftcolumn p.span {
color: #693;
}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */
.in-the-news { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
/* background-image:url(images/search-box.gif);*/
width: 235px;
float: left;
min-height: 125px;
margin-bottom: 7px;
border-bottom: solid 1px #dbd5c5;
}
* html .in-the-news {height:125px} /* IE Min-Height Hack */
#rightcolumn {
/* border: 1px solid red;*/
margin: 6px 0px 0px 10px;
display: inline; /* IE Hack */
width: 503px;
float: left;
min-height: 300px;
}
#rightcolumn span {
color: #326ea1;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */
.maincontent {
min-height: 80px;
display: inline; /* IE Hack */
float: left;
margin-bottom: 7px;
width: 530px;
border-bottom: solid 1px #dbd5c5;
}
* html .maincontent {height:80px} /* IE Min-Height Hack */
.content-mid {
background-repeat: repeat;
padding: 5px 14px 10px 14px;
}
.content-mid p {
padding: 5px 0px 0px 0px;
}
.left-mid {
padding: 5px 14px 10px 2px;
}
.left-heading {
border-bottom: solid 1px #dbd5c5;
font-family: Georgia, serif;
padding: 9px 14px 2px 0px;
font-size: 14px;
color: #693;
min-height: 11px;
font-weight: bold;
}
* html .left-heading {height:11px} /* IE Min-Height Hack */
/* ------------------------ End Main Columns -----------------*/
/* ------------------------- Start Headings ---------------------*/
h1 {
font-size: 15px;
color: #326ea1;
padding: 3px 0 2px 0;
border-bottom: solid 0px #dbd5c5;
}
/* ------------------------- End Headings ---------------------*/
/* -------------------------- Start forms --------------------*/
.form {
margin: 0;
padding: 10px;
background: #e6e3d7 url(../images/form-bg.gif) repeat-x top left;
}
#wrapper form p, #wrapper form dl dd {
margin: 0 0 8px 0;
padding: 0;
}
.form p.note {
margin-top: 20px;
}
.form dl {
margin: 0;
padding: 0;
font-size: 90%;
}
.form dt {
padding-top: 5px;
color: #383d44;
font-weight: normal !important;
}
.form dt em, .form .note em {
color: #c00;
font-weight: bold;
font-style: normal;
vertical-align: middle;
}
.form textarea {
width: 400px;
height: 180px;
font-family: inherit;
color: #444;
}
.form select {
font-size: 11px;
width: 180px;
}
.form .submitBtn {
margin-top: 10px;;
width: 80px;
}
.form p.introText {
padding-bottom: 5px;
border-bottom: 1px solid #999;
}
/* -------------------------- End forms --------------------*/
#footer {
float: right;
font-size: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-bottom: 5px;
}
#nav-bar li {
list-style: none;
}
ul#daily-links li {
list-style: none;
margin-left: 2px;
}
ul#nav-links li {
display: inline;
margin-left: 0px;
padding-left: 12px;
}
ul#daily-links li a:link{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:visited{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:hover{
color: #999;
text-decoration: none;
font-weight: bold;
}
a:link {
color: #006600;
text-decoration: none;
}
a:visited {
color: #006600;
text-decoration: none;
}
.valid {
margin: 10px 0px 0px 10px;
}
p.error {
color: #e23;
}
p.border {
font-size: 10px;
border-top: 1px dashed #ddd;
border-bottom: 1px dashed #ddd;
padding: 7px 7px 7px 7px;
margin: 7px 0px 7px 0px;
}
/* Icon definitions */
p.border span.date {
background-image: url(../images/icons_/date.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.time {
background-image: url(../images/icons_/time.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.info {
background-image: url(../images/icons_/world.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.tilmeldte {
background-image: url(../images/icons_/user_go.png);
/*background-image: url(../images/icons/blue/user.gif);*/
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.user {
background-image: url(../images/icons_/user.png);
/*background-image: url(../images/icons/blue/user.gif);*/
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.tilmeld {
background-image: url(../images/icons_/bullet_add.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.afmeld {
background-image: url(../images/icons_/bullet_delete.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.comment {
background-image: url(../images/icons_/comment.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.comments {
background-image: url(../images/icons_/comments.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.comment_add {
background-image: url(../images/icons_/comment_add.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.comment_delete {
background-image: url(../images/icons_/comment_delete.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.border span.comment_edit {
background-image: url(../images/icons_/comment_edit.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
p.borderPlayer {
font-size: 10px;
border-bottom: 1px dashed #ddd;
padding: 7px 7px 7px 7px;
margin: 7px 0px 7px 0px;
}
p.borderPlayer span.star {
background-image: url(../images/icons_/star.png);
/*background-image: url(../images/icons/blue/user.gif);*/
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 5px 3px 20px;
}
table.opstilling {
background-image: url(../images/grass.gif);
background-repeat: no-repeat;
width: 500px;
height: 340px;
padding: 0;
font-size: 9px;
color: #FFF;
}
table.opstilling td {
padding: 2px;
text-align: center;
}
table.opstilling img {
margin: 7px;
padding: 0;
border: 0;
}
ul.tilmeldte{
color: #693;
padding: 5px 10px 10px 10px;
margin-left: 15px;
}
ul.tilmeldte li {
list-style: none;
background-image: url(../images/icons_/bullet_add.png);
background-repeat: no-repeat;
background-position: 0 50%;
text-decoration: none;
width: 100%;
padding: 2px 0px 2px 15px;
margin: 0;
}
ul.afmeldte{
color: #c00;
padding: 5px 10px 10px 10px;
margin-left: 15px;
}
ul.afmeldte li {
list-style: none;
background-image: url(../images/icons_/bullet_delete.png);
background-repeat: no-repeat;
background-position: 0 50%;
text-decoration: none;
width: 100%;
padding: 2px 0px 2px 15px;
margin: 0;
}
// --------------------- KODE CSS SLUT ------------------------
