IE, javascript & css= botsing...

[henk11]

Hallo,

Ik ben een tabvenster aan het maken dat standaard al 1 form weergeeft en als je op 1 van de 2 tabs na de eerste gaat staan kun je nog meer forms tevoorschijn toveren
Ik had een probleempje met de Focus op de <input text gedeeltes, maar dat heb ik opgelost d.m.v. javascript.

Maar (je raadt het al), ik ging eens naar IE6 en ja, daar werkt het natuurlijk weer niet, ik krijg een error die zegt dat het element niet zichtbaar is, blablabla. Dus (de css werkt met display: block en none etc.) ik verander het javascript zodat de focus pas verzet wordt als er iets weergeven wordt: In FF werkt alles nu perfect, maar in IE natuurlijk niet (alleen nog maar getest in IE6).

Toen haalde ik de css eens weg, en toen werkte het ook in IE6, dus de fout zit in de css, ik dacht eerst dat ook dit weer aan de display: none en block gedeeltes lag, maar als ik die weghaal is het hele tab-principe weg (schiet ik niet echt veel mee op). En ik kan het ook niet veranderen, display: none is bijv. geen vervanger voor. Dus ik denk dat het zoals gewoonlijk weer een bug in IE is (omdat het in FF wel werkt). Maar ik weet niet welke, bekijk dit (als je dat kan) maar eens in IE6 (misschien dat het ook fout gaat in IE7):

http://www.owicro.com/redtemplate.html

Ik zal de css wel posten:

.divmenu {
margin-top: 200px;
margin-left: 300px;
}

.form {
margin-top: 200px;
margin-left: 300px;
height: 50px;
width: 400px;
background-color: #FFFFFF;
border: solid 1px #c7c7c7;
}

.firstfield {
margin-top: 200px;
margin-left: 300px;
height: 50px;
width: 400px;
background-color: #FFFFFF;
border: solid 1px #c7c7c7;
}

ul { 
margin:0px; 
}

 li {
float:left;
list-style-type:none; 
    }

.siteform ul li ul {
display: none;
}

.imagesform ul li ul {
display: none;
}

ul li:hover a,
ul li a:hover {  
    display:inline;
}

ul li:hover ul,
ul li a:hover ul  {
    display:block;
    position:absolute; 
    top:-50px; 
    left:-50px;
    }
        
.webform ul li ul {
    display:block;
    position:absolute; 
    top:-50px; 
    left:-50px;
    }

 li a { 
text-decoration:none; 
font-size:11px; 
font-family:verdana, arial, sans-serif; 
line-height:23px;
float:left; 
margin-right: 0px;
height:25px;
text-align:center; 
padding:0 15px;
background-image: url(tabbg.jpg);
background-repeat: repeat-x; 
border-left: solid 1px #c7c7c7;
border-right: solid 1px #c7c7c7;
font-style:normal; 
color:#000;
}

De html kun je in de broncode bekijken....en als je wilt is dit het path naar het javascript:

http://www.owicro.com/formfix.js

Ik hoop dat iemand weet wat IE hier fout in ziet,

Alvast bedankt!

 

[JeroenE]

Probeer eens het volgende javascript te gebruiken. Het enige verschil is dat de "if"'s enkele haakjes bij gekregen hebben. Het zou wel kunnen dat het zo niet meer in FF werkt, maar dat weet ik niet. Dat zal je moeten testen.

  function setfirstFocus() {
   if ((document.getElementById('webtext')) && (document.getElementById('webtext') != 'none')) {
      document.getElementById('webtext').focus();
   }
}
  function setimageFocus() {
   if ((document.getElementById('imagetext')) && (document.getElementById('imagetext') != 'none')) {
      document.getElementById('imagetext').focus();
   }
}
  function setsiteFocus() {
   if ((document.getElementById('sitetext')) && (document.getElementById('sitetext') != 'none')) {
      document.getElementById('sitetext').focus();
   }
}

Greetz : Jeren.

 

[KwarK]

Vraag verplaatst van PHP naar Javascript

 

[henk11]

Helaas, het javascriptje werk niet: nog steeds in FF, maar nog steeds niet in IE6, ik ga het ook eens testen in IE5.5 en IE7, en als het daar hetzelfde is, EDIT ik het wel
(In IE6 is de error nog steeds hetzelfde als voorheen.....)

In alle andere browsers(netscape, mozilla, opera, FF, etc.): werkt perfect!
In IE7: werkt, maar verkeerd: als ik iets in een tab typ, ik ga naar een andere tab en ik typ daar wat en ik ga weer terug naar de eerste tab en ik typ weer wat dan komt dat voor wat ik eerst getypt heb te staan: ik denk dat ik dit wel op kan lossen,

IE5.5 en IE6: allebei dezelfde error, letterlijk deze:
"Kan de focus niet verplaatsen naar het besturingselement omdat het element niet zichtbaar is, niet ingeschakeld is of een type is dat geen focus accepteert"

De laatste is in ieder geval niet waar: ik heb het zonder css geprobeerd en toen 'accepteerde het type de focus wel', dus het is een van de 2 bovenste errors, of iets anders.....

 

[henk11]

Het probleem is nog steeds niet opgelost, ik heb al veel geprobeerd, maar IE blijft tegenwerken: IE7, IE6 en IE5 is toch ongeveer 60% van alle browsers dus ik MOET het oplossen, ik gebruik dit gedeelte namelijk op de hoofdpagina van mijn site, en als die niet goed werkt heb ik een probleem. Weet echt niemand wat er met IE aan de hand is, en nog veel liever hoe je het oplost?

Alvast bedankt!