html button and select box not aligning

Question

I am trying to create a rich text editor. I have created some buttons with IMG values in them. I also have some select box in between the buttons. The issue is the select box is not getting aligned with the rest of the buttons.

I have tried to modify margins and padding. Tried to create separate DIV elements for buttons and select box. Nothing seems to work. If i dont use IMG inside the button then everything is fine. Below is my code

button.formatbutton, button.formatbutton:link, button.formatbutton:visited
{
    display:inline;
    height: 25px; 
    width: 25px; 
    margin:1px 0px;
    padding:0px;
    border:1px solid #ADB96E;
    background-color: #ADB96E;
    cursor:pointer;
}

button.formatbutton:hover, button.formatbutton:active
{
    display:inline;
    height: 25px; 
    width: 25px; 
    margin:1px 0px;
    padding:0px;
    border:1px solid #ADB96E;
    background-color: #7A991A;
}

select.formatSelect
{
    display:inline;
    height: 25px; 
    width: 100px; 
    margin:0px 0px 0px 0px;
    border:1px solid #ADB96E;
    background-color: #ADB96E;
    cursor:pointer;
}

div.divToolbar
{
    width: 850px;
    height:27px; 
    text-align: center; 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #ADB96E;
}

div.divIframe
{
    width: 850px;
    height:350px; 
    text-align: center; 
    margin: 0px; 
    padding: 0px; 
    border: 0px;
    border-left: 1px solid #ADB96E;
    border-right: 1px solid #ADB96E;
    border-bottom: 1px solid #ADB96E;
}

div.divToolbar img
{
    height: 25px; 
    width: 25px; 
    display:inline;
    padding:0px;
    margin:0px;
    border:0px;     
}

iframe
{
    display:block;
    width: 850px; 
    height: 250px; 
    margin: 0px; 
    padding: 0px; 
    border:0px;

}

    <div align="center" class="divToolbar">

<button id="1" type="button" class="formatbutton" style="font-weight: bold;" value="B" 
onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('bold')" onBlur="blurButton(this)" onFocus="buttonFocus(this)" >
<img src="<c:url value="/resources/bold.png"/>" height="28px" width="28px" /></button><button 
id="2" type="button" class="formatbutton" style="font-style: italic;" value="I" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('italic')" onBlur="blurButton(this)" onFocus="buttonFocus(this)">
<img src="<c:url value="/resources/italics.png"/>" height="28px" width="28px" /></button><button 
id="3" type="button" class="formatbutton" style="text-decoration: underline;" value="U" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('underline')" onBlur="blurButton(this)" onFocus="buttonFocus(this)">
<img src="<c:url value="/resources/underline.png"/>" height="28px" width="28px" /></button> 



<button id="4" type="button" class="formatbutton" value="L" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('justifyleft')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="align left">
<img src="<c:url value="/resources/text_align_left.png"/>" height="28px" width="28px" /></button><button
id="5" type="button" class="formatbutton" value="C" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('justifycenter')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="center">
<img src="<c:url value="/resources/text_align_center.png"/>" height="28px" width="28px" /></button><button 
id="6" type="button" class="formatbutton" value="R" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('justifyright')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="align right">
<img src="<c:url value="/resources/text_align_right.png"/>" height="28px" width="28px" /></button>



<select class="formatSelect"
    onChange="fontEdit('fontname',this[this.selectedIndex].value)">
    <option value="Arial">Arial</option>
    <option value="Comic Sans MS">Comic Sans MS</option>
    <option value="Courier New">Courier New</option>
    <option value="Monotype Corsiva">Monotype</option>
    <option value="Tahoma">Tahoma</option>
    <option value="Times">Times</option>
</select> 
<select class="formatSelect"
    onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
    <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>
</select> 
<select class="formatSelect"
    onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
    <option value="black">-</option>
    <option style="color: red;" value="red">red</option>
    <option style="color: blue;" value="blue">blue</option>
    <option style="color: green;" value="green">green</option>
    <option style="color: pink;" value="pink">pink</option>
</select>

<button id="7" type="button" class="formatbutton" value="1" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('insertorderedlist')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Numbered List">
<img src="<c:url value="/resources/list_numbered.png"/>" height="28px" width="28px" /></button><button 
id="8" type="button" class="formatbutton" value="●" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('insertunorderedlist')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Bullets List">
<img src="<c:url value="/resources/list_bulleted.png"/>" height="28px" width="28px" /></button><button 
id="9" type="button" class="formatbutton" value="←" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('outdent')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Outdent">
<img src="<c:url value="/resources/outdent.png"/>" height="28px" width="28px" /></button><button 
id="10" type="button" class="formatbutton" value="→" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('indent')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Indent">
<img src="<c:url value="/resources/indent.png"/>" height="28px" width="28px" /></button>
</div>
<div align="center" class="divIframe">
<iframe id="textEditor">
</iframe>
<button type="button" onClick="ShowHtml()">ShowFrameContent</button>
</div>

Answer 1

If you want things to line up properly, and they're just images, do NOT use inline. Inline elements get affected by things like line-height, etc... and it just generally does not make nice when trying to line it all up pixel perfect.

Make your images blocks if not already. Make your buttons and selects blocks as well, and float everything left/rigt so that it looks like inline. An alternative, if you're using just newer browsers is instead make your images blocks and the buttons and selects inline-block.

Answer 2

write vertical-align:top in your inline elements. Write like this:

select, button{
 vertical-align:top;
}

Answer 3

I have tested this one...

select.formatSelect
{
display:inline;
height: 25px; 
width: 100px; 
margin:0px 0px 0px 0px;
position:relative;
top:-7px;
border:1px solid #ADB96E;
background-color: #ADB96E;
cursor:pointer;
}