Menu
I don't have any CSS on the page.
If i place 2 imagebuttons control in 2 lines of code like this:
<asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server" ImageUrl="images/thumbs_up.gif" CausesValidation="false" CommandArgument='<%#Eval("ID")%>' CommandName="VoteUp" />
<asp:ImageButton ID="btnVoteDown" Height="16px" Width="16px" runat="server" CausesValidation="false" ImageUrl="images/thumbs_down.gif" CommandArgument='<%#Eval("ID")%>' CommandName="VoteDown" />
I get a gap as seen on the picture (top row). If i place 2 imagebuttons control in 1 line like this:
<asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server" ImageUrl="images/thumbs_up.gif" CausesValidation="false" CommandArgument='<%#Eval("ID")%>' CommandName="VoteUp" /><asp:ImageButton ID="btnVoteDown" Height="16px" Width="16px" runat="server" CausesValidation="false" ImageUrl="images/thumbs_down.gif" CommandArgument='<%#Eval("ID")%>' CommandName="VoteDown" />
I don't get the gap as seen on the picture (second row).
alt text http://img153.imageshack.us/img153/3817/83160966.jpg
How can i remove this gap without placing imagebuttons in one line?
THis is the generated markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default2.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMTIxNjc1NjlkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYCBQlidG5Wb3RlVXAFC2J0blZvdGVEb3duh1gAW23G9CSHTqWHtf1jVb+auJw=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLQ9PKkAgKUxN/UAgLruYmsBra/X3TDmu9s+nIDB4+xY93e6ZqR" />
</div>
<div>
<input type="image" name="btnVoteUp" id="btnVoteUp" src="images/thumbs_up.gif" style="height:16px;width:16px;border-width:0px;" />
<input type="image" name="btnVoteDown" id="btnVoteDown" src="images/thumbs_down.gif" style="height:16px;width:16px;border-width:0px;" />
</div>
</form>
</body>
</html>
343
You could wrap them in an element with a font-size of 0px - that will shrink the space down to a nothing in Firefox, and 1px in IE. It's possibly not ideal, but would work.
157
When you split them up in two lines you'll get whitespace between the controls and a whitespace character is rendered. If you place them on the same line with no whitespace between them there is no whitespace rendered.
Don't think there is any other way of doing it.
41
I realize this is an old post but anyone having this problem can try the following if just trying to remove the gap between asp:imagebutton's.
Insert a ImageAlign="Left" or right depending on where you are placing the object. Ensure this is within the asp:imagebutton element i.e.
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Img/BUTTONS/button1.jpg" ImageAlign="Left" />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Img/button2.jpg" ImageAlign="Left" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
