Hi sorry if this question is too basic, but I have been working on it for a while with limited success. Also, I have tried suggestions from similar questions (which is how I have gotten this far) but it is still not good enough.
Basically I have a form that has a lot of text fields, each with their own modifier button. For example:
Here is a sample slightly skewed:
I need the button on the side to be perfectly aligned, as it is in this picture, all of the time. That said every browser I have tried it on displays it differently, chrome either pushes it up or down, and firefox sometimes shows it correctly but when the page is zoomed in it shifts. I have noticed that when I bring zoom to 90% on chrome the buttons line up correctly.
Here is a sample of the HTML (and rails):
<div style="float:left; padding:10px;">
<%= select_tag :noteMod, options_for_select([["AND"],["EXCEPT"],["OR"]], :selected => params[:noteMod]), class: "squareDropdown" %>
<%= text_field_tag :note , params[:note], placeholder: "Note", class: "textArea" %>
</div>
CSS
.squareDropdown{
border: 0 !important; /*Removes border*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow:'';
width: 20px;
text-indent: 0.01px;
text-overflow: "";
font-family: Arial, Sans-Serif;
font-size:14px;
background: #bfa75e;
color:white;
float:left;
position:relative;
height: 22px;
line-height: 22px;
}
Does anyone have any ideas on what I could do to achieve more accurate results?
Two easy options: 1) position the container DIV relative and the contents absolute. Position the contents using top/left/right/width/height. Or 2) use your browsers developer tools and keep tweaking the CSS (box-sizing, margin, padding, border, etc., make sure to set all values explicitly).