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

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

select, button{
 vertical-align:top;
}