467,116 Members | 1,271 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,116 developers. It's quick & easy.

TAB Order not working properly in IE6

Hi All,

I am facing an issue while testing my app for the cross browser compatibility. The scenario is as follows:

I am having a component which is having a radio button against which i am having a label on click of which the radio button is selected. Below this radio button and lable i am having a textbox on click of which also the radio button gets selected.
Below this whole arrangement i am having a label and below this i m having a textarea. Again clicking of this lable or the text area the above mentioned radio button is selected. Now when i try to tab the focus changes well(in top to down order) in Mozilla and IE7 but in IE6 when i try to tab the second label which is above the text area gets selected first and then when i again tab the text box above that gets the focus. I am posting the code snippet below:

<div>
<input type="radio" id="nameLink" name="links" onfocus="checkRadioLinkName();" checked="checked" alt="Link Name" title="Select to enter link name.">
<label for="nameLink" class="crpl4f">Name for link:</label>
<label for="nameLink">(e.g., The Times)</label>
</div>

<div class="paddingLeft22" >
<input type="text" id="linkName" name="linkName" onclick="checkRadioLinkName();" size="41" alt="Name for link (e.g., The Times)" title="Name for link (e.g., The Times)" >
</div>

<div class="paddingLeft22 marginBottom15" style="padding-top:5px;">
<label for="nameLink" class="crpl4f">URL:</label>
<label for="nameLink">(e.g., http://www.timesonline.co.uk/tol/news)</label>
<textarea name="urlLink" rows="2" onclick="checkRadioLinkName();" class="textCRP" id="urlLink" title="URL for link (e.g., http://www.timesonline.co.uk/tol/news/)" alt="URL for link (e.g., http://www.timesonline.co.uk/tol/news/)"></textarea>
</div>
The above code produces a effect something like this:

Radio button Name for link: (e.g., The Times) (label)
Text Box
URL: (e.g., http://www.timesonline.co.uk/tol/news)(Label)
TextArea
Now if i am tabbing somewhere from top of the page the focus change something like this
Radio button or TextBoox
TextArea

its working fine in mozilla but in IE6 its behaving something like this:
first focus goes to the label "URL: (e.g., http://www.timesonline.co.uk/tol/news)" and then to the textbox.

Can anyone please help me.
Mar 11 '08 #1
  • viewed: 2132
Share:
1 Reply
Hi All,

I am facing an issue while testing my app for the cross browser compatibility. The scenario is as follows:

I am having a component which is having a radio button against which i am having a label on click of which the radio button is selected. Below this radio button and lable i am having a textbox on click of which also the radio button gets selected.
Below this whole arrangement i am having a label and below this i m having a textarea. Again clicking of this lable or the text area the above mentioned radio button is selected. Now when i try to tab the focus changes well(in top to down order) in Mozilla and IE7 but in IE6 when i try to tab the second label which is above the text area gets selected first and then when i again tab the text box above that gets the focus. I am posting the code snippet below:

<div>
<input type="radio" id="nameLink" name="links" onfocus="checkRadioLinkName();" checked="checked" alt="Link Name" title="Select to enter link name.">
<label for="nameLink" class="crpl4f">Name for link:</label>
<label for="nameLink">(e.g., The Times)</label>
</div>

<div class="paddingLeft22" >
<input type="text" id="linkName" name="linkName" onclick="checkRadioLinkName();" size="41" alt="Name for link (e.g., The Times)" title="Name for link (e.g., The Times)" >
</div>

<div class="paddingLeft22 marginBottom15" style="padding-top:5px;">
<label for="nameLink" class="crpl4f">URL:</label>
<label for="nameLink">(e.g., http://www.timesonline.co.uk/tol/news)</label>
<textarea name="urlLink" rows="2" onclick="checkRadioLinkName();" class="textCRP" id="urlLink" title="URL for link (e.g., http://www.timesonline.co.uk/tol/news/)" alt="URL for link (e.g., http://www.timesonline.co.uk/tol/news/)"></textarea>
</div>
The above code produces a effect something like this:

Radio button Name for link: (e.g., The Times) (label)
Text Box
URL: (e.g., http://www.timesonline.co.uk/tol/news)(Label)
TextArea
Now if i am tabbing somewhere from top of the page the focus change something like this
Radio button or TextBoox
TextArea

its working fine in mozilla but in IE6 its behaving something like this:
first focus goes to the label "URL: (e.g., http://www.timesonline.co.uk/tol/news)" and then to the textbox.

Can anyone please help me.
Hi Frens,

PLease dont break your head against this issue as i have got where the problem was. Actually i was using the for attribute wrongly.
Thanks
Mar 11 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by Chris Gordon-Smith | last post: by
4 posts views Thread by qbproger@gmail.com | last post: by
104 posts views Thread by Beowulf | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.