I'm new to web development and got this weird error message.
How shall I find "...an element..." as per error message? FF Dev tool doesn't show any flag as well.
"This element.." = <footer class="footer-grid"> right ?
Try adding this to your CSS - it will add a red border around every element so you can see what might be causing an issue.
* {border:1px solid red; }
I think that this might be a problem with firefox itself.
I'm using firefox + devtools and have an html document which shows a simple CSS grid.
When I expand the devtools panel up so that it hides part of the grid then the overflow badges start to appear against html elements which are now hidden by the devtools panel.
I'm running firefox 104.0(64 bit) on a Windows 10 PC.
Related
Sometimes I see some an unwanted border or another element in the web page and I have a lot of troubles identifying just to which element it belongs.
There may be many enclosed elements, any of which may or may not have the border in question, for example. Right now I have to go through each of them and check the border property of each, which takes a lot of effort.
So is there a way to see which element owns any given on-screen pixel with Firefox, Firebug, Chrome or any other web development tool?
I just want to point my mouse cursor at any pixel in question and see the corresponding element and/or rule.
There's usually an option to inspect any chosen element, but right-clicking on the border of an element and choosing to inspect the element doesn't seem to show the exact element the border of which was clicked.
The only way I could think of is to use the "element picker" function which exists in any developer tool.
In Chrome it is a "magnifying glass" and in Firefox a "square with an arrow" - both at the top left.
Click to activate and move the cursor around the page to inspect. The respective element is highlighted.
So you should easily find the element you are looking for.
An example:
The element inspector should do the job. The only reason I could think of for why it fails is when the element in question is covered by another element. See example:
#test-1 {
float: right;
width: 50%;
}
#test-1 >div {
border-bottom: 1px solid;
}
#test-2 {
float: left;
width: 50%;
}
#test-2 > div {
width: 200%;
}
<div id="test-1">
<div>Inspect me</div>
</div>
<div id="test-2">
<div>Obstructive element</div>
</div>
And the solution is simple: right-click on the element in question and click inspect element (zoom the page if necessary). If it is not the correct element, hit the del button on the keyboard. This removes the element you just selected. Repeat until necessary.
As far as browser functionality goes, there are two thoughts that come to mind:
The 'elements' tab of Chrome Developer Tools. If you hover over elements within the tab, that area of the page will be highlighted, complete with a height/width tooltip. (I do realize this is sort of the opposite of your use case, but it could still be useful).
Similarly, the Firefox page inspector has similar functionality.
It might be worth writing a small script to get the functionality you're looking for. You might look into jQuery's elementFromPoint. Example: http://jsfiddle.net/t8vapLwr/2/
Why don't you try this chrome extension if you don't want to rely on the element picker.
https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh
what it does is highlight the different elements on chrome.
I totally understand your problem. I have been thought it. So what i do is the following:
Obviously you can use the inspect tool which sometimes doesn't shows us what we exactly need.
You can use this chrome extension Precise Element Picker Tool and then select the specific element.
I am sure the 2nd option will solve your problem.
Using "Inspect Element" on a border has always worked for me, but potentially this could help.
It was mentioned by Sculper, but you could do something really quick yourself using document.elementFromPoint.
Just copy and paste this into the console:
window.addEventListener('click', function(e) {
e.preventDefault();
console.log(document.elementFromPoint(e.clientX, e.clientY));
}, true);
Then you can click around the page to find the element in question.
In Chrome, Firefox, and Firebug, that outputs the element to the console, which you can then click (or for Chrome right-click and "Reveal in Elements Panel") to see it in the Elements Panel.
If you need clicking for navigation (for a single-page app or the like), you can simply change the event being captured to mousemove or dblclick.
EDITED:
I have used tinymce editor to add text with external toolbar, Please look into it TINYMCE-DEMO
And everything is working same as i have mentioned below.
I have a transformed(scaled) div element with contentEditable="true". Now the problem is when I start typing on this div box then the blinking cursor sometime get hide in Firefox, but in chrome it is working perfectly. I don't understand what is wrong with this code.
Here is my code:
HTML-
<div contentEditable="true" id="textbox" class="scaleDiv">Add Text Here...</div>
CSS-
<style>
#textbox { width:400px;height:250px;background:#FFC0CB;word-wrap:break-word; padding:5px;}
.scaleDiv { -moz-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}
</style>
And Here is the
DEMO
If you move your cursor after typing from left to right or right to left then you can see the cursor - sometimes get visible and sometimes get hide.
Please Help...
It will be down to the use of different aliasing methods when scaling, or the fact that Chrome makes a concerted effort to keep the cursor alive. What is happening in FireFox is that at certain points the single vertical line (i.e. cursor) is being scaled away, this happens sometimes when using certain types of scaling, like nearest neighbour. This problem could be OS specific, I see it with the FF 26.0 on Windows.
For example:
Take this image:
And then scale it 0.75 (I've used PhotoShop and Nearest Neighbour here, but the principal is the same)
As you can see some of the lines have vanished.
Basically you need to look into if it is possible to change the type of scaling used in FireFox and with CSS. Sadly, from what I can see so far, it is only possible for images using the image-rendering css property or the Microsoft non-standard -ms-interpolation-mode...
I am creating a website and there's a strange white space at the bottom of the page (only at IE). safari is fine. i am using ie8.
I want the white background ended after that black navigation links.
http://www.applezone.com.hk/newrx/
I can't figure out which part of the css causing that white space.
Thanks.
try adding those:
.navlink{
display: inline-block;
margin-left: 51px;
}
i don't have IE8 to test on but i do use "IE tester" program which showed me the problem.
If you use Firebug (Firefox add-on) you can select that white space and it will show you where it is in the DOM, i.e. what the HTML is that is actually generating it - which element it's part of.
You can also switch on and off the individual styles on the fly.
The equivalent in IE is to hit F12 and get the 'Developer Tools' console. Find -> Select Element by Click.
Try display:block and/or margin:0 and/or padding:0 for the element in question. One of them is going to be the culprit.
For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.
For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).
I have the following classes defined:
.ImageHoverSpan .ImageOuterPanel {
display: none; }
.customer .ImageHoverSpan:hover .ImageOuterPanel {
display: block; }
This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.
I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.
Has anyone got any ideas about what could be causing this? Anyone had this problem before?
Thank you.
Regards,
Richard
Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.
Richard