I'm currently testing out css for img tag. On chrome it look good but when I viewed it in firefox, the last image is stretched out. I'm not sure what's wrong. Below is my jsfiddle in which you can see the difference when you view it in Chrome and Firefox.
.thumbContainer img{
margin: 0 auto;
max-width:100%;
max-height:100%;
object-position: 50% 50%;
object-fit: fill !important;
}
This happens, because you are using browser-specific CSS properties like -moz-box or -webkit-box, which are not officially supported. This can cause different behavior in different browsers, becauseit's up to the browser to decide how to display such elements, and for Firefox, the "correct" behavior is, to strech it, while for chrome its correct to fit in its parent. My general advice is: Avoid styling with prefixed CSS properties, unless it is absolutely necessary to enable standard CSS functionality in older browsers. Maybe there is another approach for your problem with flexbox.
Related
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.
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
I'm developing a website. Everything looks great on 100% zoom but when I'm zooming in or out in chrome and IE (not Firefox) the style changes and div blocks move! I have a container div with a background and some div blocks on it. Everything should be in exact position and it is important in my site.
You can see in picture how it makes my style look so bad.
I tried to use percentage instead of pixel for sizing and positioning of all elements in the page but its not working.
My CSS:
.container{
width: 880px;
background-image: url('b80.png');
}
.picture{
margin-left:13px;
margin-top:11px;
}
I too faced the same problem, when I tested in a different screen size.
Try position: relative or display: inline-block for .picture. This may solve the issue.
I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:
img {
max-width: 100%;
width: auto;
height: auto;
}
As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.
Anyway, I got things to work by overriding the image width a Firefox specific directive like this:
/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
#-moz-document url-prefix() {
img {
width: 100%;
}
}
I don't think I should have to do this, and googling doesn't seem to come across this issue.
This is the default CSS that is used for responsive Images:
img {
max-width: 100%;
height: auto;
width:100%;
}
And this is the indispensable Javascript: Bongard.net
Thanks to David Bongard for the Javascript.
Now add the following to the "if safari" rule of the Script:
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].style.width = "auto";
}
Safari wants width:auto; the rest of the browsers i tested are happy with width:100%;
This works for me
#-moz-document url-prefix() {
img{
width: 100%;
max-width: 100%;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
img{
max-width: 100%;
}
}
I have similar problem, and found out setting max-width on the wrapper element kinda solves the issue. (Only tested with Firefox 23, but it should works with earlier Firefox too.) See also these JSFiddle:
http://jsfiddle.net/CLUGX/ (demonstrate the issue on Firefox)
http://jsfiddle.net/CLUGX/1/ (uses max-width on wrapper to fix the issue)
http://jsfiddle.net/CLUGX/4/ (demonstrate that responsive sizing works, try resizing inner frame)
Before max-width:
After max-width:
One thing to note, however, if you happens to set padding on wrapper element, it won't be taken into img's width calculation and will cause inconsistent results between Firefox and Safari (http://jsfiddle.net/CLUGX/3/):
Chances are your image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.
If that's what's going on, the CSS spec doesn't actually define the behavior of such markup, where the parent's width depends on the child and the child's width depends on the parent.
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483 for some discussion on the issue.
If you use the width for image in px or gave padding or used display:table instead of display:block for the image, then image responsiveness will not work properly on some/all browsers
Well after trying all sorts of codes and fidles, this simple edition on my css did the trick for me:
img {width: 100%;}
Simply then where you wish your images to resize, define them without adding the "width" parameter (sizing to original from source); and then if you do wish to fix their size, simply add the "width" parameter on SRC style (regular width="" definition won't work). If it's an inline image on your paragraph, simply wrap it in a div and align that div to whatever side you'd like. Reeeeally simple!
It works both for Google, Firefox and IE. Cheers!
I have just had this problem and found a solution: When I set the img max-width in my CSS sheet, nothing happens - the image won't scale. When I set max-width in the page itself - where the image is called, it works in all browsers and on all devices.
No:
img {
max-width: 100%;
height: auto; }
Yes:
<img src ="image.jpg" style="max-width:100%; height:auto;">
If anyone can shed some light of wisdom on this, please do.
I used Kridsada Thanabulpong's jsfiddle but only got it to work when I removed display:table from the div wrapping my image.
I'm attempting to fix my CSS to allow older IE's to view my web site as best as possible.
I'm using 'border-radius' to style form fields giving them rounded corners. For the older IE's I'm using the background image below--
http://studio.allanbendy.com/sites/all/themes/studio_allanbendy_7/i/form-textfield-bg.gif
.form-textfield {
background: url("/i/form-textfield-bg.gif") no-repeat bottom right;
background-attachment: fixed;
height: 15px;
width: 362px;
}
Unfortunately the CSS above does not seem to style the text field on IE 7 and 8. It works just fine on IE 6.
Any suggestions?
Remove the background-attachment: fixed;. Because IE6 ignores this for non scrollable elements it's displayed there. But at all the attachment definition makes no sense, if you want to style a single element.
Instead of an IE-specific graphic, I'd recommend using CSS3Pie to do rounded corners in IE.
It's a great solution to get IE to support standard CSS border-radius style.