I'm using this code to display sprite driven icons (if graphics are available only the icons should show up, for other devices the text is supposed to help):
Markup:
<span class="icon ok">OK</span>
CSS:
.icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px 0px no-repeat; }
.ok { background-position: -16px 0px; }
The sprite itself is working fine in any browser, but the text shows up in Opera and Chrome for some reason because the padding in conjuction with overflow:hidden won't work as supposed.
Any ideas how this could be improved?
Thanks in advance....
The standard way of hiding images by shifting them out of sight is to use text-indent:-9999em or something similar. It needs to really big for Opera and ems work well as they'll scale with any change in font size. Also it's a good idea to set line-height:0; font-size:0; for ie which sometimes likes to add extra space. You shouldn't need the padding to hide the text if you use text-indent.
Try negative text-indent instead.
.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }
I don't know if you need just icon (16x16 box) or icon with descriptive text. Anyway, if you need just 16x16 box, you can hide text just by
.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }
Related
Repeat-x property for CSS is not working as required.
I have a 50px image (to be used as background image).
I take a 200px div and set the 50px image as background with repeat-x css property.
The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.
css property:
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
from above link you may find correct background image
There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.
From your above code, For Instance,
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}
EDIT:
As per the updated fiddle provided by the OP, below is the solution.
WORKING DEMO
The CSS Code Change:
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>
Hope this helps.
try this one
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}
http://jsfiddle.net/c9j2D/7/
Currently my menu is working with div's as links. Needless to say this isn't good practice. Now I'm changing it to working with link tags but I've stumped upon a problem.
When a link is 'active', eg you're on that page, a background image is applied. This background image is centered to the right, one pixel further than the div so it overlaps a border of the div. Here's the css for the div:
background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;
Now, applying this method to a link tag doesn't seem to work. I have got the image to move 1 pixel to the right, but even with a z-index set, the image is under the border. Here's the css for the link:
background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;
Any thoughts about how come this doesn't work? I've also tried with margin-right:-1px; but this doesn't change anything.
I just noticed that when I set eg -5px in the background css, the rest of the image that should stick out of the border doesn't stick out, it just dissapears.
EDIT: Here's a jsfiddle: http://jsfiddle.net/UkYmJ/
The image isn't transparant but white, so the border should be 'gone' inside the triangle.
As far as I know, there's no such thing as "... center right "AND" -1px;" to the background properties. You either use "right" or a number value. What you can do that could work is using a percentage value higher than 100%, but that would be non precise in some cases, and I think it would not solve your problem.
If you're using, an anchor tag with a background and you want this background to overlap a border to the right, this border needs to be on a parent container and you'll shift your anchor tag (not its background) a -1px to the right (right: -1px; if you're using position: absolute on "a" tag an position: relative; on the parent).
Edit: using this css on your Fiddle, it works for me:
#menu{
width:149px;
border:1px solid red;
}
#menu a{
display:block;
padding:10px;
width:109px;
text-decoration:none;
font-family:Comic Sans MS;
font-size:large;
color:black;
}
#menu a:hover, #menu a.active{
color:#99182c;
}
#menu a.active{
background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
position: relative;
right: -21px;
}
​Will still try to improve it because it's a bit messy...
I don't think that background: someColor url(something) no-repeat center right -1px; is a valid syntax. background: someColor url(something) center right no-repeat; is.
why do you need to use z-index?
try making your links display as blocks while still on a single line with a {display: inline-block}
edit: you could use calc(100%-1px) but this is only supported by IE9+ Saf6+ and still not Opera: http://caniuse.com/#search=calc (and needs a vendor prefix for some browsers).
Though you can achieve what you want to do with plain CSS2.1 ;)
I believe I have read your question properly.
I think what the problem here is that backgrounds will be clipped at the edge of the element for which it is declared. It won't shift beyond the boundaries of the A element.
You could try to add padding to your A:active to give you a little breathing room.
Your new CSS would be like so:
A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}
Let me know if that works for you.
I have a div which has one of two background positions for a sprite background image depending on the class set for the div in a php script.
The CSS, which is below, works fine on standard browsers, but on the iPad I am not seeing the same. Instead I see more of the background image than I want to. As you can see from the image below, rather than just seeing one star, I am seeing part of another star too.
How can I get the background position/image looking right on the iPad?
.normal, .favourite {
width:18px;
height:17px;
margin-right: 4px;
border:none;
cursor: pointer;
display:inline-block;
vertical-align: middle;
background-color:transparent;
background-repeat: no-repeat;
}
.normal {
background-image: url('/images/playlist_sprite.png');
background-position: left bottom;
}
.favourite {
background-image:url('/images/playlist_sprite.png');
background-position: right bottom;
}
Rather than defining the background position using left/right/bottom try defining it exactly using pixels.
e.g.
background-position: XXpx XXpx;
Also, make sure that both those images in your sprite are exactly 18px by 17px as that is what the class is saying the image size will be.
I'm trying to create a block quote like in the image below:
http://www.norrislakevillas.com/images/block-quote-sample.png
The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.
The element is rendering correctly with the exception of the background image, it just won't show up.
CSS Code:
#block_quote{
float:left;
width:400px;
background:#f7f7f7;
background-image:url(images/quote-top.png) left top no-repeat;
margin:50px 0 100px 53px;
border:1px solid #ccc;
}
#block_quote p{
font:italic 14px segoe ui, arial, sans-serif;
color:#5f5f5f;
line-height:1.4em;
margin:0;
padding:20px 15px 20px 60px;
}
Any ideas why the image isn't rendering?
Thanks
Your image path needs to be relative to the CSS file. Also it's just background, not background-image if your using all the declarations in one line and the order at the end is no-repeat top left.
background: url(images/quote-top.png) no-repeat top left;
background is a "shorthand property" that sets all background properties, including the url of the image. The way you write it, it does not specify an image, only a color.
So don't mix up background and the individual background properties like background-image. It should be either
background:#f7f7f7 url(images/quote-top.png) no-repeat left top;
or
background-color:#f7f7f7;
background-image:url(images/quote-top.png);
background-repeat:no-repeat;
background-position:left top;
but not any mix of these; that will confuse the browser.
The padding, margin etc. all work, but the image won't display in IE 8, any idea why?
CSS
.arrow {
background:url(images/arrow.png) center left no-repeat;
padding-left:23px;
padding-right:10px;
border-right:0px solid #e6e6e6;
margin-right:10px;
}
HTML
<div class="arrow">
<h3><b>Headline</b></h3>
</div>
h3 CSS
h3{
font-size:14px;
text-transform:uppercase;
}
According to this link (in french), try with a space before url
background: url(images/arrow.png) center left no-repeat;
I have not personally tested, but it worked for this user
Try surrounding the url with single quotation marks (or whatever they're called).
background:url('images/arrow.png') center left no-repeat;
in case my mobile phone displays it correctly, put the background shorthand on a single line, linebreaks confuse ie.