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

Help with select tag

P: n/a
Hey, would appreciate some help with these two issues with the code
below...

1) In IE, when using the dropdown and the mouse goes outside the box,
the selection is filled. This might be because the focus is briefly
changed briefly when the table responds to the onmouse out... is there
a way to prevent this?

2) I'd like to make the div on a seperate layer and bring it down so
it overlaps with the table/box border a little... have tried doing
this with css positioning but no luck... any suggestions?

thanks heap :) ... jason
<div><b>Title</b></div>
<table cellspacing="0" cellpadding="0" border="0">
<tr><td onmouseover="this.style.backgroundColor='#aaaaaa'; "
style="background-color:#dddddd"
onmouseout="this.style.backgroundColor='#dddddd';" >
<table cellspacing="1" cellpadding="6" border="0"
width="100%"><tr><td valign="top" bgcolor="#ffffff"
background="images/heart.gif">

<table>
<tr>
<td align="right">Select</td>
<td>&nbsp;</td>
<td><select width="20">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select></td>
</tr><tr>
<td align="right">Age</td>
<td>&nbsp;</td>
<td><input value=18 size=2> to <input value=99
size=2></td>
</tr>
</table>
</td></tr></table>
</td></tr></table>
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
2) is easy enough to do but 1) is a little more tricky as when you go to the
select box the TD loses focus.

The is the closest fix I could think of and may not be exactly what you
require. See what you think

Luke
=========

<div id="page">
<div id="title" style="position:relative; top:8px; left:3px;
z-index:10"><b>Title</b></div>
<div id="content" style="z-index:5">
<table cellspacing="0" cellpadding="0" border="0">
<tr><td id="cell_01" style="background-color:#dddddd">
<table cellspacing="1" cellpadding="6" border="0"
width="100%"><tr><td valign="top" bgcolor="#ffffff"
background="images/heart.gif">

<table>
<tr>
<td align="right">Select</td>
<td>&nbsp;</td>
<td><select width="20"
onfocus="cell_01.style.backgroundColor='#aaaaaa';"
onblur="cell_01.style.backgroundColor='#dddddd';">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select></td>
</tr><tr>
<td align="right">Age</td>
<td>&nbsp;</td>
<td><input value=18 size=2
onfocus="cell_01.style.backgroundColor='#aaaaaa';"
onblur="cell_01.style.backgroundColor='#dddddd';"> to <input value=99
size=2 onfocus="cell_01.style.backgroundColor='#aaaaaa';"
onblur="cell_01.style.backgroundColor='#dddddd';"> </td>
</tr>
</table>
</td></tr></table>
</td></tr></table>
</div>
</div>
Jul 20 '05 #2

P: n/a
thanks for your help Luke :)

Below is a solution I came up with. Not exactly elegant!

Jason

<table width="100%" cellspacing="0" cellpadding="0"
border="0"><tr><td> <div id="t1"
onmouseover="this.style.backgroundColor='#999999'; "
onmouseout="javascript:{if (t1Status==0)
{this.style.backgroundColor='#dddddd';}}"
style="background-color:#dddddd" valign="top"> <table
cellspacing="1" cellpadding="6" border="0" width="100%"><tr><td
valign="top" bgcolor="#ffffff">
<br/>

<table width=100%>
<tr>
<td align="right">State</td>
<td>&nbsp;</td>
<td>
<select
onfocus="javascript:{t1Status=1;setTimeout('t1Stat us=0;', 3000);}"
onblur="javascript:{t1Status=0;
document.all.t1.style.backgroundColor='#dddddd';}" >
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</td>
</tr>
</table>
</td></tr></table></td></tr></table>
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.