It's a name game. Seriously, when IE goes looking for:
Code:
<div id="sms" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Short message service
</div>
<div id="mms" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Multimedia messaging service
</div>
The first thing it sees is:
Code:
<tr>
<td style="padding:5px 70px 5px 0px;font-weight:bold"><a href="#" rel="sms">SMS</a>
<select name="sms"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>
<td style="padding:5px 10px 5px 0px;font-weight:bold"><a href="#" rel="mms">MMS</a>
<select name="mms" ><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>
</tr>
and it gets confused. So the rel/id used for a tip needs to be unique to the page, and in IE this includes named elements. So you could have:
Code:
<tr>
<td style="padding:5px 70px 5px 0px;font-weight:bold"><a href="#" rel="smstip">SMS</a>
<select name="sms"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>
<td style="padding:5px 10px 5px 0px;font-weight:bold"><a href="#" rel="mmstip">MMS</a>
<select name="mms" ><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</td>
</tr>
and:
Code:
<div id="smstip" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Short message service
</div>
<div id="mmstip" class="balloonstyle" style="width: 350px; background-color:#E67817" dir="ltr">
The well known service. Multimedia messaging service
</div>
That would work.
Bookmarks