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?
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 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.
I have a full width video background running on a page, its container is absolutely positioned (and needs to be) and this seems to be breaking a fixed position element (an aside) elsewhere on the page.
When I remove the absolute positioning of the video container the aside is fixed as normal. Otherwise the fixed positioning doesn't work.
Here is the page with relevant elements isolated: http://xnthony.com/html/video_fixed.html
I've tested this in Chrome, Safari and Firefox.
Try this, i had no position problems with this plugin: http://dfcb.github.io/BigVideo.js/
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.