I have attached image to button with css style.
.a-icon {
background: url('../a.png') no-repeat 100% 100%;
}
.b-icon {
background: url('../b.png') no-repeat 100% 100%;
}
In Firefox it looks fine, but in IE8 blue border appears around icon, when button becomes disabled. I have tried adding border: none and so on, but with no luck.
Any suggestions?
All links with img inside have a blue border on IE lte than 9, add to Your css global style for this tags.
a img {
border:none;
}
Add this to your CSS:
.a-icon,
.a-icon img,
.b-icon,
.b-icon img {
border: 0;
outline: 0;
background: transparent;
}
I think this will be the solution that you are looking for. If I understood you right, the problem is with the link border that is around the image. So you have to remove that.
So try this:
a img {
border:0;
}
Hope it helps
Related
I am working on a wordpress template. I need my menubar to be transparent, but it is giving me quite a hard time.
Until now I added the following css code in the "Custom CSS". But I keep getting a grey colored background. Does anybody knows how I can make a transparent background in the CSS?
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important;
}
.fixed-header #header {
background-color: transparent;
}
Try this:
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important;
opacity: 0.5 !important;
background-color: transparent !important;
}
you need to add style in your style.css file
#header {
background-color: rgba(1,1,1,0.0) !important;
}
Install this plugin for including custom css and js
Try this:
.fixed-header #header {
background-color: transparent;
}
You might be editing wrong css file. Or your website is cached. Try pressing CTRL + F5 to refresh page.
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.