I liked my Firebug's font on FF3.6 . After installing FF4 and appropriate Firbug 1.7 font has changed. How can I chose font for Firebug?
I had the same problem and have been looking for a while. I can't stand Courier. The solution is surprisingly simple:
In the Firefox Options -> Options -> Content -> (Fonts & Colors) Advanced -> Change the Monospaced font to the one you want
Restart Firefox
The side-effect is all websites that specify the monospace font will use the font you selected. This is ok for me, I don't have to see Courier.
you can modify the css of the Firebug xpi
if you are using Mac OSX,the xip is at:
~/Library/Application Support/Firefox/Profiles/xxx.default/extensions/firebug#software.joehewitt.com.xpi
open it and modify the css file,change font-family:Monaco, monospace; to other.
or you can install the new Firebug 1.8(http://getfirebug.com/),it fixed the problem.
There is no option to change the font from within Firefox/Firebug or under about:config, so you have to modify the plugin itself. There are a few things you'll need to do first, though. These instructions are valid as of the 1.8.3 version of Firebug.
Note: These changes will disappear when Firebug is updated via Firefox.
Remove the Firebug plugin in the Add-ons page. Restart Firefox and close the application.
The .xpi format is just a ZIP file, so download the xpi file and extract the file with your program of choice.
http://getfirebug.com/releases/firebug/1.8/
Do a search and replace for the text font-family: monospace; and replace with your font choices. For example, I used font-family: Consolas, "Lucida Console", monospace;.
\content\firebug\firebug.css
Line 26: font-family: monospace;
Line 255: font-family: monospace;
\skin\classic\console.css
Line 50: font-family: monospace;
Line 125: font-family: monospace;
Line 211: font-family: monospace;
Line 424: font-family: monospace;
Line 505: font-family: monospace;
\skin\classic\css.css
Line 14: font-family: monospace;
\skin\classic\debugger.css
Line 5: font-family: monospace;
Line 16: font-family: monospace;
Line 50: font-family: monospace;
Line 157: font-family: monospace;
Line 301: font-family: monospace;
Line 310: font-family: monospace;
\skin\classic\dom.css
Line 156: font-family: monospace;
\skin\classic\firebug.css
Line 72: font-family: monospace;
Line 81: font-family: monospace;
Line 92: font-family: monospace;
Line 497: font-family: monospace;
\skin\classic\html.css
Line 11: font-family: monospace;
Line 76: font-family: monospace;
\skin\classic\net.css
Line 245: font-family: monospace;
Line 655: font-family: monospace;
\skin\classic\panelbase.css
Line 260: font-family: monospace;
\skin\classic\tableRep.css
Line 4: font-family: monospace;
\skin\classic\win\firebug.css
Line 151: font-family: monospace;
Re-zip the files into a ZIP file with the same name as the one your downloaded.
Double-click the new extension file or install it from within Firefox.
Restart Firefox when prompted and your new monospace font will be used in the Firebug panels.
Goto Firebug's area and press Ctrl+Shift+Plus
Related
In Sublimetext when i end to write CSS values still before the ";" and i want to jump to the next line, the cursor goes through the ";" without it coming down too. like:
header .cont {
color: #fff;
padding: 20px;
}
But in VSC the ";" comes down:
header .cont {
color: #fff;
padding: 20px
;
}
I couldn't find anything about it on the VSC setting, it is a really handy feature to work more fluently while writting on sublimetext
I'm not sure how to word this, but if I've got something like the following variables:
$font-light: ("ford_antennalight", Arial, Helvetica, sans-serif);
$font-regular: ("ford_antennaregular", Arial, Helvetica, sans-serif);
$font-bold: ("ford_antennabold", Arial, Helvetica, sans-serif);
The ford fonts should only be displayed at a normal font weight. Whereas, if the fallback fonts are used they should use something like font-weight: 300, font-weight: 500 and font-weight: 700 accordingly.
Is it possible to set something like that up in a mixin. IE. If any of the ford fonts are used set the font-weight: normal, else set the font weight accordingly.
Hope that makes some sort of sense.
Thanks.
I am using Sublime Text 2 and LiveReload to compile my .scss file. I also tried codekit with the same problem.
Using + and - work no problem, but * and / don't compile.
font-size: 30px / 2px; doesn't compile to font-size: 15px;
but
font-size: 30px + 2px; does compile to font-size: 32px;
Any ideas? The code hinting also doesn't seem to be working for the multiply and divide operators, could it be a package conflict? Seems unlikely.
Put it in parenthesis so SCSS understands you want it to do an arithmetic operation. Also, you do not want to divide px by another px number as this will result in a unitless number.
This is what you are looking for:
div {
font-size: (30px / 2)
}
I have the following css:
.btn_container {
cursor: pointer;
font-family: Tahoma,Verdana,Arial;
font-size: 11px;
padding: 0;
width: auto;
}
.btn_center {
background: blue;
color: #FFFFFF !important;
display: block;
float: left;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
}
line-height of 30 lines up center in firefox, but 32 in webkit.
I know browsers will render things differently, but i've never had a problem getting text to center properly.
In the following example you can see that it drops a couple px lower in firefox:
http://jsfiddle.net/mstefanko/EGzEB/5/
I've done heavy testing of this in the past. I call it text jiggle. It's not something you can control. All you can do to minimize it is apply an explicit line-height (especially one in px) to every text element.
The default line-height varies by a wide margin in different browsers, and for different font families at different font sizes. Setting an explicit line-height addresses that.
But within that, the exact placement of the text within the line-height space will vary slightly browser-to-browser no matter what you do. For some combinations of font-size and line-height, all browsers match up. For instance, Arial at font-size:11px and line-height:14px renders the same in FF, Webkit, and IE. But change the line-height to 13px or 15px, and it varies by 1px browser-to-browser.
There's no standard or defined behavior for it. It's the result of how that particular font-family, font-size, and line-height happens to be rendered by the browser on that operating system. Arial, for instance, is a relatively consistent font, generally not varying by more than 1px as long as an explicit line-height is defined, while Helvetica varies by as many as 4 to 6 pixels.
I had the opposite experience actually. I noted that some header elements were positioned higher in IE7/compatibility mode as well as Chrome/Safari. So after much trouble I inspected with chrome and saw -webkit-margin-before: 1.6em or something added to the headers. Adding that value and tweaking it didn't work because it effected the height of the header which pushed some elements down but the padding option worked well for me ...
I found that this worked for me:
H1, H2, H3, H4, H5, a.mainTab div {
-webkit-padding-before: 1px;
}
a.mainTab div had spans which wouldn't respond to the padding/margin so wrapped them in a div ... this may work for li span span headers as well.
I'm wondering, why this double border on table TDs won't show in Chrome but only in FF? Any ideas what could be the work around? Thanks!
http://jsfiddle.net/yQQLk/1/
Not sure why you're using box-shadow to produce a double border, when the border property itself already supports a double border on its own. Just use the following CSS instead of what you've got:
td {
border-bottom: 3px double red;
}
Note you'll need to increase the size of the border to 3px so that both of the lines show up (with 1px, it sometimes doesn't show up at all when you specify double).
The other advantage is that this will work in all browsers, including older ones which don't support box-shadow.
Increase your border thickness to to see a more obvious demonstration of the rendering differences between the two browsers. It seems that in FF, the box-shadow is overlaid on top of the border, in Chrome it hides underneath.
You could use another approach - perhaps use a border-bottom combined with a text-decoration: underline.
Try this, it works in both the browsers:
td {
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
border-bottom: 1px solid red;
box-shadow: 0 2px 0 #000;
}
I guess, this is the problem: box-shadow: 0 1px 0 #000;