Hi friends,
Can some one please help me on This
<span>Yes<asp:Image ID="NormalCircumstancesYes" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" ImageAlign="AbsBottom"/></span>
I need to underline the image shown in the above code..How can i do that..Thank You
You can try applying a bottom border to you image like given below
<span style="border-bottom: 1px solid;">Yes<asp:Image ID="NormalCircumstancesYes" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" ImageAlign="AbsBottom"/></span>
Try this
<span>Yes<asp:Image ID="NormalCircumstancesYes" style="border-bottom: 2px solid black;" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" ImageAlign="AbsBottom"/></span>
akpaga22
I need to underline the image shown in the above code..How can i do that..Thank You
If it is only for the image then you just need to apply the styles only to image
<span>Yes<asp:Image ID="NormalCircumstancesYes" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" ImageAlign="AbsBottom" style="border-bottom: 1px solid;"/></span>
What are you trying to underline? The entire Image Control or the span that wraps everything?
Generally, the best way you’ll be able to accomplish this is by simply adding a bottom-border to your image to underline it. I’ll demonstrate a few possible examples
that can be seen here or below :
Original (Example)
Underlining the Entire Span
Using the following style :
span { border-bottom: 1px; }
or you could apply an inline style to the span :
<span style='border-bottom:1px solid;'>Yes <asp:Image ... /></span>
would yield :
Underlining the Image
If you wanted to only underline the image, you could use a CSS style to apply a border to it (based on its ID or any other way of selecting it via CSS) :
#NormalCircumstancesYes { border-bottom: 1px; }
or apply it inline as well :
<span >Yes <asp:Image ... style='border-bottom:1px solid;' /></span>
which yields :
There are countless ways of handling something like this and they will depend on exactly what you are trying to accomplish.
Thank You all It works great but i have a strange problem …When i am using the underline in the span tag and no image is not show the underline is also not showing. Is there a way i cna show the underlien when the image is not showing up..
If you apply the border to span then the underline will show even if image is not displayed.
You can see sample demo of it here.
If possible could you please share your updated HTML Markup
Hi A2h
here is my mark up
Are "Customer Cirumstance" present? Yes<span style='border-bottom:1px solid;'><asp:Image ID="NormalCircumstancesYes" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" ImageAlign="AbsBottom"/></span> No<span style='border-bottom:1px solid'><asp:Image ID="NormalCircumstancesNo" runat="server" ImageUrl="" Height="16px" Width="16px" ImageAlign="AbsBottom"/></span>
Based on a condition I am trying to show the Xmark Image either for Yes or No via the code behind. When yes is true the iamge with underline shows up but the underline besides the NO does not show up. I want the underline to show even when the image is made
invisble.
Thank you
akpaga22
Based on a condition I am trying to show the Xmark Image either for Yes or No via the code behind. When yes is true the iamge with underline shows up but the underline besides the NO does not show up. I want the underline to show even when the image is made
invisble
You need to add some content to your span to show the underline. One suggestion is to add a nonbreaking space to your NoSpan from server side codebehind when you don’t have a image
Sample Implemenation:
HTML:
Make you span a serverside control by adding the runat="server" property.Add a id property to span so that you can use the id to refer span in code behind.
Are "Customer Cirumstance" present? Yes<span style='border-bottom: 1px solid;'><asp:Image ID="NormalCircumstancesYes" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" ImageAlign="AbsBottom" /></span> No<span id="NoSpan" runat="server" style='border-bottom: 1px solid'><asp:Image ID="NormalCircumstancesNo" runat="server" ImageUrl="" Height="16px" Width="16px" ImageAlign="AbsBottom" /></span>
C#:
if (YourCondtionHere) { //Code to show the image with in YesSpan //To show the underline in NoSpan add an non breaking empty space like this NoSpan.InnerHtml = " "; }
Rendered Demo
Thank You so sumch A2h..You made my day..appreicate it very much.
akpaga22
Thank You so sumch A2h..You made my day..appreicate it very much.
Glad to be of help