ryank
ryank

Reputation: 395

HTML select box doesnt highlight last option

My code can be found here: http://macrorevolution.com/calculators/tdee/

When I put my mouse over the last <option></option> it does not highlight as opposed to the rest of the options. I've tried adding more options and each time it is the last option that does not highlight. How can I fix this?

<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
$activelevel = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
    //&& isset($_POST['activelevel'])
    $agev = $_POST['agev'];
    $feetv = $_POST['feetv'];
    $inchesv = $_POST['inchesv'];
    $weightv = $_POST['weightv'];
    $sex = $_POST['sex'];
    $activelevel = $_POST['activelevel'];
    $totalheightv = $inchesv + ($feetv*12);
    $heightcm = $totalheightv*2.54;
    $weightkg = $weightv/2.2;

    if($activelevel=='1v') $activelevel=1.2;
    else if($activelevel=='2v') $activelevel=1.375;
    else if($activelevel=='3v') $activelevel=1.55;
    else if($activelevel=='4v') $activelevel=1.725;
    else if($activelevel=='5v') $activelevel=1.9;
    else echo "error";
    //echo $activelevel;

    if($sex=='male') $answer = $activelevel * (66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev));
    if($sex=='female') $answer = $activelevel * (665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev));


}
?>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Total Daily Energy Expenditure</title>

<style type="text/css">
.bold {
font-weight:bold;
}
  table {
    font-size:14px;
    font-family: 'PT Sans', sans-serif;
    background-color:#FFFFFF;
  }
tr.spaceUnder > td
{
  padding:0em 1em 1em 0em;

}
p.ss {
    font-size:30px; 
    text-align:center
}
input {
margin-right:5px;
margin-left:5px;
}
.bp
{
border: 1px solid #000000;
text-align:center;
}


</style>
</head>
<body>
<div class="box pt20">
<p class="ss">MacroRevolution TDEE Calculator</p><br>
<table width='80%' style="margin: 0 auto;">
    <tr class="spaceUnder">
    <td colspan="4">
TDEE = Total Daily Energy Expenditure. TDEE is the amount calories your body burns in a 24 hour period which includes eating, sleeping, excercising, and working.
    </td>
    </tr>
</table>

<form method='post' action=''>
<table width='80%' style="margin: 0 auto;">


    <tr class="spaceUnder">
        <td>Age:</td>
        <td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
    </tr>
    <tr class="spaceUnder">
        <td>Height:</td>
        <td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft

        <input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
    </tr>
    <tr class="spaceUnder">
        <td>Weight:</td>
        <td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
    </tr>
    <tr class="spaceUnder">
        <td colspan="2"><input type='radio' name='sex' value='male'>Male
                        <input type='radio' name='sex' value='female'>Female</td>
    </tr>
        <tr class="spaceUnder">
    <td colspan="2">
        <select name="activelevel">
  <option name='activelevel' value='1v'>Little or no Excercise / Desk job</option>
  <option name='activelevel' value='2v'>Light exercise / Workout 1-3 days/week</option>
  <option name='activelevel' value='3v'>Moderate exercise / Workout 3-5 days/week</option>
  <option name='activelevel' value='4v'>Heavy exercise / Workout 6-7 days/week</option>
  <option name='activelevel' value='5v'>Very heavy exercise / Physical job / Workout 2 times a day</option>
         </select>
        </td>
        </tr>

    <tr class="spaceUnder">
        <td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
    </tr>
    <tr class="spaceUnder">
        <td colspan="2">Your TDEE is <input type='text' style="width: 50px; font-weight:bold;"  value='<?php echo round($answer,0); ?>' /><strong>k/cal per day</strong>  </td>
    </tr>

</table>
</form>


<table width='80%' style="margin: 0 auto;">
    <td colspan="4">


        TDEE = BMR x Activity Level <br>
    Where the formula for BMR(Harris-Benedict formula) is <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>

    W = Weight in kilograms (lbs/2.2)<br>
    H = Height in centimeters (inches x 2.54)<br>
    A = Age in years <br><br><br>

        <table width='500px' style="border: 1px solid;" class="bp">
    <tr class="bp">
    <th class="bp">Amount of Activity</th>
    <th class="bp">Description</th>
    <th class="bp">TDEE Activity Level</th>
    </tr>
    <tr class="bp">
    <td class="bp">Sedentary</td>
    <td class="bp">Little or no Excercise / Desk job</td>
    <td class="bp">1.2</td>
    </tr>
    <tr class="bp">
    <td class="bp">Lightly Active</td>
    <td class="bp">Light exercise / Workout 1-3 days/week</td>
    <td class="bp">1.375</td>
    </tr>
    <tr class="bp">
    <td class="bp">Moderately Active</td>
    <td class="bp">Moderate exercise / Workout 3-5 days/week</td>
    <td class="bp">1.55</td>
    </tr>
    <tr class="bp">
    <td class="bp">Very Active</td>
    <td class="bp">Heavy exercise / Workout 6-7 days/week</td>
    <td class="bp">1.725</td>
    </tr>
    <tr class="bp">
    <td class="bp">Extremely Active</td>
    <td class="bp">Very heavy exercise / Physical job / Workout 2 times a day</td>
    <td class="bp">1.9</td>
    </tr>
    </table>  
    <br><br><br>
        </tr>
</table>
</div>

</body>
</html>

Upvotes: 2

Views: 302

Answers (1)

Arthur Weborg
Arthur Weborg

Reputation: 8580

Update This Chrome bug ticket, similar to the bug ticket listed below except that this ticket is specific to Chrome 32.0.1700.76


I am assuming you are using Chrome?

My coworker and I ran into this issue yesterday on every page we had drop-downs.

There happens to be a chrome bug describing the exact same issue. This bug ticket states a different version of chrome in the head of the ticket, but if you read the comments they note it also affects other versions of Chrome. forum post I read happened to be the same as my browser/OS (mine's 64-bit)

Chrome Version: 32.0.1700.76 m Operating System: Windows 7

To verify try the following steps in your chrome browser (steps found in bug ticket)

What steps will reproduce the problem?

  1. Launch Chrome and open "chrome://settings"
  2. Click on any dropdown arrow to open the dropdown list
  3. Mouse hover on all the dropdown items and observe

I don't think the issue is your code, it's Chrome. So there isn't anything you can do at this time.

Everything said, even though it doesn't highlight, it should still be clickable.

Upvotes: 2

Related Questions