in site we have like below text as in link1 :
But instead of text - Black & Green , i want to display images as below or css icons as here....
i uploaded Black & Green images to below path :
http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png
http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png
i am trying below css to display icons instead of text, but its not displaying any icons in site. I want to hide text with icons.
label[for=options_455_2]
{
width:50px; height:50px; background:#000; border-radius:50%;
}
You have to use display:block on label. So that empty label does not have zero width and height.
Secondly link you took the idea from is setting the background-color. but you are not. Either use different background-colors (like that link) or use background-image property.
Here's a working snippet.
label{
width:50px;
height:50px;
border-radius:50%;
background-image:url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png");
background-size:cover;
display:block;
color:transparent;
}
<label>jdjshjkdhd</label>
if you have no influence on html I can give you a hack :))
label {
color: #fff;
width: 0px;
}
label::before {
display: block;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;
}
here is codepen http://codepen.io/kejt/pen/EZZGeE
This workaround could help you with your requirements. Change the color of background based on for value.
label[for=options_453_2]{position:relative;border-radius:50% !important;max-width: 20px !important;}
label[for=options_453_2]:before{background: #000 !important;display:block;content: "";position: absolute;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;}
I tried to make work my library and I found that "background-color" CSS property not work when it used by jQueryUI. On the other hand if I simple use the "background" property with color value.
I make examples on jsfiddle:
- Working example
- Not working example
However is I simply make a class and apply to a div element in the html markup it works well.
Code:
HTML markup. Same in both cases:
<div id="selectable">
<div class="ui-widget-content">1</div>
<div class="ui-widget-content">2</div>
<div class="ui-widget-content">3</div>
</div>
Javascript. Also same in both case:
$(document).ready(function(){
$("#selectable").selectable();
});
CSS working scenario:
.ui-selected
{
background: rgb(255,0,0);
border: 1px solid yellow;
width: 100px;
height: 30px;
}
CSS non-working scenario:
.ui-selected
{
background-color: rgb(255,0,0);
border: 1px solid yellow;
width: 100px;
height: 30px;
}
LIVE DEMO
hi Peter, try putting the id in front of css, then it works.
#selectable .ui-selected { background: rgb(255,0,0); color: white; }
It's weird that I have this bug on IE8 and not on IE7, where it shows up fine:
http://www.axiscirugiadecolumna.com/
I'm using a wordpress plugin for the shadow+ribbon (I hardcoded the ribbon inside the shadow plugin). The border is simply css but on IE8 the right border won't show up and I just don't know why.
My html is the following:
<div class="alignright" style="overflow:hidden;display:table;line-height:0;text-align:center;width:453px;">
<div class="ribboncontainer">
<div class="ribbon"></div>
<img height="297" width="453" style="padding:0 !important; margin:0 !important; max-width:100% !important;" alt="" src="http://www.axiscirugiadecolumna.com/wp-content/uploads/2011/11/foto1.png" title="foto1" class=" size-full wp-image-143 shadow_curl">
<br><img style="margin:0 !important;height:10px;width:100%;-moz-opacity:.75;opacity:.75;" class="shadow_img" src="http://www.axiscirugiadecolumna.com/wp-content/plugins/shadows/shadow_curl.png">
</div>
</div>
This is after the plugin is applied. The inline styles are applied by the plugin.
And my css:
.alignright, .aligncenter, .alignleft {
margin: 5px;
padding-right: 5px;
float: right;
}
.ribbon {
background-image: url("ribbon.png");
bottom: 21px;
height: 40px;
position: absolute;
right: -5px;
width: 154px;
z-index: 888;
}
.ribboncontainer {
position: relative;
}
.shadow_curl {
border: 6px solid #BAD5BC;/*Right border is missing in IE*/
}
I think the issue persists even if I get rid of the ribbon classes and divs.
Remove that
max-width: 100%;
style.css (line 894)
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img
Well, this is because IE8 (I also tested your page on IE7) - and both does not support a CSS rule "box-shadow", in your file style.css (line 171).
If you insist to use a drop shadow (as I assume), you should use a transparent png/gif file for these browsers. Keep in mind that IE6 does not support native png files, so it's better to use gif.
I have this code:
<div title="" class="icePnlGrp graButtonActionDiv graButtonBackgroundOn">
<label id="j_id89:j_id99" class="iceOutLbl graButtonActionLabel">Select</label>
</div>
With css:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
and
.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
I cannot figure out why on Firefox and IE, hovering on that div does not change the background image.... But on Chrome it works perfectly.
Can you please give me a helping hand?
Thanks.
Try giving the :hover style rule more specificity over its normal state, so:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
div.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
which will over write the original style rule
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>