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>
Related
I am using radcombobox to display data, now I am not using any css style for the radcombox, but it still has gray color background.
I want to remove that color.
Below is my rad combobox code :
<telerik:RadComboBox ID="RadCountry" runat="server" CssClass="rcbInput rcbEmptyMessage"
AutoPostBack="False" EmptyMessage="Select a Customer" EnableAutomaticLoadOnDemand="True"
ItemsPerRequest="10" ShowMoreResultsBox="True" EnableVirtualScrolling="True" Filter="Contains" DataTextField="Contact_First_Name"
Font-Names="Arial" Font-Size="11px" ShowToggleImage="false">
</telerik:RadComboBox>
I am also attaching the output of the given code.
i solve this by using below css
<style type="text/css">
div.CustomCssClass .rcbInputCell INPUT.rcbInput {
color: black;
height: 1px;
padding-top: 10px;
}
</style>
Use browser debugger and goto to Inspect Element, find which class / element is the reason for background. Then overwrite css to background:none!important for that element / css rule.
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;
}
I have the following code but it doesnt seem to work:
<td align="center" style="padding-bottom:52.5px">
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png"/>
</td>
And a CSS class to change image on hover:
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png') !important;
}
Please advise.
Thanks
I prefer this way:
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/>
bye
An ImageButton controls renders as a <input type="image" /> element with the ImageUrl property becoming the src attribute like:
<input type="image" src="/_layouts/Right_GrayArrow.png" />
Therefore you are applying a background image to this, which you cannot see as the src image is being overlayed on top of it.
You have 2 choices:
1) Change the ImageButton to use a background image:
.RightArrow
{
width: /* width of image */
height: /* height of image */
background-image:url('/_layouts/Right_GrayArrow.png');
}
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png');
}
If you are going to use this method though, I would recommend using an <asp:Button /> instead. It seems pointless using an <asp:ImageButton /> if you're not even making use of the src attribute.
2) Use jQuery to change the image on hover:
$(".RightArrow").hover(function(){
$(this).attr("src", "/_Layouts/Right_GreenArrow.png");
},
function(){
$(this).attr("src", "/_Layouts/Right_GrayArrow.png");
});
Worth noting this will only work with javascript enabled, and you must include the jQuery library.
The ImageUrl property isn't the same as setting the background-image. Remove the CSS and set the onmouseout and onmouseover properties in your page.
The objective is to put one image in div tag, and make the corner image round.
Here is my code:
<div id="round-div">
<a href="#1" class="cross-link active-thumb">
<img src="<%: HelperClass.CheckImageUrlExist(Model.GetItemSpecial[0].PictureName) %>" alt="<%: Model.GetItemSpecial[0].Name %>" width="63px" height="36px" class="nav-thumb"/>
</a>
</div>
You could have the image be the background image of the div tag and then use the css property: border-radius:10px; That would round it for you. You could also just add the property to the image as well.
.round-div img
{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}
I have a little problem with my site, I have a bar and on it a box that float above the bar, everything works fine in IE, Firefox, Opera, but in Chrome and Safari the box that must be above the bar float by the bar side no above it.
#barraDerecha
{
width:240px;
background-color:#e5e5e5;
border-left:solid 2px #CCC;
border-bottom:solid 2px #CCC;
position:absolute;
margin-top:-10px;
margin-left:717px;
height:auto;
}
#barraDerecha #menu
{
display:block;
position:fixed;
width:220px;
}
barraDerecha is the container and menu is the box that goes above the container
Can somebody help me please?
Thanks in advance
Just in case someone is getting the same chrome behaviour.
It looks like chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.
I guess .asp is injecting your barraDerecha after document load, so it positions relative to its container.
Thanks for u answer Thor you can see the example in www.autos.ultimahora.com/altaanuncio.html
I can't put fixed to #barraderecha cause in that way my bar move with the menu
Here is who I use the class:
<div id="barraDerecha" >
<div id="barraRight" runat="server">
<div style="padding:10px;" id="menu" >
<div class="titulosAzules15">
<center>
<asp:Label ID="lblUsted" runat="server" Text="USTED ELIGÍO EL PLAN"></asp:Label>
<br />
<br />
<asp:Image ID="imgPlan" runat="server" />
<br />
<asp:Label ID="lblPrecio" CssClass="DestaquesBordo14" runat="server"></asp:Label>
<br />
</center>
</div>
</div>
</div>
</div>
You have to select a plan and then push on Siguiente button
Pardon me, but isn't #menu within #barraDerecha?
If so, it would only be natural that it would be fixed within #barraDerecha unless you specify the position furthermore.
#barraDecha {
position:fixed; top:0; left:0; }
A better description (perhaps a visual) would help i terms of describing the problem more accurately.