I have an html windows demo here: dlml.org/gargoyle/windowsdemo.html
Works for all browsers except opera, which doesn't resize properly with bottom:0 (confirmed here: http://dev.opera.com/forums/topic/562551).
I've substituted top:0 bottom:0 with height:100% here and there, and that helps, but that's not possible in all situations.
Does anyone have a workaround for this?
You could use display: table; properties in CSS
Related
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 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 am having issues with overflow-x:hidden in IE. All other browsers seem to accept it, but IE creates overflow-x:hidden (x and y).
Does anyone have any tips on a IE fix?
Since -ms-overflow-x is working it's possible you have an issue with your DOCTYPE declaration.
See here
Remarks
Windows Internet Explorer 8. The -ms-overflow-x attribute is an
extension to CSS, and can be used as a synonym for overflow-x in IE8
Standards mode.
With Microsoft Internet Explorer 6 and later, when you use the
!DOCTYPE declaration to specify standards-compliant mode, this
property applies to the html object.
I was able to fix the same issue I was having in IE8 by adding:
position: relative;
to the div that needed the overflow-x: hidden functionality.
Without the relative positioning on the div, my content was showing outside the div even though I had set overflow-x: hidden.
The answer of Svbaker is also correct. try this one this work for me.
<div style="overflow: auto;
overflow-y: hidden;
-ms-overflow-y: hidden;
white-space: nowrap;
position:relative;
">
...somecodes..
</div>
-ms-overflow-y: hidden; - this works for IE8 just remember adding position:relative because overflow-y/x is for CSS3 and works for higher browser.
yah overflow-x and y is a css3 specification.
Try using a jquery plugin like http://baijs.nl/tinyscrollbar/
otherwise I'm guessing you are trying to hide the "width" of the element? why not
1. set the width of the element to a specific size
2. set overflow:hidden
3. set height to auto
http://ratest3.com/spare-2/
The main content area is floating up over the header image only in FireFox. I've checked it in the latest-greatest of Safari, Chrome, IE and on my Galaxy S3.
Help :)
Try adding clear: right; to the #main CSS declaration. That fixed it for me in Firefox.
Alternatively, you could probably apply a clearfix class to the #branding div. (I didn't try that though.)
I just realized that every browsers seem to have a curious render problem.
This is the test case: http://jsfiddle.net/cKNQD/
1. Please scale your browser until the bottom scrollbar appears.
2. Then scroll to the very right.
You will see, that the #header will not longer have a 100% width. The problem
seems to be the .wrapper inside. I need that wrapper to limit the dimension
of the #headers content.
Solution welcome.
Add min-width: 980px; to the header.
See updated fiddle demo.
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.
Width of #header is not defined, so it is not 100%, it is "auto".
Maybe you should remove "width: 600px" from .foo class?