I'm trying to embed some contents into a HTML5 device mockup. The library that I use for mockup is https://github.com/pixelsign/html5-device-mockups.
I created a button inside 'screen' div but I can not reach to it.
If you inspect this page's elements, you can see that 'screen' div is not reachable with mouse click. I've tried to changed z-index property but it didn't help.
The .screen div has its property pointer-events set to none in general.scss
Removing the property and rebuilding the CSS should work.
Note: I do not know why this property was set to none in the first place. Removing it might have some side effects.
Related
I was trying yo use Ng-bootstrap 'ngbPopover' feature but it wasn't working. The popover would not appear after clicking the button. After hours of debugging I finally found the cause of my problems.
It was the css transform property in the parent component.
After research I have come to the understanding that the transform property does indeed affect the css position property of child elements (see: stacking context), and it seems that for the case of the ng-bootsrap pop-over it makes the component not work as it should.
To overcome this I added position: relative in the css of pop-over button container and it worked.
I am having an issue with the layout of my website in Firefox it works in Chrome. It is also hard to show you my code because I am using some plug ins to add elements so it is not just in normal HTML. The images inside the table cell are being displayed full size in Firefox which is messing up my layout.
I was playing around with the inspector and I saw that if I untick display:table cell the layout goes back to how I want it.
Could I please have a pointer of how to override this in the CSS?
The default value of the display property depends on the specific element, but for layout elements it is most likely block. Therefore you can use display:block to reset the value to its cascading default.
I have a dropdown menu which works fine in all modern browsers, but there are some weird things happening in IE9. The dropdown appears transparent or invisible in some way, but its box-shadow is visible. In addition, hovering fails when you mouse off the parent list item.
I am referring to the main navigation bar at the top:
http://gratefulglass.viussandbox.co/
I placed a red border on the submenu's containing element, to illustrate that the menu appears to be positioned correctly.
Any suggestions would be greatly appreciated.
The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.
Check this links:
1,
2
Sorry, but cant put more links:
http:// && joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/
http:// && www.webdeveloper.com/forum/showthread.php?163100-Opacity-hover-not-working-in-IE
Some properties behave different or are not persistent depending the browser.
But there is always a way to make it work.
Best way to make it work, javascript.
Here is the site:
http://ivideez.com/
As you can see my dropdowns are being hidden behind the video; how do I get then to dropdown OVER the video.
What do I add to css? i've tried overflow, position, z-index, I'm stuck, any advice? I'd prefer if cross-broswer capable answer.
Use wmode property of embed to transparent as like bellow :-
wmode=transparent
I hope it will helps..!!
PS
For more details :- Refer to here
i had same problem once and i solved it by applying z-index to main container. try giving the z-index value to parent container that holds the dropdown menu instead of directly giving it to the .. Also give z-index to flash video whose value should be smaller..
(clickable)
Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).
Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..
What's going on?! :(
Do you have AdBlock installed? That might be hiding that div.
An extra little note: FireBug will actually show something like this in the Style pane when AdBlock Plus is blocking it (wrapped for clarity):
.mainad, #mainad { undefined (line 233)
-moz-binding:url(chrome://global/content/bindings/
general.xml?abphit:707307897865#basecontrol) !important;
}
Firebug displays selectors without HTML content, or block element styles as gray. If you edit the HTML, and add some copy you will see the selector regain its colors.