I have recently encountered an issue in Opera, where it attempts to display scrollbar on a position:absolute+overflow:auto parent, when the child element has more content but with max-height set.
To illustrate the scenario, view this demo: http://jsfiddle.net/kMZKm/12/
Changing the positioned element to have a fixed height, or changing the inner element to use height:100% instead of max-height:100%, will not trigger the scrollbar in Opera.
Other browser such as Chrome, Firefox or IE, does not display scrollbar in neither scenarios.
I am wondering if this is a bug in Opera (appear in both ver.11 and 12), or just an undefined scenario in w3c spec?
(it might seem counter-intuitive to have overflow:auto parent with max-height children, but the setup is actually quite useful for things like javascript scrolling, Opera's behaviour cause unexpected height of child element to be reported, thus breaking the custom scroll)
If you zoom out, the scrollbar appears in the other browsers as well. A changelog may be the reason: Spatial navigation in an overflow:hidden box not scrolling
Related
I've got shadow scrollable elements whose scrolling is linked to the scroll offsets of other elements: https://henrybuilt.github.io/react-sticky-table/
For some reason, I can't get them to appear in Safari on OSX when scrollbars are set to always show. Modifying the z-index after page-load using the dev controls appears to affect them, but not consistently. The scrollbars render just fine in other browsers.
What is causing this rendering issue and how can I fix it?
I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.
It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.
The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.
I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.
Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.
Thanks for any pointers folks - this one has me stumped!
Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.
As I know, the answer would be WebKit in CSS
Internet Explorer, Firefox and WebKit are three different things.
Webkit is used by Safari and Chrome.
moz is for Mozilla
o is for Opera
"normal" is for Internet Explorer.
You can read more about here
The anchor tag and div apply the margin-top property to the child elements just fine, however the button can not.
I have tested in latest versions of safari, chrome and firefox.
Firefox has no issues provided the -moz-focus-inner property is applied, i'm wondering if there may be a similar issue with webkit?
http://jsfiddle.net/Ym3BL/1/
Does anyone know how to make the three items style the same/ or how to allow for margin-top in webkit browsers?
Many Thanks
-Jai
So I figured it out and feel like a numpty.
The key property is -webkit-margin-top-collapse:separate; applied to the child element, this doesn't quite make sense to me still, as the parent element has no margin or padding so therefore why should i need to separate the margins?
however it works so i'm not complaining
http://jsfiddle.net/Ym3BL/2/
I am using http://tympanus.net/jPaginate/ to implement pagination. Under Chrome 11, Demo 5 looks normal but under IE9 or Firefox 4, the last page number is shown and gets moved to a new line.
I think the div has overflow:hidden set so that the hidden page numbers are not supposed to be shown, unless ">>" or "<<" is mouseover. This used to work properly in IE8 and Firefox 3.
How can I implement a workaround for IE9 and Firefox 4?
Set a fixed height to the div, otherwise it will stretch to accomodate all the content.
[EDIT]
Ah, it does not solve your issue, plus, seeing that the paginator is generated entirely by the plugin, I believe it's the plugin that is messing something up. It might also be that jQuery's width() function refuses to cooperate with FF4 and IE9. I happen to have a problem with width() resizing list elements in a nav menu on one of my sites, and it also happens with FF4 and IE9 only. Odd... You could try increasing the width of the <ul> containing the pagination elements with jQuery after generating the paginator, but that's a provisional solution.
The page that you were referring to has the problem no longer.
I assume the element had display:inline-block property set -- that was the problem I had with my case.
To solve this case, you need to set vertial-align property.
From the spec:
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
Giving the ul.jPag-pages li element a fixed width solved my problem under ie9 and ie10
My site http://bit.ly/aokA4I has a search bar on the top right.
You can see it on IE7, FF, Chrome, Safari -- but not on IE8. It gets chopped off.
BTW if you happen to see it on IE8 just refresh the page and it will chop.
If I run IE8 on compatibility mode the search bar becomes visible.
Any ideas how to solve this?
Thanks!!
It's because IE8 is interpreting the nature of its parent container: header_widget_1. The sizing or formatting of this element is causing the <li> element to be clipped prematurely. If you have Google Chrome, you can right click the sidebar element you're asking about and choose "Inspect Element". This will show you what the elements are doing.
Edit: You also have a sizable horizontal scrollbar in IE7.
Edit 2:
You might try altering the height of your #header element to be the height you want. Since height is not expressed in the sidebar class, this may also be contributing to the problem.