After have changed marker icon (same as original, just colorized), borders are still displayed under Firefox, not from Chromium :
This CSS code has no effect:
border: none; / border: 0;
overflow: hidden;
An idea to force hide this undesirable effect?
In fact, this effect has added by an outside element: .leaflet-pane.leaflet-shadow-pane ; no rule applied on .leaflet-pane.leaflet-marker-pane that contain markers.
Code inspection has been not easy: element to hide
Solved by simple display: none; rule on this element .leaflet-pane.leaflet-shadow-pane: you can see
Seems rather like the "border" you see is actually the placeholder for a broken image.
Typically if your custom Marker icon's shadow is missing (e.g. you forgot to change its default value, while not providing the default shadow image asset)
This would also explain the different behaviour between browsers, since each of them hints for broken image differently.
Related
On this site, https://kkmpr.com/, there is a section that says "Shop" and below it there is a Slider built using slick slider. I know how to change the dot and arrow colors (on the :before), but even in my inspector, I can't get the colors to change. At first, I thought maybe they were being positioned underneath the slider images, but I don't think that is the case either. I can't figure out what is going on. If I disable the slick-theme.scss style sheet, I can see the unstyled "Next" and "Previous" buttons with the numbers for the dots below.
It looks like there is overflow: hidden applied to .slider, and the arrows are absolutely positioned outside of that element.
Adding the following CSS reveals the arrows in the Shop section:
#slider-container .slider {
overflow: initial;
}
Enabling the arrows and dots are properties of the object.
They probably have them disabled in the properties of the actual js object.
I'm using this inside Angular if it matters, but for some unknown reason only in Edge.. as I move the mouse around on the screen the img will either distort and render with some of it missing, or completely disappear
thoughts?
<img class="my_image_class" src="img/My-Svg-ToRender.svg" ng-src="img/My-Svg-ToRender.svg">
associated CSS for this element is as follows.. I've tried setting no height and no width, setting height and width.. behavior doesn't change
img.my_image_class {
width: 100%;
-webkit-user-drag: none;
}
there is other parent CSS, but it looks like just margins, borders, padding
edit :
turning everything I can off, in CSS, I notice the svg will not render UNTIL I mouse over it.. I do not see any directives that could be modifying the svg's CSS and don't see any transformations occurring
I found some open issues on SVGs through Microsoft's feedback portal; it looks like a recent update may have negatively impacted SVG display in Edge (e.g., https://connect.microsoft.com/IE/feedback/details/2350665). Based on what I've read about this issue, it seems like text boxes are a common culprit.
My website displays a logo as an SVG containing text, and it renders without problem in Edge. However, before I exported my SVG from Illustrator, I converted all text to paths. I did this for a similar reason: I was having issues with SVG text display in Safari.
Of course, ideally, SVGs should just work in all browsers. And it seems like this issue is on the fix-list for Edge. But in the meantime, perhaps this workaround will help! Cheers!
I had my inline svg images disappear on hover. I had the following styling:
svg {width: 100%; height: 60px;}
The 'width: 100%' styling was intended to activate the hover styling as soon as the mouse entered the containing block element. This caused som strange behavior on the svg image. Mouse-in from top or bottom functioned as expected, mouse-in from left or right caused the svg to disappear. Removing the 'width' styling, solved the problem.
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.
I am having problems with the text input in firefox, it has some margins and I can;t get rid of them, maybe that space is not a margin?(it is outside the border of the input so it looks like a margin).
In the image above the width of the input is set to 100%,,margin and padding is 0, also i tried setting -moz-box-sizing: border-box;
I would like some resources or an explanation to make me understand what is that space and how can I get rid of it?
Thanks.
Edit1:
Here is my current test page
https://www.designersbookshop.com/support/test.html
also i made a copy in ...test_2.html (i will try the suggestions on the test.html),
Check the inputs on left side.
Edit2:
My Firefox version is 10.0.2
Here is how an input element looks like in firebug, it is clear that a margin or something similar is painted outside the border(or i am stupid but I want to learn)
in the image above the border of the input is the small line(1px) visible on left and right of the input.
Edit3 I figure it out, is the border, I am on Ubuntu but I has similar on Mac,so it is the theme engine that adds that white border?
You're using OSX right? I think what you are referring to is the focus highlighting. It's only seen on the active element, right?
Normally that is controlled by
input:focus {
outline: none;
}
Some people use it to remove the rectangle around links as well. which is a bad practice since it reduces usability as users can't visually see what is the active link. (think of keyboard users.)
FYI: here is a screenshot of your test page (from Edit1) in Firefox 10 under Windows: http://img210.imageshack.us/img210/1764/inputform.png
As it always has been with input fields in HTML - their appearance is often dictated by the OS or browser. Very hard to get a consistent appearance.
May be it is outline or border
Try
input {
padding:0;
margin: 0;
border: none;
outline: none;
}
Update: I cannot duplicate your problem on my system. This is what i see
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.