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.
Related
The back story....
I'm creating a modal directive for AngularJS that should take any** content and display it centered in the page with a grey transparent background. Sounds like it should be simple. It was working fine until testing w/ IE9 which is the only browser we need to support. Its an in-house site. I have a fiddler working with it centered both vertically and horizontally, that probably could be cleaned up a little. I'm assuming that its going to work, I'm on a mac right now.
The modal's html needs to be in the footer which is fixed to the bottom of the page. So
So I have two questions.
1st- When I was setting up the grey transparent background found that I needed so set the position as relative. Why is this needed? fiddler
.dialogbox-wrapper{
z-index:1000;
display: table-cell;
vertical-align: middle;
/* When this isnt included this has the opacity */
position:relative;
}
2nd- We are using less and CSS3. Is there a cleaner way?
Here's what I need -
Before anyone suggests !doctype HTML, its there.
As to #1
For z-index to be honored, an element must have position of some kind. If position: relative is simply removed, then the default static position does not recognize the z-index: 1000 and so the gray box's z-index: 50 puts your "background" to the foreground.
As to #2
"Cleaner" can be so relative. Here is a modified version of your fiddle that centers it without the need for the min-width (which you expressed in your notations wanting to eliminate), by using display: inline-block with the container set to text-align: center (which is reset on the element itself). It also sets the <a> element for the "close" to display: block so that your width: 200px actually does something (an anchor is an inline element normally, which does not honor width). Of course, now 200px for the .row is driving the width of the modal display.
It all works in IE9 for me.
I've images and captions and I'd like the captions to be no wider than the images. This jsfiddle shows a working example.
The basic trick here is
div.img{
overflow:hidden;
width:1px;
display:table;
}
It seems that display:table; causes the div to stretch up to the image width, even though the width was specified as 1px. I'm using this because the image widths vary and may stretch depending on viewport width as well.
So far so good. However, on a local page, the trick is not working. The div really shows up as 1px in width. Oddly, a (seemingly) comparable div does show the proper behavior. I'm not sure how to demonstrate the problem page because it's a local page with quite some html/css and images... I'll be more than delighted to come up with screen shots or (a ton of) css if that may help debugging.
I don't immediately see differences between the functioning and the non functioning divs in the Firefox console. Does anybody have a clue what to look at?
There is a solution using CSS3:
div.img {
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
Fiddle
related link
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'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.
On a customer website, I have to add a background image for only a contained region of the page (its real content part).
The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.
Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".
On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.
ps: IE6 must be supported.
Following on from Graham's answer:
"height" in ie6 acts like "min-height" across other browsers.
min-height: 50px;
_height: 50px;
The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.
Rich
you could either give a height to the id #content
or
apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content
overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)
The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.
For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.
What you want is the 100% height you can achieve this with the following.
html {
height: 100%;
}
body {
height: 100%;
}
#content {
height: 100%;
}
You need the min-height and the body needs a height so every child element of the body will follow the rule.
Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.
If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:
.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}
instead of where it is an the moment on #content