div is scrolling in chrome and firefox, not in safari - html

I have a menu div on the left of my page (choptlogic.com), and in firefox and chrome it scrolls a bit, which I don't want it to do. In Safari, its perfect doesn't scroll at all. I've looked to see if any elements have excess padding that might be causing something, but the header class has an autoflow-y set to auto, so I'm a bit lost as to what might be causing this.
any help greatly appreciated!
thanks!

If you've got an element that is scrolling unnecessarily you can try to hide the overflow using CSS:
div {
overflow: hidden;
}

At line 8995 add in your rule overflow:hidden
.header-inverse #page, .header-inverse .header, .header-inverse .header__inner-wrap
{
background-color: #09769f;
overflow: hidden;
}

Related

Scroll bars never appear when re-sizing web page

so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}

Margin not working only in Safari (element is at the bottom of the page)

Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}

Overflow-X Hidden on html tag, iOS Safari Lags

On a simple mobile page, i tested on iOS safari have some overflow div using
div {position:absolute; right:-2em; /* or */ left: -3em;}
if i set the body using
body {width:100%; overflow-x: hidden;}
it only hide the scroll bar, but still able to pan to the right;
but if I do
html {overflow-x: hidden;}
it dose the trick but make scrolling very laggy. prob something simple that i overlooked.
thanks
EDIT:
sorry I didnt read your question correctly but try changing the block's position to this instead:
position:fixed;
it does what you want but that block will stay in that spot when you scroll up and down.
try that and see if it is what you wanted.

CSS full width horizontal scroll

I have just completed the following website but when I load it I seem to have an excess scroll.
Could you please give me feedback as to why and how could I resolve this issue.
I can post the code here but most people from the previous questions I have had over the last couple of days like a working example
So, the NAV element in the footer had a negative right margin, which caused a horizontal overflow, which in turn caused the scroll-bar to appear. I guess, your intention was to move the nav-items further to the right.
To get rid of the scroll-bar, just remove the negative margin, and instead set the width of the NAV to the appropriate value.
Try to add following line to your wrapper
overflow-x: hidden;
Try adding this css property to your <div id="wrapper"> element:
overflow-x: hidden;
Check this link for the official documentation of the overflow-x property.
Your css should look something like this:
#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
overflow-x: hidden;
}
I've tried it in Safari(version 5.1.7), Firefox(11.x) and Google Chrome(19.x) on a Mac Os and it works like a charm.
Hope it helps!

Overflow-x:hidden not working in Chrome

I've applied this property to the elements: body and html and still Chrome will let me scroll on the x-axis.
I've tested it in Safari and Firefox and the x-axis scrolling is disabled...
Anyone know what I'm missing?
N.B. Using overflow: hidden works but I'd like people to be able to scroll on the y-axis.
Thanks!
You can use
html { overflow-x: hidden; }​
I just encountered this issue when trying to hide some images that I /knew/ would be wider than the body on mobile.
Originally I simply had:
body { overflow-x: hidden; }
This didn't work in Chrome, but it did in IE 10.
However, if you then also added:
html { overflow-x: hidden; }
The images were correctly hidden in both browsers.
It appears the problem no longer exists thanks to #Nelson pointing this out.
You can see the code working correctly here: http://jsfiddle.net/H84pr