div "hopper" ved mouseover
Jeg har et lille sjovt problemwww.thesimcity.dk/NetSOS, prøv at gå ind under "Spørg".
Når man klikker i en tekstboks og skriver i den, hopper hele boksen ca 150px til højre. Kan ikke lige gennemskue hvorfor det er den gør det. Det er kun i IE (supprise!)
html kode for siden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-4">
<title>NetSOS | Spørgsmål & Svar</title>
<link href="Kilder/Style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="Logo"><div id="Logotekst">Spørgsmål og Svar</div></div>
<script type="text/javascript">
function Udfyldt(){
if (document.SoegForm.Soegefelt.value=='')
document.SoegForm.SoegKnap.disabled=true
else
document.SoegForm.SoegKnap.disabled=false
}
if (document.all || document.getElementById)
setInterval("Udfyldt()",100)
</script>
<div class="MenuIndhold">
<div class="MenuSamling">
<form method="post" action="index.php"><input type="submit" value="Forside" class="Knap"></form></div>
<div class="MenuSamling">
<form method="post" action="index.php"><input type="hidden" name="Spoerg" value="1"><input type="submit" value="Spørg!" class="Knap"></form></div>
<div class="MenuSamling">
<form action="index.php" method="post" name="SoegForm">
<input type="hidden" value="1" name="Soeg"><input type="text" id="Soegefelt" name="Soegefelt"><input type="submit" id="SoegKnap" name="SoegKnap" value="Søg" disabled="disabled">
</form>
</div>
<div class="MenuSamling">
<input type="button" value="Arkiv" class="Knap" disabled="disabled" alt="Kommer snart!" title="Kommer snart!">
</div>
<div class="MenuSamling">
<form action="index.php" method="post">
<input type="hidden" value="1" name="Admin">
<input type="submit" value="Admin" class="Knap">
</form>
</div>
<div class="Statistik">
Der er
<ul>
<li><b>1</b> ubesvarede</li><li><b>0</b> besvarede</li> </ul>
Spørgsmål blandt i alt <b>1</b> spørgsmål
</div>
<div class="MenuSamling">
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
</div>
<div class="MenuSamling">
<a href="http://validator.w3.org/"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></a>
</div>
</div>
<script type="text/javascript">
function Udfyldt(){
if (document.SpoergsmaalForm.Emne.value=='' ||
document.SpoergsmaalForm.Spoergsmaal.value=='')
document.SpoergsmaalForm.SendSpoergsmaal.disabled=true
else
document.SpoergsmaalForm.SendSpoergsmaal.disabled=false
}
if (document.all || document.getElementById)
setInterval("Udfyldt()",100)
function SendPost(el)
{
document.SpoergsmaalForm.EPost.disabled = !el.checked;
}
function FjernTekst(Felt){
if (Felt.defaultValue==Felt.value)
Felt.value = ""
else
Felt.value = Felt.defaultValue;
}
</script>
</script>
<div class="Indhold">
<div class="StatusSamling"><div class="StatusBoks"><div class="StatusBjaelke" style="width: 0%"></div></div><div class="StatusTekst">Process: 0%</div></div>
<form name="SpoergsmaalForm" action="index.php?Spoerg=1" method="post">
<p class="Samling">Emne:<br>
<input type="text" class="SpoergTekstfelt" name="Emne" tabindex="1">
</p>
<p class="Samling">Spørgsmål:<br>
<textarea name="Spoergsmaal" class="Tekstboks" tabindex="2"></textarea>
</p>
<p class="Samling">E-post: [<a href="#" onClick="alert('Behøves kun udfyldes såfrem du ønsker en mail tilsendt når spørgsmålet besvares');">?</a>]<br>
<input type="text" class="SpoergTekstfelt" id="EPost" name="EPost" tabindex="4" value="(Klik herunder for at aktivere funktionen)"><br />
<input id="Oplys" type="checkbox" name="Oplys" onClick="SendPost(this);FjernTekst(EPost);" value="1" tabindex="3"><label for="Oplys"><font size="-1">Jeg ønsker at modtage en mail når mit spørgsmål besvares</font></label>
</p>
<p class="Samling"><input type="submit" class="Knap" name="SendSpoergsmaal" value="Spørg »" tabindex="5" disabled>
</p>
</form>
</div>
<script language="JavaScript" type="text/javascript">
document.SpoergsmaalForm.Oplys.checked = false;
document.SpoergsmaalForm.EPost.disabled = true;
</script>
<p class="Fodnote">
© TestSOS 2006 Alle rettigheder forbeholdes | <a href="http://netlosninger.dk" target="_blank">Netløsninger.dk</a></p> </body>
</html>
CSS funktioner i brug som kan være de mest sansynlige syndere (tror jeg):
.MenuIndhold {
color: inherit;
background-color: #7af;
position: relative;
top: 0;
left: 0;
width: 120px;
height: auto;
float: left
}
.MenuSamling {
margin-top : 10px;
margin-bottom : 20px;
padding-right : 10px;
padding-bottom : 0;
padding-left : 10px;
position : relative;
top : 0;
width : 120px;
height : 30px;
float : left;
}
.Indhold {
color : inherit;
background-color : #d2e3ff;
margin-top : 10px;
margin-left : -210px;
padding : 10px;
position : relative;
top : 10px;
left : 50%;
width : 420px;
height : auto;
float : left;
border : 1px solid #000;
}
.StatusSamling {
margin-top: 10px;
margin-left: -100px;
position: relative;
top: 10px;
left: 50%;
width: 200px;
height: auto
}
