Forskel på Firefox og IE
hey folks :)!Jeg går i 10. klasse og er ved at skrive OSO-opgave om programmering, og har derfor valgt at lave en hjemmeside som produkt. Den skal være færdig på Tirsdag, men jeg er rendt ind i et problem med at indholdet på siden rykker rundt, alt efter hvilken browser man bruger. I Firefox ser siden normal ud, men min lærer jeg skal aflevere til bruger Internet Explorer, så jeg kan ikke rigtigt ignore det!
I IE rykker menuen ned under indholdet i højre side, og overskriften rykker også opad.
HTML:
<!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>Programmering - OSO opgave</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
</div>
</div>
<hr />
<!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h2 class="title">Interview</h2>
</div>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<div id="menu">
<ul>
<li><h1><a href="index.html">Home</a></h1></li>
<li><a href="jobbet.html">Jobbet</a></li>
<li><a href="uddannelsen.html">Uddannelsen</a></li>
<li><a id="current" href="interview.html">Interview</a></li>
<li><a href="jobmuligheder.html">Jobmuligheder</a></li>
<li><a href="interesser.html">Interesser</a></li>
</ul>
</div>
<!-- end sidebar -->
<br style="clear: both;" />
</div>
</div>
<!-- end page -->
</body>
</html>
CSS:
body {
width: 1000px;
height: 1200px;
margin: 0px;
padding: 0px;
background: #000 url(images/skema.png) no-repeat;
text-align: justify;
font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFDC;
letter-spacing: -0.5px;
}
h1, h2, h3 {
font: 1.82em;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -1px;
color: #FFFFFF;
}
.post h2 {
font: 3em;
padding: 8px 0;
}
.side {
text-align: right;
}
p, ol, ul {
line-height: 1.67em;
}
a {
color: #828170;
}
a:hover {
text-decoration: none;
}
hr {
display: none;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0px;
padding: 15px 0px 0px 0px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a:hover, .active a {
}
/* Page */
#page {
width: 1000px;
margin: 0px auto;
padding: 40px 0px 0 0;
}
/* Content */
#content {
float: right;
padding-left: 10px;
padding-top: 80px;
width: 770px;
margin-bottom: 10px;
}
/* Post */
.post {
margin-top: 20px;
padding-left: 0px;
margin-left: 0px;
width: 520px;
}
.post .title {
margin: 0;
padding: 5px 0 10px 0;
margin-left: 0px;
sipadding-left: 0px;
font-size: 1.9em;
}
.post .title h2 {
padding: 0;
margin: 0;
}
.post a {
}
.post .entry {
margin: 0;
padding: 0 0 20px 50px;
}
/* Sidebar */
#sidebar {
float: left;
width: 210px;
padding-top: 25px;
margin-bottom: 20px;
text-align: center;
}
#sidebar ul {
margin: 0 5px;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 10px;
}
#sidebar li ul {
margin-left: 5px;
}
#sidebar li li {
margin: 0;
padding: 2px 0 4px 0;
}
#sidebar li li a {
}
#sidebar h2 {
padding: 0;
margin: 0 0 6px 0;
font-size: 1.4em;
}
#sidebar h1 a {
padding: 0px 40px;
font-size: 20px;
text-align: right;
}
#sidebar a {
display: block;
float: left;
text-align: left;
background: url(images/pil.png) no-repeat left;
margin: 0 0 10px 10px;
padding: 5px 10px 1px 40px;
text-decoration: none;
text-transform: uppercase;
font-family: Bitstream Vera Sans, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
color: #fff;
}
#current {
text-decoration: underline !important;
}
#sidebar li a {
background: url(images/streg.png) no-repeat bottom-right;
}
#sidebar a:hover {
color: #676767;
background: url(images/pilhover.png) no-repeat left;
}
Jeg håber der er nogen der kan hjælpe mig med at fortælle hvad jeg kan gøre for at udlige den forskel :)
mvh Jagdos
