Marked radio button not showing in IE8

[Powerponken]

Hi,

I have received a web application that needs to be upgraded for IE8. IE7 has been used earlier showing no problems but when testing with IE8 there were a lot of strange things showing up on the screen. I have managed to fix most of them that I have discovered but now I'm stuck in a radio button problem.
It works fine when using the compatibility mode. It does not work in Firefox for example. I'm no star regarding PHP/HTML/Javascript because I have not been working with these earlier.

The application takes an ID, a name and many more possible choices and collects data from various databases and draws a picture showing how different components are connected to eachother and the names/geographic location.

I can choose three different levels regarding how complex view I want to have – Basic, Advanced and Expert. The level chosen is marked using a radio button. When logging on to the application the next time, the last choice of level is remembered and the next picture being drawn is according to that. I can change the level and it works fine both in IE7 and IE8.

The problem in IE8 is that when entering an ID for example, the radio buttons don’t show what level that is chosen when the picture is drawn. All three buttons are blank. You can see that the application do remember what level that is chosen when drawing the picture but it does not show in the buttons. I can change the level and the button is marked when I click it on the page but the next page containg the drawing of another ID does not show the level in the buttons – but the level is still right in the picture.

There is a template used for the radio buttons that looks like this:

<td>&nbsp;<input class='radio' [id="__id__"] type="radio"  name="typeselection"  [==default==checked] onclick=showtype('__type__') value='' ></td><td onclick=showtype('__type__')>__label__&nbsp;</td>

When doing “View source” in the browser it looks exactly the same way in both modes in IE8 where this code is used:

<table><tr>
 
<td>&nbsp;<input class='radio' id='radio_GFX1LV' type='radio'  name='typeselection'   onclick=showtype('GFX1LV') value='' ></td><td onclick=showtype('GFX1LV')>Basic&nbsp;</td>
 
<td>&nbsp;<input class='radio' id='radio_GFX' type='radio'  name='typeselection'   onclick=showtype('GFX') value='' ></td><td onclick=showtype('GFX')>Advanced&nbsp;</td>
 
<td>&nbsp;<input class='radio' id='radio_HTML' type='radio'  name='typeselection'   onclick=showtype('HTML') value='' ></td><td onclick=showtype('HTML')>Expert&nbsp;</td>
 
</tr></table>

I have been manipulating the template and found out that it seems to be [id="__id__"] that should affect the showing of which level that has been chosen. When changing it I can get the same behaviour in the compatibility mode – no button is marked.

The CSS used for the radio buttons looks like this:

input.radio {
    background-color: #ffffff;
    border: none;
    vertical-align: middle;
}

I have googled a lot trying to find anybody that has experienced the
same problem without any success. What is the problem when IE8 doesn't seem to care about the id and mark the correct radio button?

Regards,
Kalle

[divyakrishnan]

Very simple modification,

Change your first script as follows....

<td>&nbsp;<input class='radio' [id="__id__"] type="radio" name="typeselection" checked onclick=showtype('__type__') value='' ></td><td onclick=showtype('__type__')>__label__&nbsp;</td>

[Powerponken]

Very simple modification,

Change your first script as follows....

<td>&nbsp;<input class='radio' [id="__id__"] type="radio" name="typeselection" checked onclick=showtype('__type__') value='' ></td><td onclick=showtype('__type__')>__label__&nbsp;</td>

Hi divyakrishnan,

Thank you for your reply!

The radio button is now visible but unfortunately it does not show the correct value. It is always showing the Expert level but the picture can show the Basic level for example. Clicking another of the levels changes the picture and shows the right level in the radio button. Next time the same picture is drawn, the picture is showing the right(previous chosen) level but the radio button is showing Expert level which then is not correct.

Regards,
Kalle