letters in a word are displayed properly in IE7 and not in IE8

I am newbie to my project. Here we use Javascript,CSS and HTML to display web page. I am not at all familiar with all these. In IE8, letters in a word are displaying verticall开发者_运维问答y but the same code works in IE7.

It should appear as "Channel Preference" and not as

c

h

a

n

n

e

l

p

r

e

f

r

e

n

c

e

CSS parameters are as follows ::

.SubjectAreaChoiceAnchor, .SubjectAreaChoiceAnchor:link, .SubjectAreaChoiceAnchor:visited  
{  
   font: normal 11px Tahoma;  
   color: #000000;  
   padding: 2px 2px 2px 29px;  
    display: block;  
    cursor: default;  
    white-space: nowrap;  
    text-decoration: none;  
} 

.SubjectAreaChoiceAnchor:hover  
{  
    color: black;  
    background-color: #D1DDE7;  
    padding: 1px 2px 1px 29px;  
    border-top: solid 1px white;  
    border-bottom: solid 1px white;  
    margin: 0px 0px 0px 0px;  
}  

HTML Looks like this::

<  div class="dialogBody" style="max-height: 400px; overflow-y: auto;">  
<  div style="display: block;" id="idExtTagSelector">  
 <  table cellspacing="0" cellpadding="0">  
   <  a onclick="WebExpressionSelector.onChoose('idExtTagSelector','channelPref','','true','Channel Preference'); return false;" href="javascript:void(null)" displayname="Channel Preference" usequotes="true" defaultvalue="" name="channelPref" eid="idExtTagSelector" class="SubjectAreaChoiceAnchor" id="idWebExprchannelPref">Channel Preference
<  /a>  
<  /table><  /div><  /div>

Please help.Thanks in advance.

Prathima

As mentioned your HTML table isn't formatted correctly. The correct way for you to have a table should be as follows:

<table>
<tr>
<td>content</td>
</tr>
</table>

In your case, if you must use a table to get all the values next to each other the table should be as follows:

<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>

You should also only really use tables for tabular data. Anything else should be styles via the CSS.

First and foremost you have to type your html correctly, expecially closing tags, and the table structure needs at least a <tr> and <td> inside. Then you can see if the problem persist and we can try to find a solution.

<div class="dialogBody" style="max-height: 400px; overflow-y: auto;">  
    <div style="display: block;" id="idExtTagSelector">  
         <table cellspacing="0" cellpadding="0">
             <tr>
                 <td>
                   <a onclick="WebExpressionSelector.onChoose('idExtTagSelector','channelPref','','true','Channel Preference'); return false;" href="javascript:void(null)" displayname="Channel Preference" usequotes="true" defaultvalue="" name="channelPref" eid="idExtTagSelector" class="SubjectAreaChoiceAnchor" id="idWebExprchannelPref">Channel Preference
                    </a>
                 </td>
             </tr>
        </table>
    </div>
</div>