My website that I'm currently working on have a problem in Firefox 7. A margin pushes the gradient in #wrapper up from the bottom and ruins the flow. I've reset the margin to 0 on body and html already and can't seem to find anything to explain this. Firebug tells me nothing of value on this case.
My code is here and you can look at the website yourself here
Just set the body height to 100%. This might help.
And also add background-attachment:fixed; to avoid the background scrolling just in case your page scrolling.
Related
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
Since adding position:fixed elements, my pages have been scrolling too far and the fixed background repeats its self.
It's not an issue in Firefox, but Chrome shows this issue.
The problem can be seen at:
http://www.25892.rwswebsite.com/listings
It's been driving me crazy for hours. A second set of eyes would be much appreciated!
I dug around in Web Inspector and was able to fix a few of your problems:
Scrolling too far:
For <body>, overflow should be visible. This is the default value, so it will take this value if don't explicitly set overflow-x and overflow-y (and nothing else overrides it).
Multiple background images:
Looks like you're setting the background image on both the <html> and <body> elements. For fixed backgrounds like you're doing here, I like to set backgrounds only on <html> (see here).
Also, I you should try using background-size: cover for the background image. With cover, the image will be sized to the smallest dimension that will allow it to cover both the browser width and height. Browser compatibility is pretty good.
I'm putting together a landing page and can't figure out why the wrapper div is not centering in IE. I've tried to set explicit widths on the body and content divs but that didn't work (the width I used was 100% because I need it to expand and contract). I know this is basic HTML but I wasn't doing my cross-browser checks at the beginning so now I'm kinda far in and can't figure out where the issue is.
The URL is here:
http://www.ncfitclub.net/landing/insanity/
I've done cross browser checks and the wrapper doesn't center in IE7,8 and 9 or in Firefox 11 (although it does center in my up to date version of Firefox on my Mac). I'm also not getting the background image in the content div to repeat-x. My assumption is that this is a width issue (which would explain why I don't see the background image on the content div) but I'm out of ideas on how to fix it. Thanks!
I have been pulling my hair out on this one all day, and I'm hoping someone smarter than me can figure it out.
I'm working on a new design for my site, and I've run into what appears to be a Firefox bug. I am using background-attachment: fixed for a gradient on the <body> element and then I have a full width <div> with another background image at the top of the page. Only in Firefox, there is a small white border at the top of the page and on either side of the <div> background.
I've tried at least a half-dozen different ways of coding the HTML and CSS, and they all produce the same results. Also, the white gap doesn't appear to be there in earlier versions of Firefox (I noticed it in version 6). I even did a clean reinstall of Firefox without any add-ons, and I'm still seeing it. Any ideas on what's causing this? Is my code wrong in some way?
See simplified test case here: http://mygemologist.com/bg-fixed-test.html
Note: This question may be related to: Crazy CSS Issue in Firefox Only - position fixed and background color, but I'm not sure on that.
Dominic, see https://bugzilla.mozilla.org/show_bug.cgi?id=677095 for this issue and https://bugzilla.mozilla.org/show_bug.cgi?id=677095#c47 for a possible workaround.
Maybe use a smaller width image? It seems firefox has issues rendering it, when zooming it goes from properly displayed to having a 1-2px white border above it.
EDIT
When I change the body css to background-position: scroll the problem seems to go away
body {
background: url("http://www.mygemologist.com/resources/bg-gradient.jpg") repeat-x scroll left top transparent;
}
There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).