Div skifter størrelse i IE (og j kan ik ændre den?)
Hej.Er ved at lave en hjemmeside. Har så en menu hvor der i hvert menupunkt er en lille firkant som skal være 8x8 pixel, men i IE (Internet Explorer) bliver den 14 eller 13 høj eller noget... jeg kan godt gøre den større via mit css, men den vil være minimum 14pixel høj tror jeg det er...
Størrelsen på de elementer som indgår i menuen, bliver styret via et eksternt stylesheet (en css-fil)
Til min menu bruger jeg også et javascript (til at ændre farverne når man kører over med musen), men jeg ved nu ikke om det skulle betyde noget.
Koden følger herunder:
HTML-dokumentet (.html):
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>DK Profil - velkommen</title>
<link rel="stylesheet" type="text/css" href="dkp_css_screen1.css">
<script src="menu_mouseover.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
<div id="container">
<!--topbanner-->
<div id="topbanner">
</div>
<!--logo-->
<div id="logo">
<img src="bill/logo1.gif">
</div>
<!--menu-->
<div class="menu">
<div
onmouseover="swap(this, true)"
onmouseout="swap(this)"
class="menuboks_information"
style="cursor:hand;cursor:pointer;top:0;">
<div class="menufirkant"></div>
<div class="menutekst1">Information</div>
</div>
<div
onmouseover="swap(this, true)"
onmouseout="swap(this)"
class="menuboks_domaener"
style="cursor:hand;cursor:pointer;top:31;">
<div class="menufirkant"></div>
<div class="menutekst1">Domæner</div>
</div>
<div
onmouseover="swap(this, true)"
onmouseout="swap(this)"
class="menuboks_salgsbetingelser"
style="cursor:hand;cursor:pointer;top:62;">
<div class="menufirkant"></div>
<div class="menutekst1">Salgsbetingelser</div>
</div>
<div
onmouseover="swap(this, true)"
onmouseout="swap(this)"
class="menuboks_kontakt"
style="cursor:hand;cursor:pointer;top:93;">
<div class="menufirkant"></div>
<div class="menutekst1">Kontakt</div>
</div>
</div>
</div>
<!--indholdsboks-->
<table class="indholdsboks1" cellspacing="0" cellpadding="0">
<tr height="33">
<td colspan="3"></td>
</tr>
<tr valign="top">
<td width="40">
</td>
<td width="700">
<table width="700" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="260">
</td>
<td>
<table width="300" class="indhold" align="left"
cellpadding="0" cellspacing="0">
<tr valign="top">
<td align="left">
<!--INDHOLD HERUNDER-->
<span class="overskrift">
Velkommen!<br />
</span>
<span class="broedtekst">
<br />
Tekst her tekst her tekst her tekst her<br />
Tekst her tekst her tekst her tekst her<br />
Tekst her tekst her tekst her tekst her<br />
<br /><br /><br /><br /><br
/><br />
</span>
</td>
</tr>
</table>
<!--INDHOLD SLUT-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="40">
</td>
</tr>
<tr height="30">
<td colspan="3"></td>
</tr>
</table>
</div>
</body>
</html>
----------------------------------------------------------------------
CSS-filen (.css):
----------------------------------------------------------------------
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-color:#111;
}
#container {
border-width: 0px;
width: 700px;
height: 135px;
position: relative;
top: 10px;
z-index: 1;
}
#topbanner {
border-width: 0px;
width: 100%;
height: 100%;
position: relative;
top: 0px;
background-color: #fff;
}
#logo {
border: 0px;
position: absolute;
top: 62px;
left: 45px;
}
.menu {
width: 180px;
position: absolute;
top: 166px;
left: 45px;
z-index: 2;
}
.menuboks {
height: 30px;
width:100%;
background-color: #fff;
position: absolute;
left: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #111;
border-bottom: 1px solid white;
}
.menuboks_information {
height: 30px;
width:180px;
background-color: #fff;
position: absolute;
left: 0px;
top: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #111;
border-bottom: 1px solid white;
}
.menuboks_domaener {
height: 30px;
width:180px;
background-color: #fff;
position: absolute;
left: 0px;
top: 31px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #111;
border-bottom: 1px solid white;
}
.menuboks_salgsbetingelser {
height: 30px;
width:180px;
background-color: #fff;
position: absolute;
left: 0px;
top: 62px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #111;
border-bottom: 1px solid white;
}
.menuboks_kontakt {
height: 30px;
width:180px;
background-color: #fff;
position: absolute;
left: 0px;
top: 93px;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #111;
border-bottom: 1px solid white;
}
.domaene_menu {
height: 60px;
width:390px;
background-color: green;
font-family: verdana, arial, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 12px;
text-align: left;
color: #eee;
border-bottom: 1px solid white;
}
.menutekst1 {
position: relative;
top: 8px;
left: 30px;
width: 140px;
height: 20px;}
.menufirkant {
background-color: #89c66c;
width: 8px;
height: 8px;
position: absolute;
top: 10px;
left: 12px;
}
.indholdsboks1 {
border-width: 0px;
width: 700px;
position: relative;
top: 2px;
background-color: #fff;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 14px;
z-index: 0;
}
.subboks1 {
border-width: 0px;
height: 250px;
background-color: #a3c5a3;
}
.indhold {
border-width: 0px;
border: solid 0px black;
}
.overskrift {
color: #000;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 23px;
text-align: left;}
.mellemrubrik {
color: #111;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: left;}
.manchet {
color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
text-align: left;}
.broedtekst {
color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
text-align: left;}
.broedtekst-lille {
color: #222;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
line-height: 19px;
text-align: left;}
----------------------------------------------------------------------
JAVA-SCRIPT-filen (.js):
----------------------------------------------------------------------
function swap(oElm, bInout)
{
var oCss = oElm.getElementsByTagName("div")[0].style;
oCss.color = bInout ? "white" : "white";
oCss.background = bInout ? "#d7f9c7" : "#89c66c";
oCss = oElm.style;
oCss.color = bInout ? "white" : "black";
oCss.background = bInout ? "#89c66c" : "";
}
----------------------------------------------------------------------
Hvad skal jeg gøre for at få "menufirkant" til at være 8x8 pixel i IE?
Hvis nogen her kan hjælpe :-) ?
Mvh Filip Jakobsen
