I am using a sprite to change the color of an image on its hover status, though when I hover over the image it moves down slightly and changes color. I have created a JSFiddle to replicate the problem.
I am probably using the sprite incorrectly? I'm unsure as it is my first time playing with them.
.ratings ul li {
width:18px;
height:18px;
background:url(star.png) 145px 102px;
}
.ratings ul li:hover{
width:18px;
height:18px;
background:url(star.png) 145px 86px;
}
I am using this image:
Can anyone can point out my mistakes?
Cause
The sprite is not configured correctly. At least one of the background-position values should be either zero or negative in your example.
The technique of CSS sprites depends on negative background-position values to change the area within the image used as the element's background. In contrast, positive (i.e. greater than zero) background-position values actually change the position of the background image in the element.
Solution
background:url(star.png) 0 0;
background:url(star.png) 0 -18px;
See jsFiddle demo
Note about the image
Also note that your current sprite is 34px high, while it seems each star is only 16px high. This means there's a 2px gap between the two stars, so the second background-position is -18px and not -16px.
.ratings ul li {
width:16px; /* redefine your image offset */
height:16px;
background:url(http://i.stack.imgur.com/S5T0M.png) no-repeat;
}
.ratings ul li:hover {
background-position: 0 -18px;
}
You do not need to define width and height which you had already on :hover state. You should find informative guidance about css sprires on this site
First: you should use a 16px "box" (width/height) for your star not 18 because your star has a width of 16px.
Then change your offset correctly, you will have less problem.
Related
I am fairly new to code and taking baby steps with an issue I am having: swapping out background images. I made very slight adjustments to the three images that make up the background of the site. One was a main background image (in a bodywrap container) that loaded just fine. The next was a wrapper image with a repeat-y attribute that is no longer taking since the swap - the image shows up, but is just showing up as a single white line, while it is meant to 'fill' the rest of the page. Finally, the footer image is not showing up at all.
I thought that swapping out the current images with ones that were only slightly adjusted in photoshop (all I did was remove drop-shadows and red margins) would be an easy task - my mistake!
I tried adjusting the code and got nowhere, so I've copied the original code. I believe that the problem lies within my CSS:
#wrapper, footer, .pagetop, .copyright {
width:942px;
margin:0 auto;
padding:0px 37px 0px 37px;
overflow:hidden;
clear:both;
}
.bodywrap {
background: url(images/background.png) 49.9% 0% repeat-x;
width:1016px;
margin:auto;
overflow:hidden;
}
#wrapper {
background: url(images/wrapper.png) 49% repeat-y;
clear:both;
padding-bottom:25px;
min-height:225px;
}
.footer {
background: url(images/footer.png) no-repeat 51% 0%;
overflow:hidden;
min-height:107px;
font-size:1.2em;
padding-top:17px;
font-family: 'Francois One', sans-serif;
}
Thanks in advance for sharing your expertise!
First thing I see that your background instructions are not consistent. Your no-repeat is before and after your alignment values. I would suggest to try keeping it the same everywhere in your code. when your code gets heavy it can be confusing.
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
right means align the image on the x axe to the right and
top means align the image on the y axe to the top
Do you understand that your 49.9% values are telling the background image to start repeating at 49% to the left from the edge of the box you as it to be in.
Also your .bodywrap does not have a height. if you only see a small line, this is because your element is only taking up the space the content inside this element is taking. you might have a space or 1 line of code. hard to say without the HTML.
So you need to give the .bodywrap element a min-height or height equal to your image height. The image you provide AS background to an element, does not define that element's height. The <img> tag and an image background don't work the same. an <img> tag will determine its height on its own but you cannot repeat it like a background.
Here you can see more information on background here: http://www.w3schools.com/css/css_background.asp
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
I cannot solve a css problem.
I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.
can u help me to solve this?
If you dont want your link text to be affected you should modify the rule for the .container selector to look like this
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
it will keep your background color design without affecting your text
Opacity , as well said here several times , affect the element and its children
Using opacity . Text is affected
Using rgba(255,255,255,0.5), children not affected
Take care of the other rules that can take action due your javascript and hover situations
Fiddle here
Bis spater
The solution is easy. Just set the background-color CSS property to transparent.
.nav {
background-color: transparent;
}
In css3 you can use transparent backgrounds instead of making the whole panel transparent.
To add a transparent color you can do: rgba(255,255,255,.5) where the .5 is the opacity.
You should try just a simple css background property.
.navbar
{
background-color: transparent;
}
I use transparent png image (bg.png) with the desired opacity, and call it like this:
.menu
{
background: url('bg.png') repeat;
}
The png image can be small, even 1x1 pixel. The repeat is to fill the background space entirely.
its as simple as this
background: none;
CSS Sprite is useful, helps speed up loading time and performance. But I find they have certain limitations. I like to know whether there are ways around this or whether it is inherent and that they are limited.
For example: If I wanted an arrow icon on my anchor link to be on the right hand side:
a
display:block;
padding:0 15px 0 0;
background:transparent ("/images/arrow.gif") no-repeat scroll right top;
}
a:hover {
background-position:-10px top;
}
This wouldn't actually work because I positioned the arrow icon to be on the right hand side of my anchor tag. But then how would I shift the image -10px when I still want it positioned on the right?
You can use the :after pseudo element to create an additional element after the link text but still inside the anchor tag by CSS, set it to equal size of each picture in your sprite, and then be able to use background position no problem.
Here is an example of doing this with a 4 images sprite, each of the images are sized 18px * 18px (I just found the pic online on google images, so, not even sure how long it'll be available):
To see the example live version: http://jsfiddle.net/Meligy/CLLau/
The important bits of the code:
a:after {
content: " ";
display:inline-block;
width:18px;
height:18px;
overflow:hidden;
vertical-align:middle;
margin-left:0.5em;
background: url(http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif);
background-position: 0 0;
}
a:hover:after {
background-position: 18px 18px;
}
Update:
This is supported in all current browsers, in IE, it's supported starting from IE8.
For a hack to support for IE 6, 7, check this other Stackoverflow reply:
:after and :before css pseudo elements hack for IE 7
I have an image slider that is positioned over a background image but I can't seem to get the image slider to position dead center inside and have the background image not be cut off. Also its got some strange behaviour where the first slide is always further over then the rest!?!?
#slider {
background:url("../images/bg-slider.gif") no-repeat scroll 0 0 transparent;
height:389px;
width:590px;
}
#slider ul { padding:25px;}
#slider ul, #slider li { width:590px; height:389px; overflow:hidden; list-style:none; }
http://fluroltd.com/clients/harveys/
ah okay, think I see what you mean. Try getting rid of this line:
#slider ul { padding:25px;}
this is increasing the width of your ul and li's by 50px. The other option is to reduce the width declaration to 540px...
EDIT
a third option would be to modify the js you are using. Currently it is using .width() to get the element size. This does not include the padding values.
Use .outerWidth() to include the padding in the calculation.
I found the issue earlier in my CSS I had a more generic declaration on the CSS for ul. Made it more specific and viola.