I have 2 asp linkbuttons which encompass img tags within themselves.
The markup is as below:
<asp:LinkButton ID="Default" runat="server" OnClick="CallDefaultFunction" OnClientClick="Default();">
<img style="border:none;" src="../Images/BtnSetDefault.png" alt="" id="imgdefault" onmouseover="this.src='../Images/BtnSetDefaultHOVER.png'" onmouseout="this.src='../Images/BtnSetDefault.png'" />
</asp:LinkButton>
<asp:LinkButton ID="Delete" runat="server" OnClick="CallDeleteFunction" OnClientClick="return ConfirmOnDelete();">
<img style="border:none;" src="../Images/BtnDelete.png" alt="" id="imgdelete" onmouseover="this.src='../Images/BtnDeleteHOVER.png'" onmouseout="this.src='../Images/BtnDelete.png'" />
</asp:LinkButton>
And below is the screenshot as to what it appears in IE 10. I get a very small and tiny blue segment between the link buttons (which is borderd by red box). Need to remove that, tried using Text-decoration:none for linkbutton, but it did not work.
![image]http://postimg.org/image/se162y6z5/
Any help will be appreciated.
Regards
Anurag
write this a link tag comming blue line; so please use below in your css style sheet.
a{
text-decoration:none;
}
img{
border:none;
}
Related
I have this asp control:
<asp:LinkButton Text="X" runat="server" />
How can I change text size and bold to display the X text similar to this image:
An asp:linkbutton renders as an < a > tag so write some CSS that targets that and styles it as you need to.
For example, if you gave it a class:
<asp:linkbutton cssclass="mybutton" runat="server" text="X"/>
You could style it
a.mybutton {
font-size: 50px;
}
Looks like that's from Font Awesome. If so, use the following instead:
<asp:LinkButton runat="server">
<i class="fa fa-times fa-5x"></i>
</asp>
At the top of my screen, I have an ASP.NET Hyperlink with an image representing the company and the application. I want to use CSS layers to place text or some control displaying text on top of the hyperlink/image at bottom right hand corner representing the productEdition.
I can't post the ASP.NET Hyperlink markup because it causes error but it has an ImageUrl. Oh, it's in a panel. See below:
<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif" NavigateURl="~/Default.aspx" ToolTip="Home Page">
</asp:HyperLink>
</asp:panel>
Using the techniques in some of the answers, I have this working - the text is on top of the picture but it's all the way to the left. I need it to be all the way to the right.
<asp:panel ID="toppanel" CssClass='wrapper' runat="server">
<!--Top Menu-->
<asp:panel id="menupanel" runat="server" CssClass="menusubwrapper">
<div id="Header" style="position: relative; z-index: 1">
<%--div style="position:absolute;z-index:1">--%>
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif"
NavigateURl="~/Default.aspx" ToolTip="Home Page">
</asp:HyperLink>
<div style="position:absolute;top:60px; right:400px; width:600px; height:100px; z-index:2;font-size:200%">
<b>Testing...</b>
</div>
<%--</div>--%>
</div>`
You could create a div to overlap the image with the Edition in it. You can read about overlapping elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps and Good Luck!
You could have a DIV wrapping around the linked image as well as around the text (also within a DIV). Give the wrapping DIV a style "position:relative" and give the text DIV absolute positioning. Or, instead of using absolute positioning, you could float it right or left, center it, using margins, etc.
Here are a few tutorials for you:
http://www.html.net/tutorials/css/lesson15.php
OR
http://www.xul.fr/en/css/text-over-image.php
Here's the solution:
<div id="Header" style="position: relative; z-index: 1">
<asp:HyperLink ID="HeaderLink" runat="server" ImageUrl="~/images/Header.gif"
NavigateURl="~/Default.aspx" ToolTip="Home Page"/>
<div style="position:absolute;top:60px; left:800px; width:600px; height:100px; z-index:2;font-size:200%">
<%--<b>Testing...</b>--%>
<asp:Label runat="server" ></asp:Label>
</div>
</div>
In my CSS file I have:
.Center
{
position:relative;
width:800px;
margin-left: auto;
margin-right: auto;
}
Then, when I have the following all is well:
<div class="Center">
<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" />
</div>
But if I remove the div and add a CssClass instead - it ignores the class:
<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" CssClass="Center" />
Why?
Because an asp:ImageButton renders out as <input type="image" ... />. Your first example has a <div> wrapping the image button, and the styling is applied on the <div>. Your second example is attempting to style the <input type="image" ... /> directly (which doesn't work because it's not a block element).
You can use an <asp:Panel> (which renders as a <div>) for equivalent code:
<asp:Panel runat="server" CssClass="Center">
<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" />
</asp:Panel>
Or, change your CSS to work with an <input type="image"> - I think that's as easy as just adding display: block, and the other properties will work the same as a containing <div> would.
I'm using the HtmlEditorExtender control of the AJAX Control Toolkit and I want to change the editor's background color to another color.
How can I do that?
You just have to target the css class that the AJAXControlToolkit uses to style that element. In this case, it is the ajax__html_editor_extender_texteditor class. The following css would make the background of the HTML editor orange:
.ajax__html_editor_extender_texteditor
{
background-color:#FFA500;
}
If you put the control and extender into a table, you can set the background color in the tag like so:
<td style="background-color: white;">
<asp:TextBox ID="myTextBox" MaxLength="1000" Width="250px" Height="250px" TextMode="MultiLine" Rows="10" Wrap="true" runat="server" />
<ajaxToolkit:HtmlEditorExtender ID="HtmlEditorExtender1" TargetControlID="myTextBox" runat="server"/>
</td>
Put all inside this div. Works nicely!
div style="background-color: white; width: 100%;background-color:white;padding:0px 10px 6px 0px;"
You try to define a css and set it to the CssClass attribute of HtmlEditorExtender.
E.g
<style type="text/css">
.generalbox {
background-color:#F90
}
</style>
<cc2:Editor ID="txtDescription" CssClass="generalbox" runat="server" Height="300px" AutoFocus="true" Width="100%" />
A rectange is appearing outside the link which i dont want. How do u remove it.
No Image
<a href="~/Web Pages/Home.aspx" runat="server">
<img src="<%= ResolveUrl("~/Images/TestToday.png") %>" alt="No image" width="200" height="200"/>
</a>
border = "0"
that will do the trick
or in css:
img {
border:0px;
}
You need this CSS rule:
a img {border: none; }
Put this in your css:
:link img { border: 0; }
You probably see the anchor tags border.
Try adding BORDER="0" to your a tag. Or set border to none in your stylesheet
Are you talking about the dotted outline that appears when clicking a link?
Try
a:active
{
outline: none;
}
this removes the outline when clicking, but not when entering the link using the keyboard (which is when it's really needed).
try this use ForeColor="White"
<asp:hyperlink runat="server" ImageUrl ="Images/back.jpg" D="hlBack" ForeColor="White" >
</asp:hyperlink>