I can't seem to find out why some images at a project of mine (http://www.de-drie.nl) have a strange (grey?) border at the bottom. Could it be since the images aren't scaled? I have scaled them to fit content with css.
At first this problem was there in: FF, Chrome, IE and Safari. After playing a bit with the width (in css) of the images the strange border disappeared in FF.
The other browsers are still showing the border problem.
I have seen multiple posts here at stackoverflow which describe the same kind of problem.
The solution should be display:block or vertical-align:bottom, but this really doesn't seem to work for my problem.
All your images with grey border in the html, literally the actual images contain a small grey border underneath
For example this: http://www.de-drie.nl/images/uitbouw.jpg contains this:
Related
The following Electron-based application is divided into five elements by vertical iFrames. On resize, the then blue borders sometimes render an additional white-colored line of one pixel width.
I can reproduce this error in latest versions of Edge, Chrome and FireFox.
Before the discussion comes up: No, I'm sorry, removing the iframes is not an option (for reasons unrelated to this question)
While typing this question I came up with an idea: What's actually visible when these white lines appear?
It's the background of the surrounding index.html file, which by default is white. While the lines are still there, changing the background color to match the respective iframe background color does effectively hide them from sight.
Ok, see if you can help me out with this one:
1) Go here: http://thepredatorial.com/DHS/index.php in Google Chrome/Firefox/IE9
2) Everything looks great
3) Go to the same web address in IE8
4) There is a gray background (that matches the outer corners) behind the slides of the slideshow that I can't seem to find out why or get rid of...
Any help?
Ok, I ended up fixing it on my own.
Because IE8 had crazy bad PNG transparency issues, I ended up making a png of the entire block above and below the transparent gifs, absolutely positioning it ABOVE everything, then z-indexing everything BUT the banner slides above the absolutely positioned element.
Crude? Maybe. However, now it works beautifully in Firefox, Chrome, IE9, IE8, and FOR GOD KNOWS what reason IE7 as well.
IE8 and below has issues with applying transparent effects to already transparent images. It appears your jQuery "cycle" effect is causing this: remove the flashing transparency, remove the grey background.
Since IE's dev tools are fairly crappy I couldn't easily test any of the workarounds posed here on your actual site, but hopefully one works for you: Problem with JQuery cycle on IE8
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.
I am pulling my hair out on this one.
We're just about done with the development of an overhaul to our site. As a last step, we're trying to wrap up all the glyphs and icons into a sprite. They're all transparent .png's so the sprite is too. It appears that if a background comes from a sptire, IE distorts it. If it comes from the original file, it does not. FF and Chrome are fine either way.
I am looking at the orignal image and the sprited version side-by-side with grids to see that the pixels are identical. I have counted the pixels in the sprite many times to ensure I'm using the right coordinates. My CSS looks like this:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
The 'XX' lets me toggle back and forth. With the single-file version, it looks perfect: . The sprite-version looks like this: . It looks like it is 'squished' both vertically and horizontally. This does not happen in FF or Chrome.
Any ideas?
EDIT I was able to strip out most of the noise and post an example here. I've added notes to the example to describe my problem.
Thank you so much for taking the time to look at this!
UPDATE We've since replaced these 'overlapped divider images' with CSS pseudo-classes that REALLY do overlap and the zooming issue seems to have gone away. Of course now we have new problems - IE8 gets the z-order wrong and IE7 doesn't understand psuedo-elements at all. But at least the markup is simpler and the zooming issue is gone.
It turns out my problem was caused by IE's 'zoom' feature. Without any zoom, everything looks great like the other browsers. Even 150% or 200% looks good. But 125%, where I had it, causes this distortion. It happens in IE7 and IE8.
I'm having a weird problems with one of my Arabic sites.
See that gray rectangle with the red heading in the homepage? right underneath it shows up a horizontal gray border in IE8 that I just couldn't get rid of unless I remove the border under the black headings below, which I don't want to do.
There's even an extra space between those two elements that's not supposed to be there. You can view the page in Firefox vs. IE8 to see what I mean.
Any idea how can I fix this?
Your help is much appreciated :)
there's a duplicate h2 under the episode_summary producing in ie8.
u should try validating the site first. http://validator.w3.org/