I edited some files (CSS and PHP) on a website. Now Firebug (2.0.9) displays the same line number for every CSS rule within the Style side panel. I've tried uninstalling and re-installing Firebug - no luck.
Even on this website, every rule I inspect says (line 1).
Anyone knows how I can get Firebug to display the correct line numbers again?
Since you say the changes were to the files, not to Firebug, I would say the issue is the CSS file and Firebug is reporting the line number correctly. That is to say there is no new lines in the file - all rules are on a single line.
Take a look at the .css file in a basic text editor and make sure the white space hasn't been removed. If it has, you may still see the text wrap and look to be on separate lines but this is just how the editor is showing it - word wrap can usually be turned on/off in editors.
If it looks like a big block of text then your CSS has been minified most likely.
Related
At the beginning - I am sorry if title is not accurate. I just don't know how to call it properly.
Is there a way to find all paths related to some file, in my case it is bootstrap.min.css (it could be with unminified version) within a project? I mean, like on this screen:
So I want to find in DevTools (or may be in WebStorm, if it is simpler to do so) all Bootstrap paths that are related to all elements in project. At above screen i selected <nav> element with some Bootstrap classes, which I can see on the right. I emphased (red rectangle) Bootstrap CSS source file paths - already filtered by DevTools (orange rectangle). I could of course manually click on each link to exact line, but there are many HTML elements and some of them have multiple classes, there are few pages also. So it will take long time to click in all such links.
Is there a quick way to filter/find all such paths (that marked as red), which are used by Bootstrap CSS selectors to match all HTML elements in project?
Open DevTools
Overflow Menu > More Tools > Coverage
Click record in the toolbar of the drawer panel
Stop recording and view results
When viewing results you will be taken to the appropriate file in the Sources panel. This will then highlight each line in the gutter either red or green to indicate whether or not it was used. This works for CSS and JavaScript.
(Ask to answer)
For the project I'm working on we have a custom set of icons, which I converted into a font using https://glyphter.com/ (just googled this type of service and it seemed okay).
Inside one of the block I'm inserting an icon with the class from the CSS generated by the service (like you normally do with an icon font).
And suddenly the displayed icon is wrong - though the content property is okay.
Also could not find any other interfering styles which could do that.
Sorry, no code here, got no time for that. Also the project is quite restricted in terms of sharing details.
So after half a day of looking for a problem and trying different scenarios, it appeared, that the icon font generated had the same icons for the letters in both upper and lower case. And yes, the set started on the letters, not with an extended UTF-8 table (or whatever).
So the parent element had text-transform: uppercase which changed the icon without changing the content or else.
Maybe someone will find this info helpful.
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
I implemented PDF.js library and I need to print a PDF from IE 11 (with a click on a button in PDF.js viewer). The problem is, IE adds page information (header, footer, page number), and cuts off text like 5cm to the right. I spent hours trying out different CSS variants for #page rule, but still can't fix it. Here are the pictures.
This is how the printed file should look like:
And this is how it looks like printed to pdf with margin-left and margin-right set to 0mm:
You see, position and size are correct, but the text is simply cut off. Now when I added 50mm to the right margin:
Now the page number is aligned with the document, and the document text is still cut off, but a little less.
I experimented with different values and I get weird results, but I can't get it to show the complete text. Tried all kinds of margins, padding, size, width, overflow: visible... Nothing works. The only way I managed to remove header, footer and page numbers is by manually setting it up in IE print settings. But then again text is cut off. And it shouldn't be the client's job to mess around with print settings, it should automatically work just fine. I found similar problems on SO but no final answer. Is this actually an IE bug which is impossible to solve? Thanks
I believe that you can find more information about this (and other IE) printing issues here:
(IE: Incorrect printing in Internet Explorer)
https://github.com/mozilla/pdf.js/issues/3983
There appears to be a lot of issues around printing in IE 10 and IE 11 using this pdf.js library. I am currently trying to get it to work myself.
(My own problem is that I am getting page 2 content appearing on page 1 and having page 1 content cut off)
this (around line 3469, viewer.js)
canvas.style.width = (PRINT_OUTPUT_SCALE * viewport.width) + 'px';
canvas.style.height = (PRINT_OUTPUT_SCALE * viewport.height) + 'px';
var cssScale = 'scale(1, 1)';
seems to fix the scaling issue for me, and the comment by himawan-r (page setup dialog) around the 25 Apr 2015 told me how to get rid of the headers/footers.
My only real workaround at the moment is to force printing in a PDF plugin, and if the plugin is not installed, default to a standard html page with the relevant CSS queries for stripping non-printable areas.
I hope that this issue is something that is going to get addressed quickly, because I really like the pdf.js library.
I have tried to search for this all over, but haven't found anything close to my question anywhere.
Does anyone know if it's possible to print out a CSS generated linear-gradient? I am mocking up a website for my boss, and it looks really nice, but when I try to make a printer-friendly page, the gradients don't display at all.
For reference, what I'm trying to print is a indicator bar that has a slider element on top of it, to indicate the result of a value within a range.
The gradients look really great on the page, but just don't show up in a print dialog.
Thanks in advance!
If i understand your problem correctly, sounds like all background images aren't printing right? That's a default behavior of IE. To print background graphics (which might include your 'gradient graphic', go to print -> page setup and click on "Print background colors and images".
Hope this helps.
Not exact here, but printing is rendered in it's own engine apart from the browsers engine.
It TYPICALLY (with the exception of say, the iPad) filters out background images and certain types of rendered material to save on ink. The only way to change this is if the user changes his or her own printing preferences.
There is no CSS or Javascript way to make this happen, unless you render the page as an image, and print the image.
I can go in to more detail if you'd like, but with the exception of the iPad, print formatting like eMail formatting is a tricky area to get in to.