I've been troubleshooting this issue for an hour now with no success. I'm facing a problem in Internet Explorer and can't figure out why.
This is a snippet of the HTML code I'm using to display my registration form:
<ul id="register_form_list">
<li><label for="register_full_name" class="register_label">Full Name</label></li>
<li class="input_wrapper">
<input type="text" class="register_text_input" name="full_name" id="register_full_name" value="">
<div class="register_field_help">
<span class="register_field_error_text" style="display: none">Enter your first and last name</span>
</div>
<div class="register_field_error">
<span class="register_field_error_text">Please enter your full name</span>
</div>
</li>
</ul>
Below is the CSS code that styles my registration elements along with their corresponding tooltips:
ul#register_form_list { float: left; clear: left; margin: 25px 0 0 29px; width: 670px; }
ul#register_form_list li { float: left; clear: left; display: inline; margin-left:0px; }
ul#register_form_list li.input_wrapper { padding: 0 0 15px 0; }
label.register_label { float: left; font-size: 0.9em; font-weight: bold; color: #093C5D; text-decoration: none; }
ul#register_form_list input.register_text_input { float: left; clear: left; margin: 6px 0 0 0; padding: 5px; width: 260px; border: #B0B0B0 1px solid; background: #FFFFFF url(images/quizmaker/field_shadow_bg.png) repeat-x; background-position: top; outline: none; font-family: Arial, sans-serif; }
ul#register_form_list input.register_submit { float: left; clear: left; margin: 0 0 0 0; padding: 5px 14px 5px 14px; }
div.register_field_help { float: left; display: none; margin: 0 0 0 6px; width: 386px; height: 39px; background: url(images/welcome/register_text_help.png) top left no-repeat; }
span.register_field_help_text { float: left; margin: 10px 0 0 20px; color: #FFFFFF; }
div.register_field_error { float: left; margin: 0 0 0 6px; width: 386px; height: 39px; background: url(images/welcome/register_text_error.png) top left no-repeat; }
span.register_field_error_text { float: left; margin: 10px 0 0 20px; color: #FFFFFF; }
The issue I'm facing is that the tooltip elements of div.register_field_error are appearing below the input fields instead of beside them as intended.
Interestingly, everything appears to be working perfectly in Chrome. The tooltips fit within the width of the ul (670px), but in IE, I have to increase the width of the ul to 733px or more via developer tools to get them to display side by side.
You can view the live code here. Just click 'Register' without filling in any inputs, and you'll see the tooltips next to each input field.
It almost seems like there's some right-hand padding on the UL causing this issue, but setting margin:0 and padding:0 on the UL hasn't resolved it.
The problem seems to occur when emulating IE7 in IE11. I need the site to function properly in IE7.