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>
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>
-
1
Does adding a negative margin to the formatSelect class work?
margin-top:-10px;, etc. (Not ideal, of course, but it'd probably do in a pinch). – brettkelly Commented Apr 5, 2012 at 3:41 - no it does not work. I tried even -100px, does not move a bit – user1241438 Commented Apr 5, 2012 at 3:43
- Can you post the HTML? Maybe put everything in a jsfiddle? – brettkelly Commented Apr 5, 2012 at 3:44
- Adding float:left, display:block on formatSelect work? And please, put in a jsfiddle so we can visualize better. – Victor Rodrigues Commented Apr 5, 2012 at 3:54
- i am sorry i did not know about jsfiddle. Will try to use it next time – user1241438 Commented Apr 5, 2012 at 11:15
3 Answers
Reset to default 9write vertical-align:top in your inline elements. Write like this:
select, button{
vertical-align:top;
}
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.
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;
}