Avatar billede johan.o Nybegynder
23. oktober 2005 - 19:23 Der er 5 kommentarer og
1 løsning

<div> border vises uregelæssigt i IE. Hvorfor ?

Jeg har lidt problemer med at få border på nogle <div>'s vist regelmæssigt. Nogle gange er de synlige, andre gange ikke. Jeg har ikke observeret nogle problemer med firefox.

Jeg har sat den aktuelle kode, jeg har erfaret problemet med, ind herunder. Jeg ved den er lidt omfangsrig men jeg har forsøgt at markere problem <div>'erne med lidt ekstra linjeafstand.

Koden laver en kasse øverst på siden, den er der aldrig problemer med, og så to kasser ved siden af hinanden nedenunder og det er border på disse kasser der vises lidt uregelmæssigt.

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0//EN' 'http://www.w3.org/TR/REC-html40/strict.dtd'>
<html>
<head>
<link rel='stylesheet' href='pfc_but_styles.css' type='text/css'>
<script type='text/javascript' src='pfc_but_jscript.js'></script>
</head>

<body bgcolor='#D4D0C8'>



Denne div vises altid fint.

<div style='position: absolute; left: 185px; top: 5px; width: 630px; height: 230px; border-width: 1px; border-style: solid; border-color: #AAA898;'>

<form action='su_admin.php' method='post' name='su_form'>

<input type=hidden name='su_item_str' value=''>
<input type=hidden name='su_item_place' value=''>

<input type=hidden name='su_src_str' value=''>

<span style='position: absolute; left: 190px; top: 5px;'><b>Users :</b></span>

<span style='position: absolute; left: 95px; top: 30px;'>Initials :</span>
<span style='position: absolute; left: 190px; top: 30px;'><input type='text' name='su_init' value='' tabindex=1></span>

<span style='position: absolute; left: 95px; top: 55px;'>Name :</span>
<span style='position: absolute; left: 190px; top: 55px;'><input type='text' name='su_name' value='' tabindex=2></span>

<span style='position: absolute; left: 95px; top: 80px;'>Surname :</span>
<span style='position: absolute; left: 190px; top: 80px;'><input type='text' name='su_surn' value='' tabindex=3></span>

<span style='position: absolute; left: 95px; top: 105px;'>Department :</span>
<span style='position: absolute; left: 190px; top: 105px;'><input type='text' name='su_depa' value='' tabindex=4></span>

<span style='position: absolute; left: 365px; top: 30px; cursor: pointer;' onclick='document.getElementById("user0").checked=true;'><input type=radio id='user0' name='su_leve' value='0' >System Administrator</span>
<span style='position: absolute; left: 365px; top: 55px; cursor: pointer;' onclick='document.getElementById("user1").checked=true;'><input type=radio id='user1' name='su_leve' value='1' >Local Administrator</span>
<span style='position: absolute; left: 365px; top: 80px; cursor: pointer;' onclick='document.getElementById("user2").checked=true;'><input type=radio id='user2' name='su_leve' value='2' >Question editor</span>
<span style='position: absolute; left: 365px; top: 105px; cursor: pointer;' onclick='document.getElementById("user3").checked=true;'><input type=radio id='user3' name='su_leve' value='3' >Normal User</span>
<div align='center' id='butContainer' style='position: absolute; left: 190px; top: 140px; padding: 0px;' onmouseover='fnBut("1",event.target);' onmouseout='fnBut("2",event.target);' onmousedown='fnBut("3",event.target);' onmouseup='fnBut("4",event.target);'>
<input type=image class='but_on' id='su_save' src='buttons/but_save_on.jpg' name='su_save' alt='Save'>
<input type=image class='but_on' id='su_src' src='buttons/but_src_on.jpg' name='su_src' alt='Search'>
<input type=image class='but_disabled' id='su_del' src='buttons/but_del_disabled.jpg' name='su_del' alt='Delete' disabled>
<input type=image class='but_on' id='su_clr' src='buttons/but_clr_on.jpg' name='su_clr' alt='Clear'>

<img class='but_disabled' id='su_upd' src='buttons/but_upd_disabled.jpg' name='su_upd' alt='Restore' onclick='su_form.reset();'><br>
<input type=image class='but_disabled' id='su_prev' src='buttons/but_prev_disabled.jpg' name='su_prev' alt='Previous' disabled>
<input type=image class='but_disabled' id='su_next' src='buttons/but_next_disabled.jpg' name='su_next' alt='Next' disabled>
</div>
<span style='position: absolute; left: 190px; top: 185px;'></span>
</form>
</div>



Denne div er den første med problemet.

<div style='position: absolute; left: 185px; top: 245px; width: 310px; height: 300px; border-width: 1px; border-style: solid; border-color: #AAA898;'>

<form action='sd_admin.php' method='post' name='depa_form'>

<span style='position: absolute; left: 105px; top: 5px;'><b>Departments :</b></span>

<span style='position: absolute; left: 5px; top: 30px;'>New :</span>

<span style='position: absolute; left: 105px; top: 30px;'><input type=text name='sd_new' value=''></span>

<span style='position: absolute; left: 5px; top: 55px;'>Departments :</span>
<span style='position: absolute; left: 105px; top: 55px;'><select name='sd_depa' size='10'><option>ACC East<option>ACC West<option>ATWR<option>CH APP<option>CH ASS<option>CH TWR<option>COIF

</select></span>

<div align='center' id='butContainer' style='position: absolute; left: 280px; top: 30px; padding: 1px;' onmouseover='fnBut("1",event.target);' onmouseout='fnBut("2",event.target);' onmousedown='fnBut("3",event.target);' onmouseup='fnBut("4",event.target);'>
<input type=image class='but_on' id='sd_save' src='buttons/but_save_on.jpg' name='sd_save' alt='Save'>
</div>

<div align='center' id='butContainer' style='position: absolute; left: 280px; top: 55px; padding: 1px;' onmouseover='fnBut("1",event.target);' onmouseout='fnBut("2",event.target);' onmousedown='fnBut("3",event.target);' onmouseup='fnBut("4",event.target);'>
<input type=image class='but_on' id='sd_del' src='buttons/but_del_on.jpg' name='sd_del' alt='Delete'>
</div>

<span style='position: absolute; left: 105px; top: 230px;'></span>

</form></div>



Denne div er den anden med problemet.

<div style='position: absolute; left: 505px; top: 245px; width: 310px; height: 300px; border-width: 1px; border-style: solid; border-color: #AAA898;'>

<form action='sb_admin.php' method='post' name='book_form'>

<span style='position: absolute; left: 105px; top: 5px;'><b>Books :</b></span>

<span style='position: absolute; left: 5px; top: 30px;'>New :</span>

<span style='position: absolute; left: 105px; top: 30px;'><input type=text name='sb_new' value=''></span>

<span style='position: absolute; left: 5px; top: 55px;'>Books :</span>
<span style='position: absolute; left: 105px; top: 55px;'><select name='sb_book' size='10'><option>Gen. ATS<option>LAI ACC<option>LAI BI TWR<option>LAI CH APP</select></span>

<div align='center' id='butContainer' style='position: absolute; left: 280px; top: 30px; padding: 1px;' onmouseover='fnBut("1",event.target);' onmouseout='fnBut("2",event.target);' onmousedown='fnBut("3",event.target);' onmouseup='fnBut("4",event.target);'>
<input type=image class='but_on' id='sb_save' src='buttons/but_save_on.jpg' name='sb_save' alt='Save'>
</div>

<div align='center' id='butContainer' style='position: absolute; left: 280px; top: 55px; padding: 1px;' onmouseover='fnBut("1",event.target);' onmouseout='fnBut("2",event.target);' onmousedown='fnBut("3",event.target);' onmouseup='fnBut("4",event.target);'>
<input type=image class='but_on' id='sb_del' src='buttons/but_del_on.jpg' name='sb_del' alt='Delete'>
</div>

<span style='position: absolute; left: 105px; top: 230px;'></span>

</form>
</div></body>
</html>
Avatar billede olebole Juniormester
23. oktober 2005 - 20:36 #1
<ole>

Prøv med et link  :)

/mvh
</bole>
Avatar billede johan.o Nybegynder
24. oktober 2005 - 00:06 #2
Ja, det kunne sikkert hjælpe ;-)

http://twobarrel.dk/eksperten/s_form_write_runtime.php

Funktionaliteten er disabled da jeg ikke er færdig med at checke for sikkerheds huller endnu.

Johan
Avatar billede roenving Novice
24. oktober 2005 - 12:49 #3
Når den samme kode køres fra min editor laver den aldrig fejl ?-)

-- jo zq, når jeg refererede direkte dine images, stylesheet og script, så blev den usikker ...
Avatar billede johan.o Nybegynder
24. oktober 2005 - 19:13 #4
Hmm, hvis jeg på et skærmbillede, hvor border ikke er tegnet, minimere vinduet og så maksimere det igen, så kommer border frem. Hvis jeg laver en onload funktion der flytter alle div's bare 1px så kommer de også frem. Så konklusionen må være at koden fungere som forventet men det er som om IE ikke 'når' at tegne borderne......

Nogen der har nogle ideer til hvordan jeg sikre at mine border's rent faktisk kan ses hver gang ?

Johan
Avatar billede johan.o Nybegynder
25. oktober 2005 - 22:25 #5
Nå, nu virker det, men jeg er ikke 'stolt' af løsningen men det var det eneste der kunne få borders tegnet regelmæssigt.

<script>
funktion oFunc()
{
document.getElementById('oDiv').style.borderColor='#AAA898';
}
</script>

<body onload='oFunc'>
<div id='oDiv' style='border: 1px solid (+dokument baggrundsfarve)'>
</body>

Border farven som defineres i <div> er den samme som baggrundsfarven da det forhindre at der kommer et synligt farveskift, når siden er loaded og scriptet køres. Det vigtigeste er dog at den er forskellig fra den farve der sættes i scriptet da det eller ikke har nogen effekt.

Håber nogen kan bruge det til noget en dag :-)

Mvh Johan
Avatar billede johan.o Nybegynder
29. oktober 2005 - 18:06 #6
Og man lærer så længe man lever :), jeg har nu lavet strukturen om således at jeg ikke bruger 'position: absolute', men istedet har placeret indholdet i tabeller som centreres med 'margin: 0 auto;', og det spiller bare bonus. Ingen problemer med at borders ikke opdateres.

Mvh. Johan
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester