A site I'm working on has a background image on the body elements that is 3000px wide. The site itself is site to 100% width and this works fine in Chrome and Firefox. You just see whatever will fit in the screen and the overflow is hidden.
When I use Safari, the site has a horizontal scroll that extends until you reach the end of the 3000px background image. If I use the inspector on Google or Safari, when you hover over 'body' or 'html', the bounding box isn't 3000px, it's the 100% width of the site. If I try to set overflow:hidden on either body or html, it doesn't fix it. I've tried to explicitly set body and HTML and to width and max-width of 100% and that doesnt work. I've tried to set no-scroll properties and that doesn't work.
Any ideas on why this would be happening only on Safari?
Related
I have html video(using with video tag) with the dimensions width 100% and height 500px. In my width and height of browser ratio, in chrome and firefox the gap it fills with white color. But in ie, it showing black color. It looks ugly for me. I want to change or remove the background. Please give me valuable suggestion to fix this.
Thanks
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
Take a look at http://benoitfal.com/tess.html on an iPhone and notice how my container div is wrong... It should be 100% width of the browser.
Say your iPhone is like mine 375px wide - this is 100%. Your images are wider than 375px, so the iPhone has zoomed out to show the whole page. The container is still 100% (in my case 375px), which is why your box is only about half of the screen. If you make your image widths 100% instead of their actual size, they will shrink to fit the viewport.
Original solution for desktop:
Your box is 100% width of the browser but you've added padding of 6px to each side. Unfortunately this gets added to the width which is why it's overflowing.
Set box-sizing: border-box on the div and it will fix it.
More about box-sizing here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Because this isn't a fully accepted bit of CSS yet, you should use browser prefixes as per the example in the link. If you're using Compass for your SASS, you could use #include box-sizing(border-box).
When You Size the Browser Down to under 1,000 Pixels in WIDTH and THEN scroll horizontally to the right, all the containing divs keep the same width of the browser window and do not extend to the full width.
My width is 100% for the Footer and Body.
Below is an example of what I am talking about across all browsers I have tested, So I am assuming 1 Solution will fix them all
Opera 12.0
Firefox 11.0
Chrome 20.0.1132.47
Safari 5.1.1
IE 9.08
Working Sample Here : http://glustik.com/siteTemplate2012/
Any advice from an expert would be greatly appreciated.
Thanks for your Time.
As per the solution in other questions on stackoverflow: adding a min-width attribute to the divs should do the trick.
In your case I think:
min-width: 1024px;
(width: 100% only means 100% of viewport)
see also:
100% width bg images not extending on horizontal scroll
and
CSS 100% width on browser resize
I'm experiencing an issue when setting a minimum width for an area. The problem is when the browser goes smaller than the min width, the background color/image set by CSS doesn't expand further than the window size. In other words if they were to scroll to the right to view all the content, the background seemingly disappears.
If the browser was 1000px wide, and my min-width is 1200px, then the 200px outside the min width area won't have the background.
Ideas?
DEMO: http://www.nickersonweb.com/demo/PMS/index.html
You're on the right track. I had this problem once as well when I was making a site that had repeating horizontal edges. The solution is to also give your parent divs <div class="banner">,<div class="body">,<div class="footer"> the css style of min-width: 1000px;. Now it will show just fine when you scroll.