Problem med html/CSS i Mozilla
Kære ekspert-deltagereJeg har begået en hjemmeside. Jeg er ikke skrap til html/CSS på nogen måde, så jeg håber at kunne få lidt hjælp her.
Hvorfor "hænger" teksten i højre sides "ekstramenu", når siden ses i Mozilla (Firefox)?? Og hvorfor stopper banneret ikke som i IE-explorer 20 pixels før højre side??
Her er html-koden... Siden kan se på http://www.marslev-birkende.dk/salmecd/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SALME-CD PROJEKT</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles/minushoejreramme.css"
type="text/css">
</head>
<body>
<div id="hovedindhold">
<p style=
"font-size: 40pt; font-family: georgia, times new roman; color: black; margin-top:0px; margin-bottom: 0px;">
Salme-CD projekt<br>
<font face="Georgia" size="5">Klaverakkompagnement til
salmesang</font></p>
<br>
<br>
<img src="images/cover.jpg" height="250" width="250" align="right">
<p> Her skal teksten stå.<br></p></div>
<!-- Relativ menu - ScriptBreaker -->
<!-- Aktuel Dato + klokkeslet -->
<div id="titel"><!-- Banner -->
<div style="position:absolute; right:0px; top:25px; Width:135px;">
<script type="text/javascript">
var months=new Array(13);
months[1]="januar";
months[2]="februar";
months[3]="marts";
months[4]="april";
months[5]="maj";
months[6]="juni";
months[7]="juli";
months[8]="august";
months[9]="september";
months[10]="oktober";
months[11]="november";
months[12]="december";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getFullYear();
document.write(" " + date + ". " + lmonth + " " + year + " ");
// Slut -->
</script></div>
<div align="left"><img src="images/nodebanner.jpg" width="600"
height="50" alt=""></div></div>
<div id="venstremenu"><script type="text/javascript" src=
"kirkemenu.js">
</script> <noscript>
<p>Denne menu kræver at du har slået javascript til i
din browser. Slå javascript til, eller brug vores <a href=
"sitemap.htm">sitemap</a></p></noscript></div>
<div id="ekstramenu">
<p style=
"font-size: 10pt; font-family: verdana; color: darkblue; font-variant: small-caps; margin-top:5px; margin-bottom:0px;">
Klik her for:<br>
<a href="musik/725_66_1_vers.mp3" title=
"Klik her for at høre en smagsprøve (DDS 725)">Smagsprøve
1</a><br>
<a href="musik/197_361_1_vers.mp3" title=
"Klik her for at at høre en smagsprøve (DDS 197)"
target="_blank">Smagsprøve 2</a> <a href=
"musik/121_42_1_vers.mp3" title=
"Klik her for at at høre en smagsprøve (DDS 121)"
target="_blank">Smagsprøve 3</a></p></div>
</body>
</html>
Herudover ser min CSS-fil således ud:
body {
font-size: 7pt; font-family: verdana, arial; color: darkblue;
margin-left: 10px;
margin-right: 30px;
margin-top: 10 px;
margin-bottom: 10px;
background: #EDF4FF;
}
<!-- Oprindeligt baggrundsbillede: url("images/forside2.jpg") -->
p {margin-top:0px;margin-bottom:17px; font-size: 11pt; font-family: verdana, arial; color: darkblue;
}
h1 {margin-top:5px;margin-bottom:1px; font-size: 20pt; font-family: arial; font-variant: small-caps; color: darkblue
}
h2 {margin-top:5px;margin-bottom:1px; font-size: 18pt; font-family: arial; font-variant: normal; color: darkblue
}
h3 {margin-top:5px;margin-bottom:1px; font-size: 16pt; font-family: verdana; font-variant: small-caps; color: darkblue
}
h4 {margin-top:5px;margin-bottom:1px; font-size: 14pt; font-family: verdana; font-variant: normal; color: darkblue
}
h5 {margin-top:5px;margin-bottom:1px; font-size: 10pt; font-family: verdana; font-variant: bold; color: darkblue
}
a:link {
color: darkblue;
text-decoration:none;
}
a:visited {
color: darkblue;
text-decoration:none;
}
a:active {
background-color: lightblue;
text-decoration:none;
}
a:hover {
color: orange;
text-decoration:none;
}
div {
font-size: 10pt; font-family: verdana, arial; color: darkblue;
}
#titel {
position:absolute;
left:20px;
right:70px;
top:20px;
width:100%;
height: 50px;
background-color: #84B2EA;
}
#hovedindhold {
padding-top: 60px;
margin-left: 170px;
margin-right: 40px;
}
#ekstramenu {
position:absolute;
right: 20px;
top: 75px;
Width: 135px;
Height: 35px;
background-color: #C4D7D9;
padding:15px;
}
#venstremenu {
position:absolute;
left: 20px;
top: 75px;
Width: 115px;
Height: 490px;
background-color: #84B2EA;
padding:10px;
}
#spalte1 {
float:left;
width: 30%;
}
#spalte2 {
float:right;
width: 30%;
<!-- Oprindeligt stylesheet: -->
.menu
{
position:absolute;
overflow:visible;
}
.head_items
{
padding:3px 0px 0px 10px;
}
.item_class
{
padding:3px 0px 0px 5px;
overflow :hidden;
}
