I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.
Related
I have a web app that looks fine when rendered in Safari but the print media queries are not being respected by the browser. In Chrome the entire printable area looks fine, however in Safari it appears to be only some variation of visible content.
When scrolling down on the page the header or top area is cut off, when printing higher on the page the bottom is cut off.
I've tried the following for the print media queries (with no effect) -
Setting a min-height
Setting any variation of a height value on the container
Zooming out and printing
Changing resolution / scale
Nothing appears to have any effect at all.
Unlike Chrome, I can't find a way to debug why it is happening nor a way to debug the print styles themselves.
Note - I am using Bootstrap for styles so there are containers, rows, spans, etc... but even removing them completely and everything being on it's own line makes no difference, the same "height" of the content is shown on print.
I've had many issues with cross browser print media queries in the past. What helps a lot with regulating the visual is setting a fixed page size and html/body.
For instance:
#media print {
#page {
size: 1600px;
}
body,
html {
width: 1600px;
}
}
In my case setting body to it's original A4 width -> width: 210mm and height: 100% fixed the problem.
I've been working with modified version of PDFJS viewer from PrimeFaces
and here is a snippet that did the trick in Safari:
#page {
size: A4;
margin: 0;
}
html, body {
width: 210mm; // A4 Paper width
height: 100%;
}
note: The issue was in incorrect pdf document scaling while previewing and then printing docs. FF and Chrome were fine.
Hope it helps somebody, who uses PDFJS extension from PrimeFaces.
I've not gotten any answers on here after pointing out the issue in the comments above and mentioning it was a free bounty. Unfortunately I'd love to give the bounty away so anyone that reposts this before bounty expires can have it -
The issue was that the application I am using is a JavaScript app that runs and creates the body of the page that was only about 400px tall. After the body is rendered there is a separate bootstrap modal dialog that was being shown with the content to print and all of the CSS was good and media queries were good but the modals' content was set to larger than the body.
Upon inspection it seems that Safari (and probably other browsers) weren't taking in to account the dialogs height when calculating the height of the body.
Chrome and Firefox were fine with this because it printed all visible content but in Safari it only prints content that is as tall as the body, which in this case was about 30% of the modal. By manually triggering the body to be min-height: 1200px; it resolved the issue since that was the maximum possible height of the Bootstrap Modal dialog's content.
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
I realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.
this displays fine in FF,Opera, IE9, but in Chrome, the images don't display due to a zero width on images
any idea why?
http://drbrent.sideradesign.com/photo-gallery/
thanks
Removing following styling fixes the issue
/* style.css:949 */
img {
max-width: 100%;
}
I'm guessing it's because you didn't specify px or em. upon inspection with chrome, it tells me that the image is 0x313 and your style says width="137"; height="313";
should be width"137px" height="313px". That's one of the problem. If that doesn't fix it, might be something else.
Edit: Like #jibiel said, it's your img{max-width:100%;}