I am having a weird problem with ie8 and lower. I apply a backgound image and color to the body element with CSS. The background is, however, painted white in IE8 and lower when I load the page.
In the moment i resize a little bit the window the background is correctly applied.
body {
background-image: url(../images/main.gif);
background-repeat: repeat-x;
background-position: top left;
background-color: #6e9b68;
}
A live site suffering this problem.
Any idea how to solve this issue?
It's a bug in the version of jQuery you're using (v1.6.1).
I came across the same problem in this question, it has all the info you need: Weird IE8 layout glitch - why does the body background disappear?
Related
First of all, I'm a total beginner and I'm trying to do things way above my league I think.
So here's my problem: I'm actually making a horizontal scrolling website using pure CSS with some parallax into it.
While I've managed to make some things work. The parallax effect is getting me crazy.
On the second slide of my template, I'm not able to make my background stick to the top inside my div, it scrolls down for w/e the reason. Also, I've made a text on top of it with a background-clip, while it works on Chrome, it doesn't on Firefox...
If you guys got a solution, I'm up for it.
Here's the website: http://triztwtv.free.fr/portfolio/
Also, I'm doing this in pure CSS but if you got a good JS framework to make my dreams come true, I'm up for it as well.
I'm not sure if its exactly what you wanted to do but I tried fixing it.
First I removed these lines:
background-attachment:fixed;
background-position-x:100vh;
from your code and updated this part of your CSS like this:
.two {
order: 2;
margin-top: 30vh;
}
.bkg1{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.ibb.co/D54n4T5/1.png");
}
Centre the text in the window the same as you did in .one, for the first screen, by setting the margin-top, so it doesn't stick to the top. I tested in in Firefox, and it looks like it works as you wanted.
I'm having a problem with image sizing between Chrome and Safari. On our Webshop (www.85online.de) I get these thin black lines on top of some images in the product grid.
enter image description here
I found that the problem is caused by "background-size: cover" in Chrome. When I change the value to "background-size: 100%" these lines disappear, but now they show up in Safari.
Anyone having the same problem? How can I fix this?
This is a background-image problem, your background-image on repeat by default, So you need to add CSS
.cmp-product-thumb .thumb-image .container-image {
background-repeat: no-repeat;
}
I want to position a background of an label element to the left but it is never on the left in ie9+.
My code is similar to this
label {
background-image: url('some-image.svg');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}
This is working in all the browsers but (of course) in the ie9+, strangely it is working in ie8.
I hope someone can help because I can't simple position it fixed with a negative background offset.
I got the solution. It was related to the SVG Images I was using in newer versions of IE and Safari that caused the error. It seems that SVGs always have a with of 100% even as backgrounds.
So If you need to positon an image for eg a checkbox or radiobutton like me, you should have a fallback to PNGs for such Browsers.
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I've got a webpage I'm designing and my design works great in google's Chrome browser but I'm using the CSS 'border-radius' property which as I'm sure you know isn't supported by IE. I'm trying everything I can think of but I've got a few things going on that are causing me a lot of trouble
The 'box' in question that I'm trying to get rounded corners on has a white background with a background image
The page background is a gradient and the outside corners must be transparent to look right.
I've got a green border running around my box.
Here's a sample image that shows what I'm trying to achieve:
alt text http://www.freeimagehosting.net/uploads/77c9ec6c32.png
Let me know if it would help to see my current CSS and HTML. I've tried a lot of different things but they all have one problem or another. The box background is set in my CSS as a non-repeating image set in the lower right and the fading effect comes from it being partially transparent so it fades to white since that's the background color of the box. A fluid solution would be nice but I can use a fixed-width solution just fine.
The background is what's causing my main problem. I can't figure out how to make the background fill the whole thing if I break up the HTML into more than one div.
HTML:
<div class="content">
<jdoc:include type="component" />
</div>
CSS:
.content {
background-color: #FFFFFF;
border: solid 2px #ACD579;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
padding: 1em 2em;
}
.content
{
background-image: url(../img/pagebG.gif);
background-position: bottom;
background-repeat: repeat-x;
}
It would be better if you provide your code, so we can see where you're going wrong.
Also, is the page breaking in IE6? or just IE in general?
To get rounded corners in IE you could use CSS3 Pie, which makes "Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.".