I have text and then a carat which drops down the text but for some reason can not get the caret to vertically align with the text despite my efforts.
Jsfiddle: http://jsfiddle.net/nCP9J/5/
HTML:
<div id ="hiddensubmit" class = "dropdown-toggle" data-toggle="dropdown" onclick="document.formSearch.submit()" style="top:55px; font-size:20px;">
<a href="#" id="drop" class ="dropdownsearch">Stuff <span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a></div>
CSS:
.dropdown-toggle {
*margin-bottom: -3px;
}
.searchcaret {
display: inline-block;
width: 0;
height: 0;
line-height:100px;
padding: 10px 0px 0px 0px;
vertical-align: middle;
border-top: 4px solid #000000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
opacity: 0.3;
color: #5A5A5A;
filter: alpha(opacity=30);
position:absolute; top:10px; }