Jumping tab in form

[seibertt]

Hello,

I have problem with this form (attached as zip file). This problem is only in IE.

This form has six tabs and problem is on the fifth. There are two selects where you can switch values form one to second. When I click on button value is taken and displayed correctly but tab make a jump about one row .

Can somebody help me with that ?

 

[seibertt]

There is zip file

http://www.webdeveloper.com/forum/attachment.php?attachmentid=5924

 

[Rekcor]

The zip file contains numerous files, please copy/paste relevant code in your question using the [ code ] and [ / code ] tags of this form.

We'd like to help you, but we do not have the time to read a couple hundred lines of code.

 

[seibertt]

Hi,

you can run tabs.html in IE. I give there zip file because I think it would be better you can see what's wrong.

I think the wrong code is in function prenes(from, to, neprenaset) in file readonly_form.php. I don't know if there is some mistake, because in Firefox is it OK.

function prenes(from, to, neprenaset){
  var elemFrom = document.getElementById(from);
  var elemTo = document.getElementById(to);
  var remove = new Array();
  if (elemFrom){
    if (elemTo){
      if (elemFrom.tagName=="SELECT" && elemTo.tagName=="SELECT"){
        for (i = 0; i<elemFrom.options.length ; i++){
      
          if (elemFrom.options[i].selected) {
            if (maPrenaset(elemFrom.options[i].value, neprenaset)){
              
              var elOptNew = document.createElement('option');
              elOptNew.text = elemFrom.options[i].text;
              elOptNew.value = elemFrom.options[i].value;
              
              if (elemTo.options.length>0){
              index = elemTo.selectedIndex;
              var elOptOld = elemTo.options[elemTo.options.length-1];  
              }
              else{
                index = 0;
                var elOptOld = null;
              }
              try {
               elemTo.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
              }
              catch(ex) {
                elemTo.add(elOptNew, index); // IE only
              }
          }
        }
        }
        
        for (i = elemFrom.length - 1; i>=0; i--) {
          if (elemFrom.options[i].selected) {
              elemFrom.remove(i);  //ze zdroje odstrani radku
          }
        }
      }
    }
  }
}

 

[seibertt]

Hello, nobody cannot give me some advice ?

 

[BillyRayPreachersSon]

That's really odd. I can't see any reason for that to happen. It looks like IE is switching to the layout that you would see if you removed this style from your CSS:

dl.tabs {
	margin: 0;
	padding: 1em 0;
}

Maybe you could find another way of achieving that look without using that CSS?

That aside, you have the function "prenes" in multiple places. You really should go through and remove any unnecessary duplication of functions like that.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[seibertt]

Hello Dan,

Thanks a lot for your advice. I've got a solution.

I removed code as you wrote and then I have in

dl.tabs dd.active, dl.tabs dd.inactive {
	border: 1px solid #09f;
	padding: 1em;
	margin: -12px 0 0 0;
	background-color: #FFFFD6;
	width:800px;
	clear: both;
}

margin -12px. I chanched it to 0 and now it's running fine.

Thank you again

Cheers Tomas