Problem: The sizing and layout is different from the two browsers and I'm not sure how I can fix this
Note: They are both shown in full screen
In Chrome
In Microsoft Edge
It looks like your Edge browser's zoom is larger than it in Chrome. Please check the zoom in Edge and Chrome and make sure they're both 100%.
Related
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
A couple websites we've developed with Zurb Foundation 4 & 5 exhibit a strange (edge case) behaviour when zoomed out to varying levels on IE11. For example, with one website when zoomed out < 63% on IE11 (window maximised IE11/Win7 running on VMWare Fusion on 1440w screen; mileage may vary so zoom out less than 50% to be more likely to see the behaviour), the main content div moves off center. The threshold at which the block goes off center seems to have some relation with the zoom level vs window width.
Normal Layout:
Exhibiting layout issue on IE11 when zoomed out:
The sites have been tested across a variety of devices and browsers (Chrome, Firefox, Safari, Opera, iOS Safari, Android Chrome, Android FF) and all render properly and zoom out with no problems. It is interesting to note that zooming out to similar levels doesn't break the layout even on IE8.
Is this a strange IE11 bug? I consider it a bit of an edge case because I'd wouldn't imagine many would regularly zoom out to that degree, but it's a bit of a curiosity because it doesn't occur on IE8 and I've only observed it on Foundation 4+ sites.
I took a quick look in IE11 and can duplicate the issue when I zoom out to 50%.
div#contentContainer has max-width set to 62.5rem. Change the value to 100rem and the panel will center-align appropriately to the screen.
You may want to consider switching from a rem value to em.
When viewing http://adam.inbulgaria.org in Firefox, it displays as it should; in Chrome and Opera, however, the floated image containers misbehave. I'm sure this has to do with my use of experimental properties (rotation, transitions on hover), but what can I do to make it better?
To clarify, in Chrome 17.0.963.56 m, when hovering above the images, some empty space appears under them. In Opera 11.11, there's space to the right of the images, even when not hovering.
It shows up like it should in Chrome 17.0.963.56 on Mac. The only difference i can see is the font size + the horizontal bars look different.
Here it is: http://appdist.me
On Firefox and IE it displays correctly, but not on Chrome and Safari.
I'm using svgweb, but still no good.
How can I get Chrome and Safari etc. to display the content the same way as Firefox and IE?
I'm not going to post any code, just view the source of the HTML. :)
Thank you.
It seems to work well in both Firefox and Chromium by setting width and height attributes on the object tags to 100% and setting width and height attributes of the SVG elements in keyboard-gray.svg and frame-home.svg to 100%. Check it out:
http://live.echo-flow.com/stackoverflow/appdist.me/
Unfortunately, I don't have a Windows box available to test this in IE at this time.
I have a web site that has had a fluid layout for years. That is the body's text size is defined and from there all other sizes are relative and are specified in terms of ems. This made the page fully scalable on IE 5.5 upwards, old FF versions etc. Nowadays it isn't really that important anymore since in modern browsers there is page zoom opposed to text zoom. Page zoom works on all browsers for me IE, FF, Opera and zooming in works on Webkit based browsers, too. But zooming out (to less than 100%) breaks the layout and I don't understand why that is.
here is an example page from the page as it stands to try this:
Why does the layout break in Safari (I used 5.0.5 to test) and Chrome when zooming out? In Chrome it works for like two steps of zooming out and then breaks. There is little use to zooming out so this is more of an academic question I guess. I'd like to understand what's happening.
Thanks.
It's might because of some default browser styles that are based on px instead of ems. For example, if you use the webkit inspector in Safari <ol class="navi_rechts"> has a user agent stylesheet that includes -webkit-padding-start: 40px. It might be worth using a CSS reset or checking for things like this on any messed up elements.
EDIT It may also be a rounding issue with some of your values. I'm not sure how many decimal places Safari will look at, but I'm guessing things like padding: 0.46154em 0em 0em 0.92308em; on h1.navi_parent_rechts might be too specific.