I have a problem related with the css 'top' attribute of a Foundation modal.
I have long list of anchors and when I click in each anchor, a modal is opened. I have the css top attibute set to 100px.
When I use Chrome, even if I am in the bottom of the list and I click in one of the last anchors, my modal appears always at 100px of the top of the screen, i.e at 6356px of the top of the body. However, using Firefox, when I click in one of these last anchors, my modal appears at 100px of the top of the body, so I have to scroll up to see the modal. What can I do to make Firefox behave like Chrome?
Related
I have a page that fits to the screen size of the browser window. It works in any browser, except in the latest firefox 79 for android devices (it worked until the last ff release).
The new firefox release hides the bottom of the page either with its toolbar or (if set to show toolbar on top) with a useless white bar of the same size on the bottom. I have buttons at the bottom that "shine" through that white "hiding bar", but they are not touchable. So, in principle, everything on the page is positioned correctly, except that firefox lays its "hiding bar" or it's toolbar over the bottom, depending on ff settings.
In CSS I have set html,body min-height to 100%. (It doesn't help when set to 100vh)
There's a wrapper div that encloses everything else, set to min-height 100vh.
There's a footer div (inside wrapper) set to position absolute, bottom 0;
Now the page fits the screen size including firefox's "hiding bar", thus part of the footer div is invisible. As the page isn't larger than the screen it cannot be moved up. There is no way to make visible the part of the footer that is overlayed by that white bar...
(If my description isn't clear enough I can provide images)
Anybody knows how I can position something at the bottom of the really visible screen, e.g. just above firefox's "hiding bar"?
I have three divs that are supposed to sit next to each other. This works correctly in Firefox, but in IE and Chrome the middle div is not filling to the top of its container div. It fills correctly when there is nothing inside of it, but as soon as I add the buttons the div goes down the page some. I have set up and example here:
http://jsbin.com/ONuqUSom/1/edit
The middle div is the one with the id of 'transferButtons' if you comment out the buttons inside it you can see the placement that I would expect.
You could just add vertical-align: top to your transferButtons div.
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 have a test page located at http://www.candyundies.com/template_non_product.php.
In Opera, FireFox, Safari and Chrome no problems, however in IE 8
my submit button (GO) located beside my search text box, which is in its own div (search2) is under the background div color. I have tried z-index but cannot get it to display on top of the background color. Any ideas what I'm doing wrong?
You could set the z-index for this element through id or, better yet, set the backgrounds z-index to be beneath other elements and above the body if it's not the body itself, as you described.
Adding position: absolute/relative and z-index 1 for example will make it visible again. (to the submit button ofcourse)
Is it possible to have a partially transparent background/image (png logo with shadow) positioned over (using higher z-index or in some other way) some element (menu), without the top image (logo) interfering with the :hover behavior of the partially covered element (menu)?
Currently I have a div with a background image (logo) covering the menu, so the menu elements never get any :hover triggers (and can't be clicked either). I'd like the div to be displayed as it is now, but all mouse related clicks and hover events would pass trough the div to the menu as if the menu was on top.
pointer-events: none is the answer CSS provides to do this.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
See: http://jsfiddle.net/7D5Jt/
If the browser support for pointer-events is not acceptable, you'll have to use JavaScript.