[RESOLVED]underline an image control by css?

CSS, HTML, Image, Web Forms, , ,

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>
                        &nbsp;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> &nbsp;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

Leave a Reply