CODEWITHSUNDEEP
asp.netcss
dani
dani

Reputation: 1077

Imagebuttons gap

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>

Upvotes: 5

Views: 1732

Answers (7)

Mike Horseman
Mike Horseman

Reputation: 11

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" />

Upvotes: 1

abend
abend

Reputation: 483

You can also pull this move, it works (just ran into this issue and your perspective on the issue tipped me off) 

<asp:ImageButton ID="ImageButton1" runat="server" /><!--
--><asp:ImageButton ID="ImageButton2" runat=server" />

the comment touching both controls is equal to them being on the same line and rendering without whitespace.

Confirmed 0px in IE7+

Upvotes: 0

Mr. Smith
Mr. Smith

Reputation: 5558

You could try some CSS along the lines of:

ul#Thumbs li
{
    display: inline;
    list-style: none;
}

And your buttons:

<ul id="Thumbs">
    <li><asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server"  ImageUrl="images/thumbs_up.gif" CausesValidation="false" CommandArgument='<%#Eval("ID")%>' CommandName="VoteUp" /></li>
    <li><asp:ImageButton ID="btnVoteDown" Height="16px" Width="16px" runat="server" CausesValidation="false" ImageUrl="images/thumbs_down.gif" CommandArgument='<%#Eval("ID")%>' CommandName="VoteDown" /></li>
</ul>

Upvotes: 0

Zhaph - Ben Duguid
Zhaph - Ben Duguid

Reputation: 26956

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.

Upvotes: 2

rahul
rahul

Reputation: 187050

If you are using VS then

You can format the whole document in the source view.

Go to

Edit -> Advanced -> Format Document

The shortcut is

Ctrl K + Ctrl D

This will remove all the whitespaces and breaks inside your HTMl document.

Upvotes: 0

Khodor
Khodor

Reputation: 1006

you should check the generated HTML to get an idea how's the images are being rendered, I would recommend putting the two asp:imagebuttons inside a div with style='white-space:nowrap'

Upvotes: 0

Sani Huttunen
Sani Huttunen

Reputation: 24385

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.

Upvotes: 2

Related Questions