Hvis sammenligner
www.carlsenskontor.dk i forskellige browsere kan man se et
lille problem. Jeg kan ikke løse det. Hvis jeg laver border i NS får jeg
dobbelt-border i IE ... der er klap på skulderen og ros til dem, der kan
gennemskue skidtet.
ras
Hele koden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>rasmus</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
var ver3 = (navigator.appVersion.charAt(0) <= "3") ? true : false;
var dom = (document.getElementById) ? true : false;
var ie4 = (document.all && !document.getElementById) ? true : false;
var ns4 = (document.layers) ? true : false;
var ie5 = (document.all && document.getElementById) ? true : false;
var n6 = (document.getElementById && !document.all) ? true : false;
function findObjekt(objekt) {
var blok;
if (dom) blok = document.getElementById(objekt).style;
else if (ie4) blok = document.all[objekt].style;
else if (ns4) blok = document.layers[objekt];
return blok;
}
function setBgColor(objekt, color) {
var blok = findObjekt(objekt);
blok.backgroundColor = color;
}
function setFgColor(objekt,color) {
var blok = findObjekt(objekt);
blok.color = color;
}
function visObjekt(objekt){
var blok = findObjekt(objekt);
blok.visibility = "visible";
}
function skjulObjekt(objekt){
var blok = findObjekt(objekt);
blok.visibility = "hidden";
}
function expand(objekt){
var blok = findObjekt(objekt);
blok.display="block"
}
function collapse(objekt){
var blok = findObjekt(objekt);
blok.display="none"
}
function setBorderBottomColor(objekt,color){
var blok = findObjekt(objekt);
blok.borderBottomColor = color;
}
function setBorderBottomWidth(objekt,width){
var blok = findObjekt(objekt);
blok.borderBottomWidth = width;
}
function skjulAlle(){
for (i=1;i<7;i++)
collapse('indhold'+i)
}
function resetColors(){
for (i=1;i<7;i++){
setBgColor('indhold' + i,'#ffffff');
setBgColor('menupunkt' + i,'#ece9d8')
setBorderBottomColor('menupunkt'+i,'#000000');
}
}
function visIndhold(nr) {
skjulAlle();
resetColors();
expand('indhold'+nr);
setBgColor('menupunkt' + nr,'#ffffff');
setBgColor('indhold' + nr,'#ffffff');
setBorderBottomColor('menupunkt'+nr,'#ffffff');
}
</script>
<style type="text/css">
<!--
body {
background:gray;
font-family:arial, helvetica,sans-serif;
text-align:center;
line-height:115%;
font-size:14px;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
#menubar {
position:relative;
height:20px;
width:750px;
padding-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
border-left:1px solid black;
border-top:0px solid black;
border-right:0px solid black;
border-bottom:0px solid black;
background:#ffffff;
margin: 0px auto
}
#menubar .menupunkt {
font-weight:bold;
font-size:12px;
height:20px;
width:125px;
text-align: center;
padding-left:0px;
padding-top:2px;
padding-right:0px;
padding-bottom:2px;
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
color:#000000;
text-decoration:none;
border-left:0px solid black;
border-top:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
font-weight: bold;
background:#ffffff;
}
..menupunkt {
position:absolute;
margin: 0px auto;
background-color:#ffffff;
}
#menupunkt1 {left:0px;}
#menupunkt2 {left:125px;}
#menupunkt3 {left:250px;}
#menupunkt4 {left:375px;}
#menupunkt5 {left:500px;}
#menupunkt6 {left:625px;}
..indhold {
border-left:1px solid black;
border-top:0px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
width:750px;
height:300px;
background:#ffffff;
text-align:left;
margin-top:100px;
margin:0px auto;
display:none;
overflow:auto;
cursor:default;
}
..foto {
position: absolute;
width: 175px;
height: 150px;
margin-left: 35px;
margin-top: 20px;
border: 1px solid black;
background: #eeeeee
}
-->
</style>
</head>
<body onload="visIndhold(1)">
<div id="menubar">
<a class="menupunkt" id="menupunkt1" onfocus="this.blur()"
href="javascript:visIndhold(1)">Forsiden</a>
<a class="menupunkt" id="menupunkt2" onfocus="this.blur()"
href="javascript:visIndhold(2)">Erfaring</a>
<a class="menupunkt" id="menupunkt3" onfocus="this.blur()"
href="javascript:visIndhold(3)">Portefølje</a>
<a class="menupunkt" id="menupunkt4" onfocus="this.blur()"
href="javascript:visIndhold(4)">Uddannelse</a>
<a class="menupunkt" id="menupunkt5" onfocus="this.blur()"
href="javascript:visIndhold(5)">IT-kompetencer</a>
<a class="menupunkt" id="menupunkt6" onfocus="this.blur()"
href="javascript:visIndhold(6)">Et liv ved siden af</a>
</div>
<div id="indhold1" class="indhold">
<div class="foto">et passende billede</div>
</div>
<div id="indhold2" class="indhold">
<div class="foto">et passende billede</div>
</div>
<div id="indhold3" class="indhold">
<div class="foto">et passende billede</div>
</div>
<div id="indhold4" class="indhold">
<div class="foto">et passende billede</div>
</div>
<div id="indhold5" class="indhold">
<div class="foto">et passende billede</div>
</div>
<div id="indhold6" class="indhold">
<div class="foto">et passende billede</div>
</div>
</div>
</body>
</html>