Popups when hovered over not showing up (tooltip) - html

I will include my script below, I am having a problem where my pop ups do not show up. I have researched online and am not sure where in my code I went wrong. I am trying to include a pop up everywhere it says data-tooltip.
Here is the code for the tooltip
[data-tooltip],
[data-tooltip-uc],
[data-tooltip-ul],
[data-tooltip-ur],
[data-tooltip-lc],
[data-tooltip-ll],
[data-tooltip-lr] {
position: relative;
z-index: 2;
cursor: pointer;
}
[data-tooltip]:before {
bottom: 110%;
content: attr(data-tooltip);
}
[data-tooltip]:before,
[data-tooltip-uc]:before,
[data-tooltip-ul]:before,
[data-tooltip-ur]:before,
[data-tooltip-lc]:before,
[data-tooltip-ll]:before,
[data-tooltip-lr]:before {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
white-space: normal;
}
[data-tooltip]:after,
[data-tooltip-uc]:after {
bottom: 100%;
}
[data-tooltip]:after,
[data-tooltip-uc]:after,
[data-tooltip-ul]:after,
[data-tooltip-ur]:after,
[data-tooltip-lc]:after,
[data-tooltip-ll]:after,
[data-tooltip-lr]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
margin-left: 0px;
width: 0px;
border-top: 8px solid black;
border-top: 10px solid hsla(0, 0%, 20%, 0.9);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: transparent;
content: " ";
font-size: 0;
line-height: 0;
}
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
<div id="xbuilder">
<table>
<caption>Map of real-time streamflow compared to historical streamflow for the day of year<br>
<span style="font-size: 0.50em;">(Choose a region and then click "GO" to view a regional map) <br><span style="color: red;">(Warning: It may take several minutes to process)</span></span>
</caption>
<tbody>
<tr>
<td>
<div>
États-Unis :
<span data-tooltip='Choose a US state'>
<select name='usst' id='usst' size='1' onchange='javascript:set_st(this);' >
<option value=''>États</option>
<option value='al'>Alabama</option>
<option value='ak'>Alaska</option>
<option value='az'>Arizona</option>
<option value='ar'>Arkansas</option>
<option value='ca'>Californie</option>
<option value='co'>Colorado</option>
<option value='ct'>Connecticut</option>
<option value='de'>Delaware</option>
<option value='dc'>District de Colombie</option>
<option value='fl'>Floride</option>
<option value='ga'>Géorgie</option>
<option value='hi'>Hawaï</option>
<option value='id'>Idaho</option>
<option value='il'>Illinois</option>
<option value='in'>Indiana</option>
<option value='ia'>Iowa</option>
<option value='ks'>Kansas</option>
<option value='ky'>Kentucky</option>
<option value='la'>Louisiane</option>
<option value='me'>Maine</option>
<option value='md'>Maryland</option>
<option value='ma'>Massachusetts</option>
<option value='mi'>Michigan</option>
<option value='mn'>Minnesota</option>
<option value='ms'>Mississippi</option>
<option value='mo'>Missouri</option>
<option value='mt'>Montana</option>
<option value='ne'>Nebraska</option>
<option value='nv'>Nevada</option>
<option value='nh'>New Hampshire</option>
<option value='nj'>New Jersey</option>
<option value='nm'>Nouveau-Mexique</option>
<option value='ny'>L'état de New York</option>
<option value='nc'>Caroline du Nord</option>
<option value='nd'>Dakota du Nord</option>
<option value='oh'>Ohio</option>
<option value='ok'>Oklahoma</option>
<option value='or'>Oregon</option>
<option value='pa'>Pennsylvanie</option>
<option value='ri'>Rhode Island</option>
<option value='sc'>Caroline du Sud</option>
<option value='sd'>Dakota du Sud</option>
<option value='tn'>Tennessee</option>
<option value='tx'>Texas</option>
<option value='ut'>Utah</option>
<option value='vt'>Vermont</option>
<option value='va'>Virginie</option>
<option value='wa'>L'état de Washington</option>
<option value='wv'>Virginie-Occidentale</option>
<option value='wi'>Wisconsin</option>
<option value='wy'>Wyoming</option>
<option value='pr'>Puerto Rico</option>
</select>
</span>
<span data-tooltip='Choose a US water resource region'>
<select name='ushuc' id='ushuc' size='1' onchange='javascript:set_st(this);' >
<option value=''>Région hydrologique</option>
<option value='01'>01 New England</option>
<option value='02'>02 Littoral de l'Atlantique</option>
<option value='03'>03 South Atlantic-Gulf</option>
<option value='04'>04 Grands Lacs</option>
<option value='05'>05 Ohio</option>
<option value='06'>06 Tennessee</option>
<option value='07'>07 Haut-Mississippi</option>
<option value='08'>08 Mississippi Inférieur</option>
<option value='09'>09 Souris-Rouge-Pluie</option>
<option value='10'>10 Missouri</option>
<option value='11'>11 Arkansas-Blanc-Rouge</option>
<option value='12'>12 Texas-Gulf</option>
<option value='13'>13 Rio Grande</option>
<option value='14'>14 Haut-Colorado</option>
<option value='15'>15 Colorado Inférieur</option>
<option value='16'>16 Grand Bassin</option>
<option value='17'>17 Pacifique Nord-Ouest</option>
<option value='18'>18 Californie</option>
<option value='19'>19 Alaska</option>
<option value='20'>20 Hawaï</option>
<option value='21'>21 Puerto Rico</option>
</select>
</span>
</div>
<button class="button" onClick="javascript:down_ch();"><span class="icon">Télécharger les données</span></button>
</td>
</tr>
<tr>
<td>
<div>
Canada :
<span data-tooltip='Choisissez une province canadienne'>
<select name='nus' id='nus' size='1' onchange='javascript:set_st(this);' >
<option value=''>Provinces</option>
<option value='zab'>Alberta</option>
<option value='zbc'>Colombie-Britannique</option>
<option value='zmb'>Manitoba</option>
<option value='znb'>Nouveau-Brunswick</option>
<option value='znl'>Terre-Neuve et Labrador</option>
<option value='zns'>Nouvelle-Écosse</option>
<option value='znt'>Territoires du Nord-Ouest</option>
<option value='znu'>Nunavut</option>
<option value='zon'>Ontario</option>
<option value='zpe'>Île-du-Prince-Édouard</option>
<option value='zqc'>Québec</option>
<option value='zsk'>Saskatchewan</option>
<option value='zyt'>Yukon</option>
</select>
</span>
<span data-tooltip='Choisissez un bassin versant canadien'>
<select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
<option value=''>Bassins fluviaux canadiens</option>
<option value='z01'>01 Provinces Maritimes</option>
<option value='z02'>02 Saint-Laurent</option>
<option value='z03'>03 Nord du Québec et Labrador</option>
<option value='z04'>04 Sud-ouest de la baie d'Hudson</option>
<option value='z05'>05 Fleuve Nelson</option>
<option value='z06'>06 Ouest et Nord de la Baie d'Hudson</option>
<option value='z07'>07 Grand lac des Esclaves</option>
<option value='z08'>08 Pacifique</option>
<option value='z09'>09 Fleuve Yukon</option>
<option value='z10'>10 Arctique</option>
<option value='z11'>11 Fleuve Mississippi</option>
</select>
</span>
</div>
<div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region."><input value="Restaurer la Carte" type="button" onclick="history.go(0)" /></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</header>
<body>
<div class="center">
<div id="my-div">
<iframe src="http://watermonitor.gov/naww/index.php?fr=1" id="my-iframe"></iframe>
</div>
</div>
<div class="legend">
<img name="legend" style="border: 0px" src="http://watermonitor.gov/naww/fr/images/map_legends/ptile_dot.gif" alt="map legend">
</div>
</body>


Its because you hide it all with
visibility: hidden;
opacity: 0;
And then never unhide it.
You'll need to use the :hover pseudo-class to show the tooltips.
[data-whatever]:hover:before,
[data-whatever]:hover:after {
visibility: visible;
opacity: 1;
}
Obviously, replace "whatever" with the actual selector.
You can see a functioning example here.

Related

It is possible using CSS to change the color of an item from an option input field when hover over? [duplicate]

This question already has answers here:
Change Select List Option background colour on hover
(13 answers)
Closed 2 years ago.
I made this options input field:
My code is this:
#input-diametru {
background-color: #59253b;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 5px;
width: 67px;
height: 37px;
appearance: none;
/* Remove default arrow */
background-image: url("/Arrow\ Down\ Bold\ Icon.svg");
/* Add custom arrow */
background-repeat: no-repeat;
background-position: 43px;
}
<select name="input-diametru" id="input-diametru">
<option value="0"></option>
<option value="10C">10C</option>
<option value="12">12</option>
<option value="12C">12C</option>
<option value="13">13</option>
<option value="13C">13C</option>
<option value="14">14</option>
<option value="14C">14C</option>
<option value="15">15</option>
<option value="15C">15C</option>
<option value="16">16</option>
<option value="16C">16C</option>
<option value="17">17</option>
<option value="17.5">17.5</option>
<option value="17C">17C</option>
<option value="18">18</option>
<option value="18C">18C</option>
<option value="19">19</option>
<option value="19.5">19.5</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="22.5">22.5</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="60">60</option>
</select>
When a user goes with the mouse over an option, the background color of that option turns blue, as you can see in the picture above. I want to change that color from blue to #79244D for example. Is there a way to do that in CSS?
I found this answer on w3schools, but this involves using JS.

Tested on Chrome Version 87.0.4280.88 and Microsoft Edge 44.18362.329.0 ONLY .
If you add height to your select , this will not work.
#input-diametru {
background-color: #59253b;
color: #ffffff;
border: 1px solid #ffffff;
border-radius: 5px;
width: 67px;
/* height: 37px; */
appearance: none;
background-image: url("/Arrow\ Down\ Bold\ Icon.svg");
background-repeat: no-repeat;
background-position: 43px;
}
option:hover {
background-color: #79244D;
}
<select name="input-diametru" id="input-diametru" onfocus="this.size=10;" onblur="this.size=0;" onchange="this.size=1; this.blur();">
<option value="0"></option>
<option value="10C">10C</option>
<option value="12">12</option>
<option value="12C">12C</option>
<option value="13">13</option>
<option value="13C">13C</option>
<option value="14">14</option>
<option value="14C">14C</option>
<option value="15">15</option>
<option value="15C">15C</option>
<option value="16">16</option>
<option value="16C">16C</option>
<option value="17">17</option>
<option value="17.5">17.5</option>
<option value="17C">17C</option>
<option value="18">18</option>
<option value="18C">18C</option>
<option value="19">19</option>
<option value="19.5">19.5</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="22.5">22.5</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="60">60</option>
</select>

Why does Bootstrap icon disappear when nav is collapsed?

Using Bootstrap 4 nav, all looks good and links work, until screen size is reduced. For reasons I haven't been able to grok, the icon in right corner appears, but is not functional.
Site passes w3 validator for both html and css. I've looked at examples and tried different code for the button all to no avail.
html body {
background-color: #494848;
color: #ffffff;
}
header {
margin: 10px 0 30 0;
}
nav {
margin-bottom: 40px;
}
h1 {
font-family: sans-serif;
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
table {
margin: 0 auto 10px;
auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th,
td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.fsc {
color: #FFFF00;
font-family: cursive;
}
.header_p {
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
color: #FFFF00;
}
.drop {
text-align: center;
margin-top: 1%;
}
.name {
font-family: cursive;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px;
/* Vertically center the text there */
background-color: #f5f5f5;
}
#div_table {
margin-top: 20px;
;
}
#a_examples {
color: #FFFFFF;
text-align: center;
}
#p_examples {
text-align: center;
color: #FFFF00;
}
#div_music {
color: #ffffff;
margin: 0 8% 10px 8%;
}
#Joe {
/* image of joe */
width: auto;
height: auto;
padding: 0px;
margin-right: 2%;
margin-top: 2px;
margin-bottom: 0;
float: none;
border: 2px solid #ffffff;
}
#twitter {
float: left;
clear: left;
}
#connect_ul {
margin-top: 30px;
}
#footer_p {
color: #FFFF00;
padding-top: 2px;
padding-left: 4px;
padding-right: 2px;
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
margin: 0 auto;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
margin-top: 10%;
}
/* built into bootstrap:
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
Small (sm) devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
Medium (md) devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
Large (lg) devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
Extra (xl) large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index1.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="connect.html">Connect</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container">
<h2 class="drop">Drop That Guitar Pick!</h2>
<p class="header_p">It's <span><i>gonna</i></span> happen anyway...😎</p>
</div>
</header>
<section>
<!-- put content here -->
<div class="container">
<div class="row col-lg-12 col-sm-6">
<h2 class="display-4">Join The Club:</h2>
<div class="container col-lg-12 col-sm-6">
</div>
<p class="lead">Membership will give me an idea of just who is interested in Finger-Style Guitar playing...</p>
<p class="lead">where you come from, playing style, etc., so I can tailor the music presented to your interests.</p>
</div>
</div>
</section>
<div class="container">
<div class="form">
<form>
<!-- form, button -->
<input class="full_name" type="text" placeholder="Full Name" name="name">
<button type="button" class="btn btn-success">Submit</button>
<!-- Bootstrap button -->
</form>
<br>
<form>
<input class="age" type="number" placeholder="Age" name="number">
<button type="button" class="btn btn-success">Submit</button>
<!-- Bootstrap button -->
</form>
</div>
<br>
<div class="form">
<input class="playing_style" name="electric" list="style" placeholder="Playing Style?">
<datalist id="style"> <!-- datalist used -->
<option value="Finger Style">
<option value="Pick">
</datalist>
<br>
<input class="where" name="country" list="countries" placeholder="Where from?">
<datalist id="countries">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Angola">
<option value="Antigua & Deps">
<option value="Argentina">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<option value="Bahamas">
<option value="Bahrain">
<option value="Bangladesh">
<option value="Barbados">
<option value="Belarus">
<option value="Belgium">
<option value="Belize">
<option value="Benin">
<option value="Bhutan">
<option value="Bolivia">
<option value="Bosnia Herzegovina">
<option value="Botswana">
<option value="Brazil">
<option value="Brunei">
<option value="Bulgaria">
<option value="Burkina">
<option value="Burundi">
<option value="Cambodia">
<option value="Cameroon">
<option value="Canada">
<option value="Cape Verde">
<option value="Central African Rep">
<option value="Chad">
<option value="Chile">
<option value="China">
<option value="Colombia">
<option value="Comoros">
<option value="Congo">
<option value="Congo (Democratic Rep)">
<option value="Costa Rica">
<option value="Croatia">
<option value="Cuba">
<option value="Cyprus">
<option value="Czech Republic">
<option value="Denmark">
<option value="Djibouti">
<option value="Dominica">
<option value="Dominican Republic">
<option value="East Timor">
<option value="Ecuador">
<option value="Egypt">
<option value="El Salvador">
<option value="Equatorial Guinea">
<option value="Eritrea">
<option value="Estonia">
<option value="Ethiopia">
<option value="Fiji">
<option value="Finland">
<option value="France">
<option value="Gabon">
<option value="Gambia">
<option value="Georgia">
<option value="Germany">
<option value="Ghana">
<option value="Greece">
<option value="Grenada">
<option value="Guatemala">
<option value="Guinea">
<option value="Guinea-Bissau">
<option value="Guyana">
<option value="Haiti">
<option value="Honduras">
<option value="Hungary">
<option value="Iceland">
<option value="India">
<option value="Indonesia">
<option value="Iran">
<option value="Iraq">
<option value="Ireland (Republic)">
<option value="Israel">
<option value="Italy">
<option value="Ivory Coast">
<option value="Jamaica">
<option value="Japan">
<option value="Jordan">
<option value="Kazakhstan">
<option value="Kenya">
<option value="Kiribati">
<option value="Korea North">
<option value="Korea South">
<option value="Kosovo">
<option value="Kuwait">
<option value="Kyrgyzstan">
<option value="Laos">
<option value="Latvia">
<option value="Lebanon">
<option value="Lesotho">
<option value="Liberia">
<option value="Libya">
<option value="Liechtenstein">
<option value="Lithuania">
<option value="Luxembourg">
<option value="Macedonia">
<option value="Madagascar">
<option value="Malawi">
<option value="Malaysia">
<option value="Maldives">
<option value="Mali">
<option value="Malta">
<option value="Marshall Islands">
<option value="Mauritania">
<option value="Mauritius">
<option value="Mexico">
<option value="Micronesia">
<option value="Moldova">
<option value="Monaco">
<option value="Mongolia">
<option value="Montenegro">
<option value="Morocco">
<option value="Mozambique">
<option value="Myanmar, (Burma)">
<option value="Namibia">
<option value="Nauru">
<option value="Nepal">
<option value="Netherlands">
<option value="New Zealand">
<option value="Nicaragua">
<option value="Niger">
<option value="Nigeria">
<option value="Norway">
<option value="Oman">
<option value="Pakistan">
<option value="Palau">
<option value="Panama">
<option value="Papua New Guinea">
<option value="Paraguay">
<option value="Peru">
<option value="Philippines">
<option value="Poland">
<option value="Portugal">
<option value="Qatar">
<option value="Romania">
<option value="Russian Federation">
<option value="Rwanda">
<option value="St Kitts & Nevis">
<option value="St Lucia">
<option value="Saint Vincent & the Grenadines">
<option value="Samoa">
<option value="San Marino">
<option value="Sao Tome & Principe">
<option value="Saudi Arabia">
<option value="Senegal">
<option value="Serbia">
<option value="Seychelles">
<option value="Sierra Leone">
<option value="Singapore">
<option value="Slovakia">
<option value="Slovenia">
<option value="Solomon Islands">
<option value="Somalia">
<option value="South Africa">
<option value="South Sudan">
<option value="Spain">
<option value="Sri Lanka">
<option value="Sudan">
<option value="Suriname">
<option value="Swaziland">
<option value="Sweden">
<option value="Switzerland">
<option value="Syria">
<option value="Taiwan">
<option value="Tajikistan">
<option value="Tanzania">
<option value="Thailand">
<option value="Togo">
<option value="Tonga">
<option value="Trinidad & Tobago">
<option value="Tunisia">
<option value="Turkey">
<option value="Turkmenistan">
<option value="Tuvalu">
<option value="Uganda">
<option value="Ukraine">
<option value="United Arab Emirates">
<option value="United Kingdom">
<option value="United States">
<option value="Uruguay">
<option value="Uzbekistan">
<option value="Vanuatu">
<option value="Vatican City">
<option value="Venezuela">
<option value="Vietnam">
<option value="Yemen">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
</div>
</div>
<!-- content ends here -->
<footer id="sticky-footer" class=" footer py-4 bg-dark text-white-50 ">
<div class="container text-center">
<p id="footer_p">Copyright © 2020 <span class="name">Joe Austin Mcintosh</span>. All rights reserved.</p>
<!-- id used -->
</div>
</footer>

The underlying issue causing my code not to work was that i somehow overlooked the required supporting ref docs that bootstrap provides links to. The lesson here seems to be that you must be extremely careful when reading instructions for the use of a block of code you never saw, let alone used before. Read and reread everything...every time.

I have a table with 2 colums, with select/input[type=date] elements in the same row, they conflict and mess up the style of the entire table

http://prntscr.com/8qa833 Ive spent well over 4-5 hours trying different methods... But this isn't my only issue, I cant get the input[type=date] element to change, the width 100% doesn't seem to affect it when changing screen sizes. If I can't find a solution I'll have to just give in and make it a fixed size.
HTML
<center>
<div id="signup-form" style="/*display:none;*/">
<form method="post">
<table width="30%" align="center" border="0" style="max-width:570px;">
<tbody>
<tr>
<td colspan="2">
<input type="text" name="uname" placeholder="Username" required="" id="username" pattern=".{4,25}" title="Username must be 4-25 characters long" maxlength="25" oninput="usernamecheck()">
<p id="usernameerror" class="error"></p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="email" name="email" placeholder="Email" required="" id="email" oninput="emailcheck()" class="failed">
<p id="emailerror" class="error">This is not a valid email.</p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="password" name="pass" placeholder="Password" required="" id="password" pattern=".{6,50}" title="Password must be 6-50 characters long" maxlength="50" oninput="passwordcheck()" class="failed">
<p id="passworderror" class="error">Password must be atleast 6 characters!</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" placeholder="First Name" required="" id="firstname">
<p id="firstnameerror" class="error"></p>
</td>
<td>
<input type="text" name="lastname" placeholder="Last Name" required="" id="lastname">
<p id="lastnameerror" class="error"></p>
</td>
</tr>
<tr>
<td>
<select id="country" name="country" required="" title="Please Select a Country.">
<option value="" disabled="" selected="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte dIvoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic Peoples Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao Peoples Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
<p id="countryerror" class="error"></p>
</td>
<td>
<input type="date" name="age" placeholder="Age" required="" id="age" pattern="" value="" title="You must be 18 years of age or older." oninput="agecheck()">
<p id="ageerror" class="error"></p>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" name="btn-signup" id="confirmsignup">Sign Me Up</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</center>
CSS
#charset "utf-8";
CSS Document * {
margin: 0;
padding: 0;
}
#login-form {
margin-top: 70px;
}
table {
border: solid #dcdcdc 1px;
padding: 25px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
}
table tr,td {
padding: 10px;//
border: solid #e1e1e1 1px;
}
table tr td input {
width: 100%;
height: 45px;
border: solid #e1e1e1 1px;
border-radius: 3px;
padding-left: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
background: #f9f9f9;
transition-duration: 0.5s;
box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.4);
}
table tr td button {
width: 100%;
height: 45px;
border: 0px;
background: rgba(12, 45, 78, 11);
background: -moz-linear-gradient(top, #595959, #515151);
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(1, 0, 0, 0.2);
color: #f9f9f9;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
font-weight: bolder;
text-transform: uppercase;
}
table tr td button:active {
position: relative;
top: 1px;
}
table tr td a {
text-decoration: none;
color: #00a2d1;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
}
/* css for home page */
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 60px;
background: rgba(00, 11, 22, 33);
color: #9fa8b0;
font-family: Verdana, Geneva, sans-serif;
}
#header #left {
float: left;
position: relative;
}
#header #left label {
position: relative;
top: 5px;
left: 100px;
font-size: 35px;
}
#header #right {
float: right;
position: relative;
}
#header #right #content {
position: relative;
top: 20px;
right: 100px;
color: #fff;
}
#header #right #content a {
color: #00a2d1;
}
/* css for home page */
#country {
/* width:100%; */
height: 45px;
border: solid #e1e1e1 1px;
border-radius: 3px;
padding-left: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
background: #f9f9f9;
transition-duration: 0.5s;
box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.4);
max-width: 215px;
margin-right: 25px;
}
#age {
width: 100%;
/* max-width: 203px; */
}
#username {
/* width: 98%; */
}
#email {
/* width: 98%; */
}
#password {
/* width: 98%; */
}
input[type=date] {
width: 100%;
height: 45px;
border: solid #e1e1e1 1px;
border-radius: 3px;
padding-left: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
background: #f9f9f9;
transition-duration: 0.5s;
box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.4);
}
.error {
color: red!important;
font-family: sans-serif!important;
text-align: center;
position: relative;
top: 15px;
}
button#confirmsignup[disabled] {
background-color: grey;
cursor: not-allowed;
}
Is there some sort of default style for this element I'm forgetting to overwrite that's completely messing it up?

I figured it out, I missed a default CSS tag for the <select> tag box-sizing: border-box; I needed box-sizing:content-box;

I am not sure what is messed up about it, as i do not see an example of 'functioning' and 'incorrect' to compare. Also, it seems that because the elements are set to 100%, and the tr styling alone width is not set, it will only will only be the width of the date control, and so is acting the way it is. May seem stupid, but have you tried to use the important override param like so: width = 100% !important or better to use fixed size, and set max and min width like so:
table tr td input {
width: 100% !important;
height: 45px;
border: solid #e1e1e1 1px;
border-radius: 3px;
padding-left: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
background: #f9f9f9;
transition-duration: 0.5s;
box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.4);
}
The !important property value tells it to ignore any inherited value or priority from inhertinace of other elements or heiarchy. I have found uses for it, but primarily when coming into a project already created, and the desing layout didn't fit to what we needed. Poorly built, or not thought of. Anyways, see if that helps.

How can I align the elements in a table cell (<td>)?

In trying to get the label and select element to align to the right of the row,
I tried this:
<tr>
<td>
<input type="radio" id="ucemployee" name="travelertype"/>UC Employee
<label for="selectcampus">UC Campus:</label>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
</td>
<tr>
...but it doesn't work.
If I do this:
<td align="right">
<input type="radio" id="ucemployee" name="travelertype"/>UC Employee
. . .
<select id="selectcampus" title="Please select a campus">
. . .
...all of the elements align right, including the input radio element (as is to be expected, really), but I want the "radio" to remain aligned to the left.
How can I right align the label and select, while leaving the radio alone?
Do I need to put a "shiv" between the radio and the select, or...???

Here are two simple CSS methods to align-right only selected items in a td.
CSS Flexbox method.
#flex-container {
display: flex;
}
label {
margin-left: auto;
}
/* nonessential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }
label { margin-right: 5px; }
<table>
<tr>
<td>
<div id="flex-container"><!-- new wrapper -->
<input type="radio" id="ucemployee" name="travelertype" />UC Employee
<label for="selectcampus">UC Campus:</label>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
</div>
</td>
<tr>
</table>
DEMO
Notes:
The content is wrapped in a div so the display value of the td doesn't need to be changed, which could affect the table layout algorithm.
Learn more about flex auto margins here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
CSS inline-block method
#right-align {
display: inline-block;
text-align: right;
width: 95%;
}
/* non-essential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }
<table>
<tr>
<td>
<input type="radio" id="ucemployee" name="travelertype" />
<div id="right-align">
<label for="selectcampus">UC Campus:</label>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
</div>
</td>
</tr>
</table>
DEMO

Don't understand the actual arrangements you are trying to say but i hope this will help.play with the css and labels to rearrange.
<style>
td{
float:right;
}
select,label[for=selectcampus],label[for=ucemployee]{
float:right;
text-align:left;
}
input[type="radio"]
{
float:left;
}
</style>
<td>
<label for="ucemployee">UC Employee</label>
<input type="radio" id="ucemployee" name="travelertype"/>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
<label for="selectcampus">UC Campus:</label>
</td>

I think you need some CSS.
#test{
float:right;}
http://jsfiddle.net/m4onhxa9/

Why does form display incorrectly in IE7/8?

Why does this form display incorrectly in IE7/8?
Firefox (correct):
http://img812.imageshack.us/img812/9610/contactfirefox.png
IE (incorrect):
http://img840.imageshack.us/img840/2742/contactiexplorer.png
Here is the code:
/*-----Contact Form----------------*/
.fb-container {
width: 425px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif !important;
}
.fb-signuptxt {
margin-bottom: 5px;
color: #68a64c;
font-size: 18px;
font-weight: bold;
}
.fb-tptxt {
margin-bottom: 10px;
color: #006600;
font-size: 15px;
}
.fb-form {
padding: 10px 0 10px 0;
border-top: solid #a0a9c0 1px;
border-bottom: solid #a0a9c0 1px;
overflow: hidden;
}
.fb-input {
padding: 6px;
margin-top: 2px;
font-size: 16px;
width: 250px;
border: solid #bdc7d8 1px;
}
.fb-select {
padding: 5px;
margin-top: 2px;
height: 34px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 13px;
border: solid #bdc7d8 1px;
float: left;
}
.fb-txt-left {
width: 120px;
padding: 8px 0 8px 0;
margin: 2px;
text-align: right;
color: #1d2a5b;
font-size: 13px;
float: left;
}
.fb-input-right {
width: 250px;
float: left;
}
.fb-button-left {
margin: 8px 0 0 125px;
float: left;
}
.fb-error {
width: 366px;
background: #FFFFCC;
background-image:url(../images/error_warning_icon.svg.med.gif);
background-repeat: no-repeat;
background-position: 10px 5px;
border: 1px solid #dd3c10;
line-height: 15px;
margin: 10px 0 0 0;
padding: 7px 3px 7px 3px;
text-align: center;
float: left;
display: none;
}
/*Button*/
.button_outside_border_green {
width: 105px;
border: solid #3b6e22 1px;
border-bottom: solid #2c5115 1px;
cursor: pointer;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 13px;
font-weight: bold;
}
.button_inside_border_green {
padding: 6px 0 6px 0;
background-color: #68a64c;
border-top: solid #98c286 1px;
text-align: center;
color: #ffffff;
}
div.button_inside_border_green:active {
background-color: #609946;
}
#boxSuccess {
width:300px;
height: 40px;
background-color:#8DBCF5;
background-image:url(../check-blue-icon.gif);
background-repeat: no-repeat;
background-position: 5px 5px;
border:1px solid;
border-color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color: white;
font-weight:bold;
padding: 16px 0 0 76px;
}
contact html code
<div id="contactheading">
<div id="contactheadingTxt">Please use this form to contact us for General enquries. If you need<br />support
please use the Support option in the menu. Thank you.</div></div><br />
<div class="fb-container">
<div class="done" style=display:none;></div>
<div class="fb-signuptxt">Contact Us </div>
<div class="fb-tptxt">Contact us with a general enquiry. </div>
<div class="fb-form">
<div class="fb-txt-left">First Name:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="firstname"
id="firstname"/>
</div>
<div class="fb-txt-left">Last Name:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="lastname"
id="lastname"/>
</div>
<div class="fb-txt-left">Your Email:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="email" id="email"/>
</div>
<div class="fb-txt-left">Re-enter Email:</div>
<div class="fb-input-right">
<input type="text" class="fb-input" name="emailr" id="emailr"/>
</div>
<div class="fb-txt-left">New Password:</div>
<div class="fb-input-right">
<input type="password" class="fb-input" name="pass" id="pass"/>
</div>
<div class="fb-txt-left">I am:</div>
<div class="fb-input-right">
<select class="fb-select" name="sex" id="sex">
<option value="0">Select Sex:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
</div>
<div class="fb-txt-left">Birthday:</div>
<div class="fb-input-right">
<select class="fb-select" name="birthday_month" id="birthday_month">
<option value="0">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select class="fb-select" name="birthday_day" id="birthday_day">
<option value="0">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="fb-select" name="birthday_year" id="birthday_year">
<option value="0">Year:</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
</select>
</div>
<div class="fb-button-left">
<div class="button_outside_border_green" id="sub">
<div class="button_inside_border_green">
Send
</div>
</div>
</div>

Can you be more specific?
One thing that stands out is any floated element you have that has a horizontal margin, it's likely the double margin bug is occurring so put display:inline; on any element that is floated and has horizontal ( left, right ) margins.