I have just inserted a slider in to a site, with a negative top margin of -13px on the wrapper div so that it is slightly underneath a semi-transparent white bar (which has higher z-index) and in Opera it looks fine.
However in Firefox, IE and Chrome, the negative margin doesn't seem to have an effect and the semi-transparent white bar is just showing the white background behind, if I remove "overflow: hidden;" from the wrapper div then the slider moves up but this breaks the actual slider re-positioning the slides halfway across the screen etc..
The slider is the revolution slider plugin and this is a Wordpress site (though didn't post this question in the Wordpress stackoverflow site as it's not related to Wordpress core functions, simply a CSS issue i presume?).
Slider can be seen here: http://tinyurl.com/qjumkt8
Thanks #webkit for the solution, I also managed to get it working by changing overflow: hidden to visible on both the slider wrapper and the child div but webkit's solution is much simpler.
Related
I'm building a web application and testing with Google Chrome. I have a sidebar element where, if I hover over that element, I want to disable scrolling for the body element.
I achieved this by setting overflow: hidden on the body tag using CSS whenever a user hovers over the sidebar. I tested this on a browser without a USB mouse plugged in, and it worked great:
Sidebar Closed (body scrollbar visible)
Sidebar Open - Bad (body scrollbar still visible, producing an ugly overlap)
Sidebar Open - Good (my fix: hiding body scrollbar, so that sidebar scrollbar displays alone)
This works because Google Chrome doesn't render scrollbars as actual elements (that have widths). However, when I plug in my USB mouse, the scrollbars now do have widths. And thus, when I move my mouse from outside the scrollbar to inside the scrollbar, the width suddenly changes:
Before Hover (body scrollbar visible)
After Hover - Bad (body scrollbar hidden, suddenly decreasing the width of the whole sidebar)
This produces a really ugly and glitchy visual effect, where the widths of elements change when you hover over them. I've looked everywhere for a solution to this... any help would be much appreciated! Thanks so much!
If you are on a mac, chances are your OS is adding the scroll bar when you plug in the mouse, a scroll bar that will override most CSS selectors.
There is not a way to override this with CSS that I am aware of. If you change your system preferences you will find your website behaving the way you intended.
System Preferences -> General -> Show Scroll Bars -> Change from [ALWAYS] to [WHEN SCROLLING]
.MY_CSS_CLASS::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}
This fixed my issue with ugly scrollbar being displayed when mouse is connected.
Specifying width to the body element will keep content width constant.
Here is the working example: https://jsfiddle.net/fuhacLtn/2/
First, you should pay attention to the rendering with other browsers and with chrome windows. As you know, the windows scroll bar is clearly not the same and is not rendered in the same way. You might have surprises with this.
Otherwise you maybe should pay attention to jQuery custom content scroller plugins.
This could actually helps you a bit more to control the scroll & the overflow and customize the scroll bar depending on the render you would like to give to it.
Good Luck'
I am working on a BuddyPress theme where there will be some images floating right on the padder div using add_action="bp_before_blog_post". On Linux/Firefox everything works as expected. The transform expands out and overlaps the sidebar div.
On Chrome and Safari the image expands to the sidebar div but then is hidden. I have tripple checked BP-Default theme and there isn't a css overflow: hidden value for the sidebar, or padder div. I have checked every line of bp-default.css, and used Chrome Web Developer and Firebug to check the live css.
I can't try a position:absolute as it needs to float on the right of the blog post. I setup a jsfiddle to try to show the behavior except that unless I created a div with overflow:hidden I couldn't replicate it. When you hover over the bottom image on the right you can clearly see the clipping. I found a public site with the BP-Default theme here, if you need to take a look at the css.
Since the container div does have overflow: hidden I am wondering if it is being inherited. If that's the case the theme doesn't work properly when I do overflow: transparent or remove it entirely.
Can you find where/why the image is clipped on sidebar div edge?
Is there a way to bust out using z-index or some other CSS method?
Is this a bug on Chrome/Safari to clip at the div edge or maybe a bug in Firefox 23 Linux that it doesn't?
I've been looking for a solution, but haven't come up with anything so far.
I am building my site on wordpress. Everything is going fine, but I have a margin on the entire body on the right. You are able to scroll to the right and see where my header cuts off and there is a white margin. it does not do that with the admin bar at the top, only my theme body. I didn't add any margins to the body, the width is 100%. Anyone have an idea or a link with a solution? I'ved looked at it on a different computers and browsers and it does the same thing.
here is my website (work in progress)
http://www.thewaymultimedia.com/wordpress/
The problem appears to be your footer element. It has a width of 100% and also has left-right padding. If you make padding style on this element padding: 10px 0px the problem goes away.
I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it