By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

TAB Order not working properly in IE6

P: 58
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
Share this Question
Share on Google+
1 Reply


P: 58
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.