I’m working on a site which has almost 30 background images, so I decided to make a "sprite image", and use the background-position attrib in CSS.
In FF, and Opera the whole design shows correctly, but under IE8, I get a problem. It seems IE8 doesn’t position the image correctly. I see a thin line in a few places between the images. Sometimes when I zoom in with mouse scroll the line disappears, then shows again...
For example, I use sprites something like this:
#index {
margin-left:0px;
margin-top:0px;
width:327px;
height:57px;
margin-bottom:0px;
float:left;
display:inline;
background-image:url(images/sprites/sprites_left.jpg);
background-position:0px -340px;
overflow:hidden;
}
Is this an IE8 bug? What should I do? Leave the design split into 30 background images?
Thank you.
Generally speaking I would leave a gap of a few pixels (or more) between each tile in your sprite image.
Related
I need background image sprites to resize according to the width of their container, without showing the whole sprite, and background-size:100% accomplishes this, like so:
#featured ul.icon-controls li.prevention {
background:url(img/ico1.png) no-repeat;
background-size:100%;
height:60px;
width:50px;
background-position: 0 -113px;
}
But, alas, I have to support IE8, which does not support background-size. I've found scripts like backgroundSize.js, which force IE8 to render background-size:cover and background-size:contain, but those don't work for sprites. And I need to use a sprite for the various states of each icon (hover/active/inactive).
Is there anything I can do -- hacky solutions are ok given my desperation!
Here is a fiddle of my full code: http://jsfiddle.net/Pw7fL/
Check out this!
https://github.com/louisremi/background-size-polyfill
As I found out it is easy to use!
I'm working on a website for a friend of mine and I'm having a bit of a CSS nightmare. The URL is http://www.bike4haiti.com.
In Firefox and Chrome, there is a Haitian flag that appears in the top right corner of the top banner. In IE, however, it appears as a thin vertical line along the right edge, beginning at the top of the menu and descending past where the content section begins. The CSS class is quite simple code:
img.rightfloat
{
float:right;
padding-left:1px;
padding-bottom: 1px;
padding-right: 5px;
padding-top: 1px;
}
My guess is that it is one of the other CSS elements causing the problem, but I have no idea which one. I tried using the F12 tool, but I had no luck finding the problem.
Help please!
set your first anchor to float:left; you already have the image floating so then just clear them with #topmenu{float:none; clear:both}
that should do it. you'll probably want to tinker with margins for spacing.
You have a your width set to nothing (width="") in your <img> tag.
I have this slideshow with a overlay that pops up on hover, you can view it here. Just hover over any pictures below the 'featured' section. Works great in FF, Webkit, IE9. I made a separate stylesheet for less than IE9 and in it I have declared width, height, zoom, positioning, used all the filters that work in IE.... and I'm not getting opacity in either IE7 or IE8. The div with class overlay is appended with JQuery, is this a problem? Here is my css:
.overlay {
background-color:#fff;
filter:alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
zoom:1;
width:160px;
height:20px;
z-index:50;
position:absolute;
bottom:0;
}
Your fading routine is adding an inline style that results in progid:DXImageTransform.Microsoft.Alpha(Opacity=60) which is overriding your filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65) in your css. It is typical for a fade routine to put an inline style, but you need to make sure that it either ends where you want it (with the 65% opacity) or it goes away after the fade so that the css is used (in Firefox it appears to be fading with an inline and then deleting the inline once done so that the style sheet opacity is picked up).
Edit (added info from comment on fading with jquery): If you are using .fadeIn() then try instead to use .fadeTo(400, 0.65) (see http://api.jquery.com/fadeTo), the 400 is the default duration for .fadeIn(), so you could change that, and the second number is the final opacity setting
I have a container div with more divs inside for a slideshow effect. "The container" div is over body's the background image.
CSS for the body:
body { background: #333 url(images/bg.jpg) repeat-x top; }
Problem is in IE7 the container div has a background color #333. Firefox shows up properly as clear.
Here is the CSS for the container div:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
}
Any idea why it's picking up the body color and not the image? Again, it works right in Firefox.
IE7 does indeed support URLs for backgrounds. You are correct in saying that it does not support Data URLs, but this is not a Data URL. A Data URL is CSS looks similar to:
url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) .
Note the use of the keyword "data:". The key here is that the data IS the String... not a file.
There are some little catches, however. First, the URL must be in quotes, as in:
body { background: #333 url("images/bg.jpg") repeat-x top; }
IE does, however, interpret the background short syntax differently, so I have found that expanding the syntax helps immensely with IE pre 8 bugs.
body { background-color: #333; background-image:url("images/bg.jpg");
background:repeat-x; background-position:top;
}
Finally, your container div must be explicitly defined with a background color:
.cntdiv {
width:100%;
display:block;
margin:0 auto;
margin-top:15px;
overflow:hidden;
/* This is the line that will do it */
background:transparent;
/* OR EVEN */
background-color:transparent;
}
This code is tested and runs correctly in IE7 and has the same behavior in the others as well. Judicious use of "transparent" is awesome.
It also must be understood that the issue you are facing is not a bug, but a user agent CSS style. This is according to the W3C standards unlike the other div bugs that IE has (such as poor :hover support). Because you didn't define a background for your div, the User Agent (IE7) is allowed to do whatever it likes. This is true of all HTML Elements and all browsers. It is why buttons look a certain way unless you change it with the CSS. Explicit definition of every aspect is the best way to overcome little snafus such as these.
Hope this helps,
FuzzicalLogic
The reason it doesn't work in IE7 is because you are using a data URL, and IE7 does not support them. Evidenced by:
http://www.caniuse.com/#search=Data%20url
For IE7 you'll have to use conditional comments and adjust the way you reference the background image. Here's a quick and simple intro to conditional comments if you don't know about them yet:
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
Ok, I found the problem. I was using the jquery.cycle plugin to rotate the divs into view. Somehow IE7 didn't like it. I tried a different jquery plugin and it works perfectly.
Thanks for your suggestions.
I have a number of images on a page contained within a single sprite image, these images must be contained within the single sprite due to other requirements of the site.
Whilst this is working fine in most browsers I have an issue on Opera Mini where it is not rendering the sprite at all and just displaying the whole image.
Is there any CSS that can be used to provide a text alternative when the browser is unable to render the sprite?
Little confused. The sprite is not rendering but is displaying the whole image? Do you see all the sprites at once, or none at all?
You might use browser detection for opera mini (and any other mobile browsers where the rendering is not working as expected).
Add the desired text to the sprite element, and use a large negative text-indent to hide the contents.
Disable the indent and background images for unsupported browsers.
allbrowsers.css
div.sprite {
width:20px;
height:20px;
background:transparent url(img/mysprites.gif) no-repeat scroll top left;
overflow:hidden;
text-indent:-5000px;
}
#first_sprite {
background-position:20px 40px;
}
mobilebrowsers.css
div.sprite {
background-image:none;
text-indent:0;
}
page
<div id="first_sprite" class="sprite">Alternate text</div>